prettyGallery documentation

Below you can find the complete documentation for prettyGallery.

If you are having problems with prettyGallery and need support, please come and ask your questions in our forums.

If you got here by mistake, don’t leave! The main prettyGallery page can be found here.

If you we’re not looking for prettyGallery well too bad, but you can still read my blog here.


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 downloaded 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">


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

<script type="text/javascript" charset="utf-8">
			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 */

Example markup

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>