PrettyPhoto

jQuery PrettyPhoto Demo from Aslamise.blogspot.com. read fulll article here to know how to add prettyphoto to your blog or website

by Brett Miley

HTML

<script src="http://aslamise.googlecode.com/files/prettyPhoto.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/prettyphoto/3.1.5/css/prettyPhoto.css">
<!--
Dont forget to include external scripts and stylesheets i have used for this demo,if you are trying to add to your website.

http://code.jquery.com/jquery-1.8.3.js
http://aslamise.googlecode.com/files/prettyPhoto.js
http://cdn.jsdelivr.net/prettyphoto/3.1.5/css/prettyPhoto.css

-->

<a href="http://4.bp.blogspot.com/-Uz67VhpSrN0/T5_sPAwTinI/AAAAAAAAAyo/jA0fkFvsDT8/s1600/Beautiful-Rose-Flowers-Pictures-And-Wallpapers74.j.jpg">
    <div class="content">this is the content</div>
</a>

JavaScript

jQuery("body").on("click", "a[rel^='prettyPhoto']", function() {
    jQuery.prettyPhoto.open(jQuery(this).attr("href"),"","");
    return false;
});

jQuery(document).ready(function(){
    $('a > div').parent().attr('rel', 'prettyPhoto');
        jQuery("a[rel^='prettyPhoto'], a[rel^='lightbox']").prettyPhoto({
    });
jQuery(".toggle_content").hide();

$("a[rel^='prettyPhoto']").trigger('click');
    
});