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

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

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

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:

$(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>
   

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>
   

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

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

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

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” />
   

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>
    

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>
    

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>