HI guys,
We are sharing this new article Fancybox runtime Resizing of iframe, For those who use fancy box and iframe inside fancy box might face the issue of changing the height and width. Once fancybox is loaded with a particular height and width, it does not change when you change the content inside iframe dynamically. Auto resize change is only possible for div.
This Fancybox runtime Resizing of iframe helps you to resize the fancybox even though fancybox contain iframe and content are changing dynamically.
Light box is updated, and We are also updating the plugin code. current download works only with older version of fancybox. Please be patient and keep visiting for updated code.
Implementation
-
1) Include following javascript code in the page which open in fancybox iframe
|
1 2 |
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/resize_fancybox.js"></script> |
contact : shrikantjadhav86@gmail.com
Thanks for this!
I have a problem where only the height of the iframe is changing. The width is not getting affected.
Hi, sorry for late reply.
to resolve this problem please comment the following line from script file;
if (docScrollWidth && docOffsetWidth) docHt = Math.max(docScrollWidth, docOffsetWidth);
hope this will solve your problem.
i cant fix width and height please help me 🙁
$(document).ready(function() {
$(“#various3”).fancybox({
‘width’ : ‘40%’,
‘height’ : ‘78%’,
‘autoScale’ : false,
‘transitionIn’ : ‘none’,
‘transitionOut’ : ‘none’,
‘type’ : ‘iframe’
});
});
thanks
Hello,please contact me !!
Hi, Whats the problem? How do i contact you?
Got it! Thanks a lot again for hleipng me out!
this my email id shrikantjadhav86@gmail.com
An example of the script in action would be awesome.
Cheers.
I have used this. But a white space shows for expanded area
please specify the browser and version…
Firefox Version 3.6.15. Thank you very much for your quick reply.
Let me check it out once, i will be back to you very soon. sorry for inconvenience
Few things needed changes for me at least.
-changed #fancybox-inner to #fancybox-content
-setting ‘width’ paramater that is generally alright gives decent results
to add?
+ability to resize it dynamically with page changes would be nice
Thank You for the script however. 🙂 🙂
Hello pal, thanks for the script its greatly appreciated ive been struggling with this for some time. I still cant get the width to resize even after commenting this line out of the script.
if (docScrollWidth && docOffsetWidth) docHt = Math.max(docScrollWidth, docOffsetWidth);
Do you have any ideas? also, i want to send scrolling=’no’ to the parent.fancybox. any clues?
THANKS!!!!!!!
oh and @ sergey,
How is this script not dynamic? it’s will only not work to dynamically resize pages if you put fixed variables in as you have suggested, even then it would be very easy to pass fixed dimensions or have fixed vars for each size. have I missed something?
I would also buzz hard if someone worked out how to get some animation into this script so the resize doesnt jerk.
CHEERS!
This seems an excellent job. Do you know if this hack can work in the easy fancybox pluggin, which is built using the original fancybox? do you have an online demo where we can see it in action using iframes.
We are not sure if it works with eacy fancybox or not. Sorry dude, there is no demo page.
It’s not working with fancybox 1.3.4.
[Edited] Sorry, It works with fancybox 1.3 . Just change #fancybox-inner to #fancybox-content.
Hi all
I am going to modify this script so that all the above issues will fix. you will have new code very soon with the demo page.
I trying this script but my fancybox is very big when I change page with ajax why?
change and comment on the above lines indicating
sorry for my english
Can you please show us a demo page.
Sure, http://santapc.com.uy/test/
Click in button “Arma tu pc ahora” then click in “Empezar ahora” and you will see disarming the FancyBox
This is way more hlfeupl than anything else I’ve looked at.
for me the script only woks on the load of the window, how to resize after dynamiclly adding a div, i am developing comment form, so when the user add new comment i need to resize the modal window. i am using jquery ajax with asp.net. Please help…
U will need to call complete code everytime u add something to iframe…so copy all code in to a seperate function and then call it everytime u change iframe data…i am not sure, but somethilg like this
$(“iframe”).change(function(){
// repeating code goes here
});
If u are adding data urself then call that function urself immidiately after adding contents.
thank you for sharing this i searched this on many blogs and sites and finally i got hear.
[…] UPDATE: Found the answer here: https://amitpatil.me/fancybox-runtime-resizing-of-iframe/ […]
[…] UPDATE: Found the answer here: https://amitpatil.me/fancybox-runtime-resizing-of-iframe/ […]
nice article very useful!