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>

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>

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/

Download: http://www.no-margin-for-errors.com/projects/prettyPhoto/prettyPhoto_uncompressed_2.2.5.zip

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

Related Listings:

1. prettyPhoto using jQuery Plugin prettyPhoto is a jQuery based lightbox clone. Not only does...
2. Pretty Photo Script with jQuery Plugin Here’s my jQuery lightbox clone, I did it because those...
3. Smooth Gallery Ajax Script Using mootools v1.0, this javascript gallery and slideshow system allows...
4. Frog Js Lightbox Script FrogJS ia a demo with a gallery effect, perfect for...
5. Smoothbox, Thickbox for mootools Smoothbox is the Mootools conversion of Thickbox, a script running...

Do you like this post?

Email: