PrettyPhoto - BIZAMAJIG USAGE

Basic usage example for nice jquery libraries

by Sumesh KP

HTML

<script src="http://cdn.jsdelivr.net/jquery.owlcarousel/1.31/grabbing.png"></script>
<script src="http://cdn.jsdelivr.net/jquery.owlcarousel/1.31/AjaxLoader.gif"></script>
<script src="http://cdn.jsdelivr.net/prettyphoto/3.1.5/js/jquery.prettyPhoto.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/prettyphoto/3.1.5/css/prettyPhoto.css">
<div data-type="lightbox" class="bizamajig-gallery" data-title="Mick Donelan">
    <div class="bizamajig-gallery-carousel-lightbox">

        <!-- GROUP collection_50751 -->

        <div style="float: left;">
            <a title="" rel="prettyPhoto[collection_50751]" href="https://goo.gl/V21WXm"><img src="https://goo.gl/V21WXm" style="margin: 0px 10px 10px 0px; width: 75px;" /></a>
            
	        <a title="" rel="prettyPhoto[collection_50751]" href="http://www.galleryatstudiob.com/content/34931/md-Earth-View-I-orig.png"><img src="http://www.galleryatstudiob.com/content/34931/md-Earth-View-I-orig.png" style="margin: 0px 10px 10px 0px; width: 75px;" /></a>
        </div>
            
        <!-- GROUP collection_50754 -->

        <div style="float: left;">
            <a title="" rel="prettyPhoto[collection_50754]" href="http://www.galleryatstudiob.com/content/34931/md-Lakes-of-Titan-orig.png"><img src="http://www.galleryatstudiob.com/content/34931/md-Lakes-of-Titan-orig.png" style="margin: 0px 10px 10px 0px; width: 75px;" /></a>
	        <a title="" rel="prettyPhoto[collection_50754]" href="http://www.galleryatstudiob.com/content/34931/md-Layers--orig.png"><img src="http://www.galleryatstudiob.com/content/34931/md-Layers--orig.png" style="margin: 0px 10px 10px 0px; width: 75px;" /></a>
    	    <a title="" rel="prettyPhoto[collection_50754]" href="http://www.galleryatstudiob.com/content/34931/md-Ruins-orig.png"><img src="http://www.galleryatstudiob.com/content/34931/md-Ruins-orig.png" style="margin: 0px 10px 10px 0px; width: 75px;" /></a>
            <a title="" rel="prettyPhoto[collection_50754]"...

JavaScript

$(".bizamajig-gallery-carousel-lightbox a[rel^='prettyPhoto']:not(.materialized)").prettyPhoto({
         social_tools: false,
theme: 'facebook', // 'pp_default', /* pp_default / 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.70, /* 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: false, /* 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 on OPEN, and everytime a slide is shown/changed
//    $owl.trigger('autoplay.stop.owl');
},
callback: function() { // Called on CLOSE
//    $owl.trigger('autoplay.play.owl',[5000]);
},
ie6_fallback: false
     }).addClass( 'materialized' );