Lightbox Photo Gallery for Blogger (PrettyPhoto Lightbox)

Hi there, how you'll doing? I hope you are doing great! Well today I came up with a damn cool Lightbox + Slider for your blogger blog. It is created from a  jQuery lightbox plugin called "PrettyPhoto". Well I won't waste your time to introducing it anymore. Just check out the demo, it will say it all.

PrettyPhoto Lightbox Demo

Installation Guide

If this is what you're looking for, follow the simple steps to install it.

STEP - 1: Go to Your Blogs Home > Template > Edit HTML

STEP - 2: Add jQuery script. (If your template already have a jQuery script installed then skip this step.) 

Place the following code just before the closing head tag </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

STEP - 3: Add PrettyPhoto plugin. 

Place the following code just before the closing head tag </head>

<script src='https://cdnjs.cloudflare.com/ajax/libs/prettyPhoto/3.1.6/js/jquery.prettyPhoto.min.js' type='text/javascript'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prettyPhoto/3.1.6/css/prettyPhoto.min.css' rel='stylesheet' type='text/css'/>

STEP - 4: Initialize the Lightbox (Final step)

Place the following code just before the closing body tag </body>

<script type='text/javascript'>
  $(&quot;.post-body&quot;).each(function(i) {
      $(this).find(&quot;img&quot;).closest(&#39;a&#39;).attr(&quot;rel&quot;, &quot;prettyPhoto[gallery&quot; + (i + 1) + &quot;]&quot;);
  });
</script>
<script charset='utf-8' type='text/javascript'>
  $(document).ready(function(){
      $(&quot;.post-body a[rel^=&#39;prettyPhoto&#39;]&quot;).prettyPhoto({
          animation_speed:&#39;normal&#39;,
          slideshow: 5000, 
          theme: &#39;pp_default&#39;,
          autoplay_slideshow: true
      });
  });
</script>

Congratulation! You've successfully installed the PrettyPhoto Lightbox. Any question or any suggestion to improve this widget is more than welcome. Cheers!