Pretty Photo / Gallery photos

Pretty Photo

This demo is going to describe the pretty photo/gallery photos.
Pretty Photo is a powerful jQuery Lightbox Plugin. Not only does it support images, but it also supports videos, flash, YouTube, iframes and ajax contents. It’s a full-blown media lightbox. It is very easy to set up, and very flexible if you want to customize it a bit. ”

“First include the jQuery library, javascript link and the CSS a 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 an id called. and we defined a class called. 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 supports in every major browser, even IE6 also.”