prettyGallery another way to display galleries

by: Stéphane Caron

Once again, I wasn't satisifed with most of the gallery scripts out there. So I decided to build my own.

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

Bellow you can see a demo of galleries.

Demo

Browser support

This plugin has been tested and is known to work in the following browsers

• Firefox 2.0+
• Safari 3.1.1+
• Opera 9.5+
• Internet Explorer 6.0+

Copyright

This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones. Donations are always welcome.

Download

Uncompressed version (Script: 6kb / CSS: 1.5kb)

Compressed version (Script: 3kb / CSS: 1.5kb)

Version history

• 1.1: Localized the labels.
• 1.0: Initial release of prettyGallery.

How to use

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

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

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

Then initialize prettyGallery on the lists you want to have galleries.

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$("ul.gallery").prettyGallery();
	});
</script>
					

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

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$("ul.gallery").prettyGallery({
			itemsPerPage : 2,
			animationSpeed : 'normal', /* fast/normal/slow */
			navigation : 'top',  /* top/bottom/both */
			of_label: ' of ', /* The content in the page "1 of 2" */
			previous_title_label: 'Previous page', /* The title of the previous link */
			next_title_label: 'Next page', /* The title of the next link */
			previous_label: 'Previous', /* The content of the previous link */
			next_label: 'Next' /* The content of the next link */
		});
	});
</script>
					

Here's an example of what your gallery markup should look like

<ul class="gallery">
	<li><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="T 1" /></li>
	<li><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="T 2" /></li>
	<li><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="T 3" /></li>
	<li><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="T 4" /></li>
	<li><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="T 5" /></li>
</ul>
					

Donations

I've spent a lot of time to develop/support this script. You liked it? Feel free to donate!

Want to know where I got these pictures?

Jingles the pirate from flickr was kind enough to let me use his pictures.

© Stéphane Caron 2008