Header Ads

  • Breaking News

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

    There are so many blogger lightbox alternative but, i came up with top jQuery lightboxes. These custom lightboxes provides basic key benefits with additional features like auto slideshow, responsive to desktop tablets and mobiles, easy to customize etc. If you want to replace your simple blogger image lightbox viewer with a cool custom stylish responsive jQuery lightbox plugin to show off your pictures gallery in a stylish manner then just follow the below given step by step tutorial with images and 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'>
      $(".post-body").each(function(i) {
          $(this).find("img").closest('a').attr("rel", "prettyPhoto[gallery" + (i + 1) + "]");
      });
    </script>
    <script charset='utf-8' type='text/javascript'>
      $(document).ready(function(){
          $(".post-body a[rel^='prettyPhoto']").prettyPhoto({
              animation_speed:'normal',
              slideshow: 5000, 
              theme: 'pp_default',
              autoplay_slideshow: true
          });
      });
    </script>
    
    You've successfully installed the PrettyPhoto Lightbox. Any question or any suggestion to improve this widget is more than welcome.



    No comments

    Post Top Ad

    Post Bottom Ad