jQuery lightBox plugin

By Leandro Vieira Pinho and Rodolphe Franceschi

About LightBoxClone

Due to the lack of information about the original plugin and compatibility problems with Internet Explorer 6, I decided to fork the code of Leandro Vieira Pinho from the official Jquery Lightbox Plugin.

 

Overview

jQuery LightBoxClone 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.

LightBoxClone is a plugin for jQuery. It was inspired in Lightbox JS by Lokesh Dhakar and Leandro Vieira Pinho's original implementation.

The better way to know what is jQuery LightBoxClone plugin, click the Example tab above and see it in action.

Examples

Example Embed in this website

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

Source used in this example for Javascript part:


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

Minimal Example 1

Please follow the link below to see a minimal example with JQuery 1.3 with an implicit declaration

Source used in this example for Javascript part:


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

Minimal Example 2

Please follow the link below to see a minimal example with JQuery 1.3 with "rel" tag use.

Source used in this example for Javascript part:


$(function() {
    $('a[rel*=lightbox]').lightBoxClone();
});
 

Minimal Example 3

Please follow the link below to see a minimal example with JQuery 1.3 with two galleries

Source used in this example for Javascript part:


$(function() {
    $('a[rel*=lightbox[gallery1]]').lightBoxClone();
    $('a[rel*=lightbox[gallery2]]').lightBoxClone();
});
 

How to use

Parte 1 - Setup

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


<script type="text/javascript" src="js/jquery-1.3.2-min.js"></script>
<script type="text/javascript" src="js/jquery.lightboxclone-0.6.js"></script>
 

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


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

Part 2 - Activate

You don´t need to modify your HTML markup to use jQuery LightBoxClone 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>
 

See some examples for JQuery 1.3

After it, select the links and call the jQuery LightBoxClone plugin. :


<script type="text/javascript">
$(function() {
    // Select all links that contains lightbox in the attribute rel
    $('a[rel*=lightbox]').lightBoxClone(); 
    
    // Select all links in object with gallery ID
    $('#gallery a').lightBoxClone(); 
    
    // Select all links with lightbox class
    $('a.lightbox').lightBoxClone(); 
    
    // Select all links in the page
    $('a').lightBoxClone(); // Select all links in the page
});
</script>
 

See some examples for JQuery 1.2

After it, select the links and call the jQuery LightBoxClone plugin.


<script type="text/javascript">
$(function() {
    // Select all links that contains lightbox in the attribute rel
    $('a[@rel*=lightbox]').lightBoxClone(); 
    
    // Select all links in object with gallery ID
    $('#gallery a').lightBoxClone(); 
    
    // Select all links with lightbox class
    $('a.lightbox').lightBoxClone(); 
    
    // Select all links in the page
    $('a').lightBoxClone(); // Select all links in the page
});
</script>
 

Part 3 - Have fun!

Feel free to leave me a feedback, contact-me. For initial release, contact Leandro Vieira Pinho

Options

Settings

jQuery LightBoxClone plugin is compatible with JQuery 1.3.2 and Lower.

jQuery LightBoxClone plugin has some configurations that you can define when call it. With that configurations you can customize your jQuery LightBoxClone plugin.

The configurations available are:

  • overlayBgColor - Used to define the overlay background color. #000 (black) is default.
  • overlayOpacity - Used to define the overlay opacity. 0.8 is default.
  • imageLoading - The loading gif animator. images/lightbox-ico-loading.gif is default.
  • imageBtnClose - The close image button. images/lightbox-btn-close.gif is default.

Configurations added in 0.3 version:

  • imageBtnPrev - The previous image button. images/lightbox-btn-prev.gif is default.
  • imageBtnNext - The next image button. images/lightbox-btn-next.gif is default.
  • containerBorderSize - The padding CSS information used in the container image box. 10 is default.
  • containerResizeSpeed - The duration of resize effect in the container image box. 400 is default.
  • txtImage - Text "Image" used in the image caption.
  • txtOf - Text "of" used in the image caption.

Configurations added in 0.4 version:

  • imageBlank - The image blank for trick Internet Explorer into showing hover. images/lightbox-blank.gif is default.
  • keyToClose - The key to close the LightBoxClone. Letter c (close) is default.
  • keyToPrev - The key to show the previous image. Letter p (previous) is default.
  • keyToNext - The key to show the next image. Letter n (next) is default.

Example.

<script type="text/javascript">
$(function() {
   $('a[rel*=lightbox]').lightBoxClone({
    overlayBgColor: '#FFF',
    overlayOpacity: 0.6,
    imageLoading: 'http://example.com/images/loading.gif',
    imageBtnClose: 'http://example.com/images/close.gif',
    imageBtnPrev: 'http://example.com/images/prev.gif',
    imageBtnNext: 'http://example.com/images/next.gif',
    containerResizeSpeed: 350,
    txtImage: 'Imagem',
    txtOf: 'de'
   });
});
</script>
 

Download packages

Download the package of javascript files

Visualize uncompressed Javascript
Download Javascript archive in ZIP format
Download minimized Javascript archive in ZIP format

Download this website !

You can download packages of this website in different formats:

Download ZIP now
Download TGZ now
Download BZ2 now

Screenshots of the plugin

Changelog from Rodolphe Franceschi

Version 0.6, November 12, 2009
  • CSS Fixes reported by Marie Amélie Poullain
    • ScrollBar Bug in Internet Explorer 6 when images are lower than 200px
  • Javascript Fixes
    • Under Internet Explorer 6, the next button is not aligned on parent div width (bug in the navigator motor)

Changelog from Leandro Vieira Pinho

Version 0.5,
  • Multiple fixes
Version 0.4, November 17, 2007
  • Applyed: Support to keyboard navigation with configuration.
  • Applyed: Added some configurations possibility. Look:
    • imageBlank
    • keyToClose
    • keyToPrev
    • keyToNext
  • Fixed: A bug to avoid click conflict when call the jQuery LightBoxClone plugin more than once.
  • Changed: The way to hide some elements to avoid conflict with overlay in IE. Now the visibility is used instead display.
Version 0.3.1, October 30, 2007
  • Fixed: A bug when working with only one image in Internet Explorer.
Version 0.3, October 12, 2007
  • Changed: The internal core code.
  • Applyed: A Custom Alias suport; now you can use jQuery LightBoxClone plugin in page that uses other JavaScript libraries.
  • Applyed: Language support.
  • Applyed: Support to resize event to calculate new dimensions to overlay and LightBoxClone div.
  • Applyed: Added new configurations possibility. Look:
    • imageBtnPrev
    • imageBtnNext
    • containerBorderSize
    • containerResizeSpeed
    • txtImage
    • txtOf
  • Fixed: The loading gif animator now appear in all changes of images.
  • Fixed: The navigation doesn´t appear when title attribute was empty. It was fixed.
Version 0.2, October 4, 2007
  • Changed: The way to verify what image was clicked in the images set.
  • Changed: The animation when change the images.
  • Fixed: The buttons Prev and Next are showed just in mouseover event (IE).
  • Fixed: Avoid errors when title attribute is empty.
Version 0.1, September 21, 2007

Initial release.

Open Source tools

Here is a list of Open Source Softwares used to build this site and to develop this plugin: