FancyBox is a plugin for jQuery that allows you to easily display images in the same window with a simple yet effective code. The plugin takes no time to set up and all that is required is that you include the jQuery javascript library within the pages that you are using the FancyBox plugin on.

Features:

• Display single images
• Create image galleries
• Display iFrame
• Execute Ajax
• Include Flash, movies or audio files

Using FancyBox

First of all we need to link to the jQuery and FancyBox file after we have downloaded.

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

Next we add the stylesheet that is included with FancyBox:

<link rel="stylesheet" href="path-to-file/fancybox.css" type="text/css" media="screen">

Then to link to an image we simply set the id of an image to "single_image":

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

All that is left to do is execute the jQuery code when the DOM is loaded.

$(document).ready(function() {
 
    $("a#single_image").fancybox();
 
}

That is all the code that is needed to display a single image. To learn how to do things such as ajax calls, view the documentation for FancyBox here.

Other lightbox alternatives

Is there another lightbox alternative that you have used that you would like to share with all the readers? Post a comment below.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.