LiveZilla Live Help
  • May 29

10 jQuery Lightbox Clone Plugins

Lightbox, and all of it’s various clones, can work magic on your jQuery web design. But where do you even start? There is so much out there and, frankly, most of it is crap. Well, don’t fret. Webrulon has done the searching for you. We’ve scoured, scrubbed and rinsed(?) the Internet to find ten of the most promising Lightbox plugins and Lightbox clone plugins available for jQuery. Without further adieu, here they are:

1. jQuery FancyZoom

fancy zoom

Orderlist developed this powerful and versatile jQuery-powered Lightbox clone. More details can be read here.

The code below initializes the plugin:

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

Sample HTML code:

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

2. FaceBox

Facebox is a jQuery-based Lightbox that is in the style of everyone’s favorite social networking site, Facebook. It can display images, divs, or entire remote pages. Visit the site for more details.
Load the dependency files. Make sure the jQuery is loaded first before tackling the following codes:
  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>
Initialize the code during onload.
  1. jQuery(document).ready(function($) {
  2. $(‘a[rel*=facebox]‘).facebox()
  3. })
Sample HTML code:
  1. //for images
  2. <a href=“stairs.jpg” rel=“facebox”>text</a>
  4. //for DIV
  5. <a href=“#info” rel=“facebox”>text</a>
  7. //for Ajaxes
  8. <a href=“remote.html” rel=“facebox”>text</a>

3. FancyBox

This is an absolutely fantastic Lightbox clone. It has a bevy of features, including a host of nice effects, smooth animation and easy integration to you HTML code. Here are some more 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 here.

Sample Code:

  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
});
});

4. Pirobox

Here is a simple and fully-featured Lightbox clone. Just download and use the dependencies.

  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>
Then initialize the plugin function:
  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>

5. ThickBox

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. It shows a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. The widget’s function include:

  • 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).

6. prettyPhoto

prettyPhoto - A jQuery lightbox clone develop by Stéphane Caron. It’s easy and simple to use, which is always a plus. Just download and include file dependency.

  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>
Then initialize the the prettyPhoto function.
  1. <script type=“text/javascript” charset=“utf-8″>
  2. $(document).ready(function(){
  3. $(“a[rel^='prettyPhoto']“).prettyPhoto();
  4. });
  5. </script>
Add rel=”prettyPhoto” to any picture you want to activate the prettyPhoto feature.
  1. <a href=“images/fullscreen/1.jpg” rel=“prettyPhoto” title=“Description”>
  2. <img src=“/images1.jpg” alt=“Picture 1 title” />
  3. </a>

7. NyroModal

NyroModal is another full-featured Lightbox clone that is conveniently easy to use. Here are some of the 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)

8. Interface Imagebox

Interface Imagebox is a cool little app. It’s an interface plugin for jQuery.

Initialize the Imagebox function and then:

  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. );
Here is a sample HTML code:
  1. <a href=“images/imagebox/large-image.jpg” title=“Sample” rel=“imagebox-bw”><img src=“images/imagebox/thumnails.jpg” /></a>
For more information, visit the site here.

9. jQuery lightBox plugin

This jQuery lightBox plugin is elegantly construction. Simply put, it works like a charm. It’s used to overlay images on the current page through the power and flexibility of jQuery´s selector. It was inspired in Lightbox JS by Lokesh Dhakar.

Wanna use it? Download and Include all the JavaScript and CSS dependencies. Then:

  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>
  5. //the CSS
  6. <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. Here is some sample code:
  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>
For more details visit the site here.

10. Greybox Redux

This is an extremely light weight plugin, weighing in at only 1.2 kb. It doesn’t even necessitate enabling of Javascript into your site. Totally unobtrusive.

Here’s how to initialize the plugin:

  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>
And here is the sample HTML code:
  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>
If you know of any more quality plugins, drop them in the comment box!




Related Posts

One Response to “10 jQuery Lightbox Clone Plugins”

  1. Martina says:
    October 31, 2010 at 1:33 pm

    Thanks for the list – I went through them all and found Pirobox to be the best for me

Leave a Reply