Does fancy box work with iframes in beforeShow function?

Question

Im trying to dynamically set some values ​​of my Fancybox object based on the information stored in the tags inside the iframe that the loadable frame box loads. the problem is that the only time I can get CORRECT values ​​from content (iv tried to use almost all the callback features) is in the afterShow method. this causes an abrupt transition of width and height, which are reset after displaying it.

  $ ('. fancybox'). fancybox ({
             openEffect: 'elastic',
             closeEffect: 'elastic',
             autoSize: true,
             afterShow: function () {
                     var fancy = this;
                     var h = $ ('. fancybox-iframe'). contents (). find ('html'). height ();
                     var w = $ ('. fancybox-iframe'). contents (). find ('html'). width ();
                     fancy.width = w;
                     fancy.height = (h + 50);
             }
         });

nothing beyond the afterShow method gives me the correct results, even beforeShow (which is what I'm going to do). Are there any callback / jquery commands that can achieve this before showing a fancy box? Thanks!

Answer 1

You can also use the beforeShow callback function, but you may need to cancel all transitions (set nextSpeed and prevSpeed to 0 ).

The transition speed seems to create a jump effect using the afterShow or to get the correct value using the beforeShow .

You may also need to update fancybox v2.0.6.

In addition, you can simplify your script without using external variables such as:

 $(document).ready(function() { $("a.fancybox").fancybox({ openEffect : 'elastic', closeEffect : 'elastic', fitToView: false, nextSpeed: 0, //important prevSpeed: 0, //important beforeShow: function(){ // added 50px to avoid scrollbars inside fancybox this.width = ($('.fancybox-iframe').contents().find('html').width())+50; this.height = ($('.fancybox-iframe').contents().find('html').height())+50; } }); // fancybox }); // ready 

See DEMO here