jquery - fancy box work with iframes in beforeShow function?

Question

Im trying to dynamically set some values of my Fancybox object based on information stored in tags inside of an iframe which fancy box is loading. the problem is, the only time i can seem to get the CORRECT values out of the content (iv tried virtually every callback combo possible) is on the afterShow method. this causes a jumpy transition of the width and height which are reset after it is shown.

$('.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 outside of the afterShow method gives me correct results, even beforeShow(which is what I am going for). Is there any callback/jquery combo that can achieve this before showing the fancy box? Thanks!

Answer 1

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

The transition speed seems to be creating the jumping effect using the afterShow callback or avoiding to get the correct value using the beforeShow callback.

You may also need to update to fancybox version v2.0.6.

Additionally, you could also simplify your script without using external variables like:

$(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