10+ promising jQuery Lightbox-Clones Plugin ...

1. jQuery FancyZoom

Orderlist develop a lighbox clone powered by jQuery. More details can be read here.

The code below initialized the plugin and add the Zoom Effect to any a tag classed with zoom, and will show content relating to the id referenced in the href of the a tag.
view plaincopy to clipboardprint?

   1. $(document).ready(function() { 
   2. $(a.zoom).fancyZoom({scaleImg: true, closeOnClick: true}); 
   3. }); 

$(document).ready(function() {
$(a.zoom).fancyZoom({scaleImg: true, closeOnClick: true});
});

The sample html code.
view plaincopy to clipboardprint?

   1. <a class="zoom" href="insicdesigns.com"><img src="path/to/image/sample.gif"></a> 

<a class="zoom" href="insicdesigns.com"><img src="path/to/image/sample.gif"></a>

DEMO

DOWNLOAD

2. FaceBox

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. Visit faceBox site for more details.

Load the dependency files. Make sure the jQuery is loaded first before the facebox plugin.
view plaincopy to clipboardprint?

   1. <script src="jquery.js" type="text/javascript"></script> 
   2. <link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/> 
   3. <script src="/facebox/facebox.js" type="text/javascript"></script> 

<script src="jquery.js" type="text/javascript"></script>
<link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/facebox/facebox.js" type="text/javascript"></script>

Initialized the code during onload.
view plaincopy to clipboardprint?

   1. jQuery(document).ready(function($) { 
   2.   $(a[rel*=facebox]).facebox() 
   3. }) 

jQuery(document).ready(function($) {
  $(a[rel*=facebox]).facebox()
})

The sample html code.
view plaincopy to clipboardprint?

   1. //for images 
   2. <a href="stairs.jpg" rel="facebox">text</a> 
   3.  
   4. //for DIV 
   5. <a href="#info" rel="facebox">text</a> 
   6.  
   7. //for Ajaxes 
   8. <a href="remote.html" rel="facebox">text</a> 

//for images
<a href="stairs.jpg" rel="facebox">text</a>

//for DIV
<a href="#info" rel="facebox">text</a>

//for Ajaxes
<a href="remote.html" rel="facebox">text</a>

3. FancyBox

Is one of my favorite among Lightbox clones. Aside from easy integration to your html code it has a nice effect and smooth animation.

The following are list of FancyBox features:

    * Automatically scales large images to fit in window
    * Adds a nice drop shadow under the zoomed item
    * Groups related items and adds navigation through them (uses preloading)
    * Can display images, inline and iframed content
    * Customizable through settings and CSS

For more details about FB. Visit this site here.

Sample Code:
view plaincopy to clipboardprint?

   1. $(document).ready(function() { 
   2. $("p#test1 a").fancybox(); 
   3. $("p#test2 a").fancybox({ hideOnContentClick: true }); 
   4. $("p#test3 a").fancybox({ 
   5.               zoomSpeedIn: 0, 
   6.               zoomSpeedOut: 0, 
   7.               overlayShow: true 
   8. }); 
   9. }); 

$(document).ready(function() {
$("p#test1 a").fancybox();
$("p#test2 a").fancybox({ hideOnContentClick: true });
$("p#test3 a").fancybox({
              zoomSpeedIn: 0,
              zoomSpeedOut: 0,
              overlayShow: true
});
});

DEMO

DOWNLOAD

4. Pirobox

Another jQuery Lighbox clone plugin I found.

How to use:

Download and include dependencies.
view plaincopy to clipboardprint?

   1. <link href="css_pirobox/pirobox.css" media="screen" rel="stylesheet" type="text/css" /> 
   2. <script type="text/javascript" src="js/jquery1.2.6.js"></script> 
   3. <script type="text/javascript" src="js/pirobox_packed.js"></script> 

<link href="css_pirobox/pirobox.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery1.2.6.js"></script>
<script type="text/javascript" src="js/pirobox_packed.js"></script>

Initialized the plugin function:
view plaincopy to clipboardprint?

   1. <script type="text/javascript"> 
   2.     $(document).ready(function(){ 
   3.      $(.thumbs).piroBox({ 
   4. <!-- settings.options --> 
   5.        border: 10,  
   6.        borderColor: #fff, 
   7.        mySpeed: 700,  
   8.        bg_alpha: 0.5, 
   9.        cap_op_start : 0.5, 
  10.        cap_op_end: 0.8, 
  11.        pathLoader: #000 url(css/ajax-loader.gif) center center no-repeat;,  
  12.        gallery : .gallery li a,  
  13.        gallery_li: .gallery li,  
  14.        single : .single a, 
  15.        next_class: .next_in ,  
  16.        previous_class: .previous_in   
  17.     });  
  18. }); 
  19. </script> 

<script type="text/javascript">
    $(document).ready(function(){
     $(.thumbs).piroBox({
<!-- settings.options -->
       border: 10,
       borderColor: #fff,
       mySpeed: 700,
       bg_alpha: 0.5,
       cap_op_start : 0.5,
       cap_op_end: 0.8,
       pathLoader: #000 url(css/ajax-loader.gif) center center no-repeat;,
       gallery : .gallery li a,
       gallery_li: .gallery li,
       single : .single a,
       next_class: .next_in ,
       previous_class: .previous_in
    });
});
</script>

DEMO

DOWNLOAD

5. ThickBox

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

Features:

    * ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it’s 58k.
    * The ThickBox JavaScript code and CSS file only add an additional 15k (only 10k by using the thickbox-compressed.js) on top of the jQuery code. The CSS file could additionally be compressed if need be.
    * ThickBox will resize images that are bigger than the browser window.
    * ThickBox offers versatility (images, iframed content, inline content, and AJAX content).
    * ThickBox will hide form elements in Windows IE 6.
    * ThickBox will remain centered in the window even when the user scrolls the page or changes the size of the browser window. Clicking an image, the overlay, or close link will remove ThickBox.
    * Due to the ThickBox creator’s view that transitions should be tailored by individual authors, ThickBox windows do not implement fancy transitions. Feel free to add them as you see fit. Is this a feature? Well, some might say it is.
    * ThickBox can be invoked from a link element, input element (typically a button), and the area element (image maps).

DEMO

DOWNLOAD

6. prettyPhoto

prettyPhoto a jQuery lightbox clone develop by Stéphane Caron.

Quick and easy to use plugin. Just download and include file dependency.
view plaincopy to clipboardprint?

   1. <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> 
   2. <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" /> 
   3. <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> 

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

Initialize the the prettyPhoto function.
view plaincopy to clipboardprint?

   1. <script type="text/javascript" charset="utf-8"> 
   2. $(document).ready(function(){ 
   3. $("a[rel^=prettyPhoto]").prettyPhoto(); 
   4. }); 
   5. </script> 

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^=prettyPhoto]").prettyPhoto();
});
</script>

Add rel=”prettyPhoto” to any picture you want to activate the prettyPhoto feature.
view plaincopy to clipboardprint?

   1. <a href="images/fullscreen/1.jpg" rel="prettyPhoto" title="Description"> 
   2. <img src="/images1.jpg" alt="Picture 1 title" /> 
   3. </a> 

<a href="images/fullscreen/1.jpg" rel="prettyPhoto" title="Description">
<img src="/images1.jpg" alt="Picture 1 title" />
</a>

Visit the site for more details and example.

DEMO

DOWNLOAD

7. NyroModal

Features:

    * Ajax Call
    * Ajax Call with targeting content
    * Ajax call can change the modal size
    * Single Image
    * Images Gallery with arrow navigating
    * Form
    * Form with targeting content
    * Form with file upload
    * Form with file upload with targeting content
    * Dom Element
    * Manual Call
    * Iframe
    * Error handling
    * Modal will never goes outside the view port
    * Esc key to close the window
    * Customizable animation
    * Customizable look
    * W3C valid HTML (Transitionnal)

DEMO

DOWNLOAD

8. Interface Imagebox

Interface Imagebox is an Interface plugin for jQuery.

How to use:

Initialize the Imagebox function.
view plaincopy to clipboardprint?

   1. $(document).ready( 
   2.     function() 
   3.     { 
   4.         $.ImageBox.init( 
   5.             { 
   6.                 loaderSRC: images/imagebox/loading.gif, 
   7.                 closeHTML: <img src="images/imagebox/close.jpg"> 
   8.             } 
   9.         ); 
  10.     } 
  11. ); 

$(document).ready(
 function()
 {
  $.ImageBox.init(
   {
    loaderSRC: images/imagebox/loading.gif,
    closeHTML:
   }
  );
 }
);

Sample HTML Code.
view plaincopy to clipboardprint?

   1. <a href="images/imagebox/large-image.jpg" title="Sample" rel="imagebox-bw"><img src="images/imagebox/thumnails.jpg" /></a> 

<a href="images/imagebox/large-image.jpg" title="Sample" rel="imagebox-bw"><img src="images/imagebox/thumnails.jpg" /></a>

More details for this plugin visit the site here.

DEMO

DOWNLOAD

9. jQuery lightBox plugin

jQuery lightBox plugin is simple, elegant, unobtrusive, no need extra markup and is used to overlay images on the current page through the power and flexibility of jQuery´s selector.

lightBox is a plugin for jQuery. It was inspired in Lightbox JS by Lokesh Dhakar.

How to use:

Download and Include all the JavaScript and CSS dependencies.
view plaincopy to clipboardprint?

   1. //the JS 
   2. <script type="text/javascript" src="js/jquery.js"></script> 
   3. <script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script> 
   4.  
   5. //the CSS 
   6. <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" /> 

//the JS
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>

//the CSS
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

Then select the links where you want to use the lightBox plugin. See sample code below.
view plaincopy to clipboardprint?

   1. <script type="text/javascript"> 
   2. $(function() { 
   3.     // Use this example, or... 
   4.     $(a[@rel*=lightbox]).lightBox(); // Select all links that contains lightbox in the attribute rel 
   5.     // This, or... 
   6.     $(#gallery a).lightBox(); // Select all links in object with gallery ID 
   7.     // This, or... 
   8.     $(a.lightbox).lightBox(); // Select all links with lightbox class 
   9.     // This, or... 
  10.     $(a).lightBox(); // Select all links in the page 
  11.     // ... The possibility are many. Use your creative or choose one in the examples above 
  12. }); 
  13. </script> 

<script type="text/javascript">
$(function() {
 // Use this example, or...
 $(a[@rel*=lightbox]).lightBox(); // Select all links that contains lightbox in the attribute rel
 // This, or...
 $(#gallery a).lightBox(); // Select all links in object with gallery ID
 // This, or...
 $(a.lightbox).lightBox(); // Select all links with lightbox class
 // This, or...
 $(a).lightBox(); // Select all links in the page
 // ... The possibility are many. Use your creative or choose one in the examples above
});
</script>

For more details and information about this plugin visit the site here.

DEMO

DOWNLOAD

10. Greybox Redux

A lightweight plugin. Only 1.2kb using the jQuery library. Completely unobtrusive - no need to embed Javascript into your site.

Initialized the plugin.
view plaincopy to clipboardprint?

   1. <script type="text/javascript"> 
   2. var GB_ANIMATION = true; 
   3. $(document).ready(function(){ 
   4. $("a.greybox").click(function(){ 
   5. var t = this.title || this.innerHTML || this.href; 
   6. GB_show(t,this.href,470,600); 
   7. return false; 
   8. }); 
   9. }); 
  10. </script> 

<script type="text/javascript">
var GB_ANIMATION = true;
$(document).ready(function(){
$("a.greybox").click(function(){
var t = this.title || this.innerHTML || this.href;
GB_show(t,this.href,470,600);
return false;
});
});
</script>

Sample HTML code.
view plaincopy to clipboardprint?

   1. <h3>See it in action:</h3> 
   2.   <ul> 
   3.   <li><a href="http://google.com/" title="Google" class="greybox">Launch Google</a></li> 
   4.  <li><a href="http://yahoo.com/" title="Yahoo" class="greybox">Visit Yahoo</a></li> 
   5.   <li><a href="http://msn.com/" class="greybox">Microsoft would like a visit.</a></li> 
   6.   <li><a href="http://jquery.com/" class="greybox">jQuery Rocks!</a></li> 
   7.   </ul> 

<h3>See it in action:</h3>
  <ul>
  <li><a href="http://google.com/" title="Google" class="greybox">Launch Google</a></li>
 <li><a href="http://yahoo.com/" title="Yahoo" class="greybox">Visit Yahoo</a></li>
  <li><a href="http://msn.com/" class="greybox">Microsoft would like a visit.</a></li>
  <li><a href="http://jquery.com/" class="greybox">jQuery Rocks!</a></li>
  </ul>

Thats all I can find for now. If you know something you can add here. Please let me know, feel free to drop me a comment.