jQuery Lightbox

This modification extends version 0.5 of Leandro Vieira Pinho's jQuery Lightbox Plugin.

By default the lightbox plugin by Leandros combines all images to one set so you can navigate trough all images. This modified version alows you to configure wether the navigation will be shown or not.

Click on the sample images below and move your mouse over the image to see how the lightbox plugin works.

standard
navigation

without
navigation

Set up

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.5-mod.js"></script>

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

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

Activate

You don´t need to modify your HTML markup to use the modification of jQuery lightBox plugin. Just use the power and flexibility of jQuery´s selector and create one ore more sets of related images.

The only necessity is to have a HTML markup like this:

<!-- example 1: -->
<a rel="lightbox" href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>
<!-- example 2: -->
<div id="gallery">
	<a href="image1.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>
	<a href="image2.jpg"><img src="thumb_image1.jpg" width="72" height="72" alt="" /></a>
</div>

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

<script type="text/javascript">
$(function() {
	// ... example 1:
	$('a[rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel
	// ... example 2:
	$('#gallery a').lightBox(); // Select all links in object with gallery ID
	// ... The possibility are many. Use your creative or choose one in the examples above
});
</script>

Example 1:

<script type="text/javascript">
$(function() {
	$(document).ready(function()  {
		$('.picture a[rel*=lightbox]').lightBox({disableNavigation:true}); 
		$('#gallery a[rel*=lightbox]').lightBox();
	});    	
</script>

<!-- one picture only -->
<a href="image1.jpg"><img class="picture" src="thumb1.jpg"></a>
<!-- a set of three iamges -->
<ul class="gallery">
	<li><a href="image2.jpg" rel="lightbox"><img src="thumb2.jpg"></a></li> 	
	<li><a href="image3.jpg" rel="lightbox"><img src="thumb3.jpg"></a></li> 	
	<li><a href="image4.jpg" rel="lightbox"><img src="thumb4.jpg"></a></li> 	
</ul>

Example 2:

<script type="text/javascript">
$(function() {
	$(document).ready(function()  {
		$('#gallery1 a[rel*=lightbox]').lightBox({disableNavigation:true});
		$('#gallery2 a[rel*=lightbox]').lightBox({disableNavigation:false});
	});    	
</script>
	
	
		
	
	

<!-- one set of images -->
<ul class="gallery1">
	<li><a href="image2.jpg" rel="lightbox"><img src="thumb2.jpg"></a></li> 	
	<li><a href="image3.jpg" rel="lightbox"><img src="thumb3.jpg"></a></li> 	
	<li><a href="image4.jpg" rel="lightbox"><img src="thumb4.jpg"></a></li> 	
</ul>
<!-- another set of iamges -->
<ul class="gallery2">
	<li><a href="image2.jpg" rel="lightbox"><img src="thumb2.jpg"></a></li> 	
	<li><a href="image3.jpg" rel="lightbox"><img src="thumb3.jpg"></a></li> 	
	<li><a href="image4.jpg" rel="lightbox"><img src="thumb4.jpg"></a></li> 	
</ul>

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.
• 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.
• 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: 'Picture',
	txtOf: 'de'
   });
});
</script>

Configurations added in this version:

• disableNavigation - Boolean that informs weather the navigation will be shown or not in the interface. False is default.

Download jquery.lightbox-0.5-mod.zip here:

download/jquery.lightbox-0.5-mod.zip
file size: 6.34kb

ZIP-File includes:

• jquery.lightbox-0.5-mod.js
• jquery.lightbox-0.5.css