PrettyPhoto

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

by bizamajig

HTML

<link rel="stylesheet" href="http://cdn.jsdelivr.net/prettyphoto/3.1.5/css/prettyPhoto.css">
<script src="http://www.no-margin-for-errors.com/wp-content/themes/NMFE/js/jquery.prettyPhoto.js"></script>
<!--
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 name="fb-api-auto-post-trigger" id="fb-api-auto-post-trigger" class="btn btn-info btn-xs" value="Share to Facebook" data-rel="prettyPhoto" data-href="http://4.bp.blogspot.com/-Uz67VhpSrN0/T5_sPAwTinI/AAAAAAAAAyo/jA0fkFvsDT8/s1600/Beautiful-Rose-Flowers-Pictures-And-Wallpapers74.j.jpg">Share to Facebook</a>

JavaScript

$("document").on("click", ".prettyPhoto", function() {
    alert( $(this).attr("data-href") );
    $.prettyPhoto.open($(this).attr("data-href"),"","");
    return false;
});
return false;
$( '.btn' ).attr('data-rel', 'prettyPhoto');
$( "[data-rel^='prettyPhoto'], [data-rel^='lightbox']").prettyPhoto({
hook: 'data-rel',
theme: 'facebook', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
animation_speed: 'fast', /* fast/slow/normal */
slideshow: 5000, /* false OR interval time in ms */
autoplay_slideshow: false, /* true/false */
opacity: 0.80, /* Value between 0 and 1 */
show_title: true, /* true/false */
allow_resize: true, /* Resize the photos bigger than viewport. true/false */
default_width: 500,
default_height: 344,
counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
horizontal_padding: 20, /* The padding on each side of the picture */
hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
wmode: 'opaque', /* Set the flash wmode attribute */
autoplay: true, /* Automatically start videos: True/False */
modal: false, /* If set to true, only the close button will close the window */
deeplinking: true, /* Allow prettyPhoto to update the url to enable deeplinking. */
overlay_gallery: true, /* If set to true, a gallery will overlay the fullscreen image on mouse over */
keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */
changepicturecallback: function(){}, /* Called everytime an item is shown/changed */
callback: function(){}, /* Called when prettyPhoto is closed */
ie6_fallback: true
    /* Read full article >> http://aslamise.blogspot.in/2013/02/add-pretty-photo-jquery-plugin-to-your-page-and-automate-assigning-the-rel-prettyphoto-tag-for-each-image-at-once.html */
});
$(".toggle_content").hide();