How to use Lightbox2 Image Gallery (Slideshow) in your Blog

Friday 2 August 2013

Lightbox2 plugin is used to create Image Gallery or Slide Show in your blog and it is small javascript library used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers. Lightbox plugin is mainly used for photo blog. This plugin provide border effect while you hover over the image. When you click that image after using this plugin that image will pop out with its original size. You can use this effect for individual image and also for image set.

You can see demo here.

How to add Lighbox2 Plugin in your Blogger?

Step 1: Go to Blogger.com login with your username and password.

Step 2: From the blogger dashboard go to Template and click Edit HTML:


Step 3: Then click any where in your code area to search ( Ctrl+F ) and find </head> :


Step 4: Add following code just  above it:
 <link href='https://googledrive.com/host/0B7Fp65uVAHtmdlJiemJBeHVUM3c' media='screen' rel='stylesheet' type='text/css'/>  
 <style>  
 /* line 318, ../sass/screen.sass */  
 .imageRow {  
  *zoom: 1;  
  margin: 20px 0;  
 }  
 /* line 38, ../../../../.rvm/gems/ruby-1.9.2-p290/gems/compass-0.12.1/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */  
 .imageRow:after {  
  content: &quot;&quot;;  
  display: table;  
  clear: both;  
 }  
 /* line 321, ../sass/screen.sass */  
 .imageRow .single {  
  float: left;  
 }  
 /* line 323, ../sass/screen.sass */  
 .imageRow .single a {  
  float: left;  
  display: block;  
  background: rgba(255, 255, 255, 0.1);  
  padding: 3px;  
  line-height: 0em;  
  -webkit-border-radius: 4px;  
  -moz-border-radius: 4px;  
  -ms-border-radius: 4px;  
  -o-border-radius: 4px;  
  border-radius: 4px;  
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);  
  -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);  
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);  
  margin-right: 40px;  
  -webkit-transition: all 0.2s ease-out;  
  -moz-transition: all 0.2s ease-out;  
  -ms-transition: all 0.2s ease-out;  
  -o-transition: all 0.2s ease-out;  
  transition: all 0.2s ease-out;  
 }  
 /* line 333, ../sass/screen.sass */  
 .imageRow .single a img {  
  -webkit-border-radius: 4px;  
  -moz-border-radius: 4px;  
  -ms-border-radius: 4px;  
  -o-border-radius: 4px;  
  border-radius: 4px;  
  border: 1px solid rgba(0, 0, 0, 0.3);  
 }  
 /* line 336, ../sass/screen.sass */  
 .imageRow .single a:hover {  
  background-color: #8ad459;  
 }  
 /* line 338, ../sass/screen.sass */  
 .imageRow .set {  
  float: left;  
  background: rgba(255, 255, 255, 0.1);  
  -webkit-border-radius: 4px;  
  -moz-border-radius: 4px;  
  -ms-border-radius: 4px;  
  -o-border-radius: 4px;  
  border-radius: 4px;  
  -webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.5);  
  -moz-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.5);  
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.5);  
  -webkit-transition: all 0.2s ease-out;  
  -moz-transition: all 0.2s ease-out;  
  -ms-transition: all 0.2s ease-out;  
  -o-transition: all 0.2s ease-out;  
  transition: all 0.2s ease-out;  
 }  
 /* line 344, ../sass/screen.sass */  
 .imageRow .set:hover {  
  background: rgba(255, 255, 255, 0.2);  
 }  
 /* line 347, ../sass/screen.sass */  
 .imageRow .set .single a {  
  background: none;  
  -webkit-border-radius: 0;  
  -moz-border-radius: 0;  
  -ms-border-radius: 0;  
  -o-border-radius: 0;  
  border-radius: 0;  
  -webkit-box-shadow: none;  
  -moz-box-shadow: none;  
  box-shadow: none;  
  margin-right: 0;  
 }  
 /* line 352, ../sass/screen.sass */  
 .imageRow .set .single a:hover {  
  background-color: #8ad459;  
  -webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);  
  -moz-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);  
  box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);  
 }  
 /* line 356, ../sass/screen.sass */  
 .imageRow .set .single.first a {  
  -moz-border-radius-topleft: 4px;  
  -webkit-border-top-left-radius: 4px;  
  -ms-border-top-left-radius: 4px;  
  -o-border-top-left-radius: 4px;  
  border-top-left-radius: 4px;  
  -moz-border-radius-bottomleft: 4px;  
  -webkit-border-bottom-left-radius: 4px;  
  -ms-border-bottom-left-radius: 4px;  
  -o-border-bottom-left-radius: 4px;  
  border-bottom-left-radius: 4px;  
 }  
 /* line 359, ../sass/screen.sass */  
 .imageRow .set .single.last a {  
  -moz-border-radius-topright: 4px;  
  -webkit-border-top-right-radius: 4px;  
  -ms-border-top-right-radius: 4px;  
  -o-border-top-right-radius: 4px;  
  border-top-right-radius: 4px;  
  -moz-border-radius-bottomright: 4px;  
  -webkit-border-bottom-right-radius: 4px;  
  -ms-border-bottom-right-radius: 4px;  
  -o-border-bottom-right-radius: 4px;  
  border-bottom-right-radius: 4px;  
 }  
 </style>  
 <script src='https://googledrive.com/host/0B7Fp65uVAHtmY1lhQVR2eUpiVkE'/>  
 <script src='https://googledrive.com/host/0B7Fp65uVAHtmTC1laXd6emVPNWs'/>  
 <script src='https://googledrive.com/host/0B7Fp65uVAHtmYW9HZU90OERiODQ'/>  
 <script src='https://googledrive.com/host/0B7Fp65uVAHtmd3c3X1lHZHljQ0k'/>  
 <script>  
  jQuery(document).ready(function($) {  
    $(&#39;a&#39;).smoothScroll({  
     speed: 1000,  
     easing: &#39;easeInOutCubic&#39;  
    });  
    $(&#39;.showOlderChanges&#39;).on(&#39;click&#39;, function(e){  
     $(&#39;.changelog .old&#39;).slideDown(&#39;slow&#39;);  
     $(this).fadeOut();  
     e.preventDefault();  
    })  
  });  
 </script>

Step 5: Save your template.

How to use Lightbox2 Image Effect in your Blog?

1. For single image:

- Add the below code in your post at HTML tab.
 <div class="imageRow">  
 <div class="single">  
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNbNVIkiiFyr8npPCWm8lJuf4sleiFskE5Gts7l99CpX4yMcYvmaqhSbIOcXcUVwDMsMlD5wLR7d8Iu-b8To7mm2oPyZkceB42sWeIJI8aBTP3vOj01-NDEwCFVdFpNVzy-VSIZFf0goCw/s1600/image-1.jpg" rel="lightbox"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu-CGIPOiKLK-ScAeEmDobzcSCGoV0JvELS5L0TeBfyLYrlfpGlSQxUBVCRsGTQx6NVbI6ETDtptnB2EYWgeNPsyRF6lATnbfYTQoARx3KJCahJTHnbiKQdCXhEVC2Wc2NP1Hs7ZvIzw3I/s1600/thumb-1.jpg" /></a>  
 </div>  
 <div class="single">  
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0J_I8ZJJjeji5MBfcmEUzRZ_9dLicbljRf-VsxS4t2IRKDSC5MW2KyQZjFnwGa9yXWADrL2FN6CzNjLZ2hREJxl5TkH_wehfJuA60MqraUDiozY3TJ3tvRQm4Cl1H0ICzQbyNzEwGioat/s1600/image-2.jpg" rel="lightbox" title="Optional caption."><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEjKmKAHbeVk2y7v8bZaWZHjLu_tsy1oQ1hbY9L_upQTQ4mjpRAvrrPZzK_Z5ketnIJ1Ov4fP72B-WLxJ6mWXhDmcDgB1JhAx0hSvqdettbTKWGmfaYVOMwLrITV-oEyfbDv4VmV00glY7/s1600/thumb-2.jpg" /></a>  
 </div>  
 </div>
-Replace the Green Link with the url of the to be display at your Blog.
-Replace the Red link with the url of the image to be shown after the Image is clicked.

2. For image set:

- Add the below code in your post at HTML tab.
 <div class="imageRow">  
 <div class="set">  
 <div class="single first">  
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz_nCJfMm8_kEYLMIeby-aaV2IK_37xjXqYqSNLWD8OfETHswQyRcqZhpNfcAtvZ1lQvP5KHGyKDwGOJWEmU902ZVnTt3H2zks9MnSef1mXenznoo9GQ20f6gD8vs3r50WCg0pq-76kXhz/s1600/image-3.jpg" rel="lightbox[plants]" title="Click on the right side of the image to move forward."><img alt="Plants: image 1 0f 4 thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSl8hoxNap1xsy4-lrVkBjXTym0Q-LoXNdRcGKDNReK8AA1uttdoE5udDLaHjcjXu-ah8FGJqjKFplB1viO7CNsqcoTHe6oATNBEpGC3pEcPWrAOnI4WeX8rvGspgaXkRRnS5BAVPdWEmP/s1600/thumb-3.jpg" /></a>  
 </div>  
 <div class="single">  
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4cyOl2qZikgE2zOkVil9-NCn-6asgcOyIi9KdyLbMVkoJyN6FzAmaEIJiECiqM45ODA2wN1rLyF4Dk6UiKCStbnAT7eQzmWlRJx2IOOgtfLx6Og7Fgk8uh-jB-X9Qky0SgmSvlhnQTOSW/s1600/image-4.jpg" rel="lightbox[plants]" title="Alternately you can press the right arrow key."><img alt="Plants: image 2 0f 4 thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1LRGjqtdorGE8cQYde0__7zrHVmG6MRALuiG6gIWKhKuBr_UWlNTWYpPqMBuGrBQogYwoHG78Jcm_I5SrMu0xiOwW5_tVhBL0gz4cLJ0yLNKhQLQd9ed0RNhwk9dkj6gs-rg79jPNlDA3/s1600/thumb-4.jpg" /></a>  
 </div>  
 <div class="single">  
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3COuAgtpwREeLZXGEwLnkN4LH0zP6YuMhFjUJGnn9fiF960rt40fbjMb3wKqomVb9cY-EQ8gLRh1nW0qOWBYcG3rKwHeu3nexk-Fu-tXSENIm-yQu1FFt9ljmoV3qpyAa0HNTeqangz63/s1600/image-5.jpg" rel="lightbox[plants]" title="The script preloads the next image in the set as you're viewing."><img alt="Plants: image 3 0f 4 thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVEZabePWl9af9k8w9s6bkt4zQADcOolLNLKKuWh0WGXe80Mh-IPAYz53YMPGtX_Midot4xLTXoy-sRhF47H90d-ke24nTfBd_VHa_MSmqG7Pr0TyoPjGFJolBJOMpjJd3dxUjYbmE1Jfr/s1600/thumb-5.jpg" /></a>  
 </div>  
 <div class="single last">  
 <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif027Xm14PXearZFuRE9hiT-8JvFCcCWqyoDmVVfpurk2c-RX-QpLz3B-RKAtjG1lile7rlcFyn0bHOP2He9ohuUHQYMHwL-fa4LcXK3860DzMYAXfBkZ2HKzbe91xV8dFvLa01Q-X3gIf/s1600/image-6.jpg" rel="lightbox[plants]" title="Click the X or anywhere outside the image to close"><img alt="Plants: image 4 0f 4 thumb" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgewjnGYTQzlmzrIRIwE5C6ppHvbGHWdqyKGmWIYZWt_loL0h2kblQeFTrxUA1S0FUorCfVdszs-JQJL1bLzPf7UQUdsvmwCee_tgTBCd50ofOKyQr31JXpWX7H0rk_aOhhr2Mm-jk0M1K9/s1600/thumb-6.jpg" /></a>  
 </div>  
 </div>  
 </div>
-Replace the Green Link with the url of the to be display at your Blog.
-Replace the Red link with the url of the image to be shown after the Image is clicked.
-Replace the Yellow text with the Image description and Color with the image description which will display at your slide.


Posted by Jebus at 18:59
Labels: ,

3 comments:

  1. Unknown25 October 2013 at 17:56

    great sir g. thank u much much......................

    ReplyDelete
  2. Unknown25 October 2013 at 17:58

    i have tried other sites and waste much of my time

    ReplyDelete
  3. Unknown25 October 2013 at 18:06

    please help me i want to use this code in javascript function.how to write that.

    ReplyDelete

Subscribe to: Post Comments (Atom)