Pretty Photo / Gallery photos

Pretty Photo

This demo is going to describe about the pretty photo / gallery photos.
Pretty Photo is a powerful jQuery Light box Plugin. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax contents. It’s a full blown media light box. It is very easy to setup, and very flexible if you want to customize it a bit. ”

“First include the jQuery library, java script link and the CSS link which refer to Pretty Photo in the head of the page(s) where you want to use pretty Photo.”

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/prettyphoto/3.1.6/js/jquery.prettyPhoto.js'></script>
<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/prettyphoto/3.1.6/css/prettyPhoto.css'>

In the body section we are using a id called main. and we defined a class called .gallery. and we defined the code in between the Unordered HTML List.
An unordered list starts with the tag. Each list item starts with the tag.

“Then, initialize pretty Photo. Put the following code before the closing tag of your body ()

<div id="main">
<ul class="gallery clearfix">
<li><a href="#" rel="prettyPhoto[gallery2]" title="some caption here">
<img src="#" width="160" height="160" alt="some caption here" /></a>
</li>
<li><a href="#" rel="prettyPhoto[gallery2]"><img src="#" width="160" height="160" alt="" /></a></li>
<li><a href="#" rel="prettyPhoto[gallery3]"><img src="#" width="160" height="160" alt="" /></a></li>
<li><a href="#" rel="prettyPhoto[gallery3]"><img src="#" width="160" height="160" alt="" /></a></li>					
</ul>			
</div>

Just add rel=”pretty Photo” to the link you want pretty Photo to be enabled on.

$(document).ready(function(){
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({			theme:'minimal'
});		
});

“ The script is compatible and support in every major browser, even IE6 also.”

Leave a Reply

Your email address will not be published. Required fields are marked *