Jquery Lighbox Plugin

source code for download JQuery lightbox plugin                                                                             http://leandrovieira.com/projects/jquery/lightbox/

 

Example

Click in the image and see the jQuery lightBox plugin in action.

• 
• 
• 
• 
• 

Source used in this example.

$(function() {
 $('#gallery a').lightBox({fixedNavigation:true});
});

 

 

How to use

Parte 1 - Setup

jQuery lightBox plugin uses the jQuery JavaScript library, only. So, include just these two javascript files in your header.

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

Include the CSS file responsible to style the jQuery lightBox plugin.

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

Part 2 - Activate

You don´t need to modify your HTML markup to use jQuery lightBox plugin. Just use the power and flexibility of jQuery´s selector and create a set of related images.
The only necessity is to have a HTML markup likes it:

<a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>

After it, select the links and call the jQuery lightBox plugin. See some examples:

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

Part 3 - Have fun!

I´ll apreciate your feedback. Contact-me.