Here’s my jQuery lightbox clone, I did it because those available are either not close enough to the real lightbox (lacking animations, not supporting galleries, etc ,etc) or were just not suiting my need.

If you have any comment or ways to improve it, just leave me a comment!

Bellow you can see a demo of a gallery and single image.

How to use

* Nothing is easier to use. First include the jQuery library, prettyPhoto javascript and the prettyPhoto CSS in the head of the page(s) where you want to use prettyPhoto.
jQuery can be download here

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

      <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
      <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

* NOTE: At the top of the CSS file, you can edit the images path if you want to customize the look. Everything is commented to make your life easier
* If you plan on using one of the dark themes, include the following lines of code in the head of your page at the same spot you have put prettyPhoto. This will make the transparent PNGs work in IE6.

<!--[if IE 6]>
      	<script src="js/DD_belatedPNG_0.0.7a-min.js"></script>
      	<script>
      		DD_belatedPNG.fix('.pp_left,.pp_right,a.pp_close,a.pp_arrow_next,a.pp_arrow_previous,.pp_content,.pp_middle');
      	</script>
      < ![endif]-->

* Add rel=”prettyPhoto” to any picture you want to activate the prettyPhoto feature

<a href="images/fullscreen/1.jpg" rel="prettyPhoto" title="Description"><img src="/images1.jpg" alt="Picture 1 title" /></a>

* NOTE: The link need to point to the fullscreen image
* Then initialize prettyPhoto.

<script type="text/javascript" charset="utf-8">
      	$(document).ready(function(){
      		$("a[rel^='prettyPhoto']").prettyPhoto();
      	});
      </script>

* To customize the settings, you need to pass the values to prettyPhoto, like so:

<script type="text/javascript" charset="utf-8">
      	$(document).ready(function(){
      		$("a[rel^='prettyPhoto']").prettyPhoto({
      			animationSpeed: 'normal', /* fast/slow/normal */
      			padding: 40, /* padding for each side of the picture */
      			opacity: 0.35, /* Value betwee 0 and 1 */
      			showTitle: true, /* true/false */
      			allowresize: true, /* true/false */
      			counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
      			theme: 'light_rounded' /* light_rounded / dark_rounded / light_square / dark_square */
      		});
      	});
      </script>

* To have a title displayed on your picture, you need to modify the “alt” attribute of the image to the desired title. To have a description for your pictures, you need to modify the “title” of the link to the desired description.

<a href="images/fullscreen/1.jpg" rel="prettyPhoto" title="Description"><img src="/images1.jpg" alt="Picture 1 title" /></a>

* If you want the images to be a part of a gallery, just add the gallery name in braket, like so: rel=”prettyPhoto”

<a href="images/fullscreen/1.jpg" rel="prettyPhoto" title="Description"><img src="/images1.jpg" alt="Picture 1 title" /></a>

Demo: http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/

Download: http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/prettyPhoto_uncompressed_2.2.6.zip

Source: http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/

Related Listings:

1. NotesForLightBox using Jquery Plugin NotesForLightBox is a simple, unobtrusive script used to overlay images...
2. Photo Effects using jQuery Plugin This is a class inspired by http://www.netzgesta.de/cvi/ and their great...

Do you like this post?

Email: