How to add a damn cool Lightbox to blogger (PrettyPhoto Lightbox)

lightbox for blogger


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!
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

4 comments

  1. Hi,
    The photo box is indeed pretty :)
    Only one small problem - Doesn't show the twitter icon how it should.

    ReplyDelete
  2. Wow! Very impressed. I'm going to use this in a few sites. However, it looks like it's possible to change the theme; do you have a dark theme by any chance?

    ReplyDelete

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2013- Image Slider For Blogger
Created & Maintained by Shuvojit Das
Powered by blogger.com
Privacy Policy | Contact Me
Back to top