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!
You could also use the
beforeShow
callback option, but you may need to cancel all the transitions (setnextSpeed
andprevSpeed
to0
).The transition speed seems to be creating the jumping effect using the
afterShow
callback or avoiding to get the correct value using thebeforeShow
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:
See DEMO here