jQuery lightBox plugin

By Leandro Vieira Pinho

Overview

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.

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

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.

Extend

Settings

jQuery lightBox plugin has some configurations that you can define when call it. With that configurations you can customize your jQuery lightBox 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 lightBox. 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]').lightBox({
	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>

Changelog

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 lightBox 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 lightBox plugin in page that uses other JavaScript libraries.
  • Applyed: Language support.
  • Applyed: Support to resize event to calculate new dimensions to overlay and lightbox 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.

Donations

You can support this project and help me to get more time on it. Consider a donation any value will be appreciated.

Best regards, Leandro Vieira Pinho

RSS

Be notified of new jQuery lightBox plugin releases with the Changelog in RSS format.

Geovisitors

Users of jQuery lightBox plugin around the world

Geo Visitors Map