For those who use fancy box and iframe inside fancy box might face the issue of changing the height. Once fancybox is loaded with a particular height and width, it does not change when you change the content inside iframe dynamically. Auto height change is only possible for images.

Use the below code to change the dimensions of an iframe in runtime.

<script type=”text/javascript”>

parent.$(“#fancy_outer”).width(100); parent.$(“#fancy_outer”).height(120);

</script>

Cheers

Sajith

Tags: autoheight, fancybox, iframe, Javascript, runtime, script

Finally I found a good light-box which really matches the name “Light box” in FancyBox.  It is a jQuery based light window. It has very less features while compare with any other light box, but simple to use. Compatible with all browsers.

Go here to find it : http://fancybox.net/

You need to add the below javascript in addition to the jquery js file.

<script type="text/javascript" src="path-to-file/jquery.fancybox.js"></script>

To create a link to open in fancybox, call the function fancybox. For example, if you have a link pointing an image <a href=”myimage.gif” id=”imglink” />

Call

<script>

$(“#imglink”).fancybox();

</script>

The window automatically resize with image. If you put title attribute, it shows the title below with the light window.

Instead of image, you can point a file. If you need to open that file in iframe, use class=“iframe”

Visit http://fancybox.net/howto for more usability.

Tags: ajax, fancybox, iframe, jquery, light, lightbox, plugin, window