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.

Related posts:

1. Quick Tip: Resolving conflicting problems between jQuery and MooTools or any other Javascript library Recently I wrote quite a huge chunk of jQuery for...
2. Deep Linking with jQuery You can view a demo and download the resources for...
3. PHP gallery with no page reloads using jQuery For this tutorial we will be using the ImgBrowz0r class...
4. jQuery Dropdown Suggestions For this tutorial we are going to create a drop...
5. Twitter-like pagination using CodeIgniter and jQuery If you use Twitter you'll notice that there is a...

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