Lightbox for Blogger

Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. Clicking on an image in a blog post will brings up the image in a larger overlay on top of your blog. It's a snap to setup and works on all modern browsers. All blog images regardless of whether directly uploaded from your computer or linked to from another source will display in this lightbox view. If there are multiple images in the blog post, then all of those images will be available to browse through lightbox if they are programmed to do so when the lightbox view is opened. By default blogger provides this facility. But if somehow your blogger blog failed to display images via lightbox, then try this method. Besides if you want to customize your lightbox view, you can also go for this method.

All right, let's proceed.

1. Click 'Posts and comments' under 'Settings' section.
2. Change the mode of 'Showcase images with Lightbox' to 'yes'. If it is already 'yes', leave it as it is.
   
   Click 'Save settings'.
   If that works for you and if you don't want any customization, then no need to proceed further. Otherwise go through the rest of this tutorial. But before you proceed, change 'Showcase images with Lightbox' to 'no'.
Before you make any changes in your blogger template, it is recommended to backup your blog in case something goes wrong.
3. Go to 'Template' and click 'Edit HTML'
   
4. Search for (
   Ctrl
   +
   f
   )</head> and paste these before </head>

   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <!--important -->
   <script src='https://all-js-files.googlecode.com/files/lightbox_2.js' type='text/javascript'/>
   

5. Now search (
   Ctrl
   +
   f
   ) for </b:skin> and paste the following codes before </b:skin>

   
   /*---- Lightbox -----*/
   #lightboxOverlay {  position: absolute;  top: 0;  left: 0;  z-index: 9999;  background-color: black;  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);  opacity: 0.85;  display: none;}
   #lightbox {  position: absolute;  left: 0;  width: 100%;  z-index: 10000;  text-align: center;  line-height: 0;  font-family: "lucida grande", tahoma, verdana, arial, sans-serif;  font-weight: normal;}
   #lightbox img {  width: auto;  height: auto;}
   #lightbox a img {  border: none;}
   
   .lb-outerContainer {  position: relative;  background-color: white;  *zoom: 1;  width: 250px;  height: 250px;  margin: 0 auto;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     -ms-border-radius: 4px;
     -o-border-radius: 4px;
     border-radius: 4px;}
   .lb-outerContainer:after {  content: "";  display: table;  clear: both;}
   .lb-container {  padding: 10px;}
   .lb-loader {  position: absolute;  top: 40%;  left: 0%;  height: 25%;  width: 100%;  text-align: center;  line-height: 0;}
   .lb-nav {  position: absolute;  top: 0;  left: 0;  height: 100%;  width: 100%;  z-index: 10;}
   .lb-container > .nav {  left: 0;}
   .lb-nav a {  outline: none;}
   .lb-prev, .lb-next {  width: 54px;  height: 100%;  background: ("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");  /* Trick IE into showing hover */  display: block;  cursor: pointer;}
   .lb-prev {  left: 0;  float: left;}
   .lb-next {  right: 0;  float: right;}
   .lb-prev:hover {  background: url('http://4.bp.blogspot.com/-oFZUHN_opjA/UVH1HYKlc6I/AAAAAAAAB4A/d6oA8VKhS54/s1600/prev.png') left 48% no-repeat;}
   .lb-next:hover {  background: url('http://3.bp.blogspot.com/-i1TdU3e2TPw/UVH1FrtJcqI/AAAAAAAAB3w/m_v-Zkvwiuc/s1600/next.png') right 48% no-repeat;}
   .lb-dataContainer {  margin: 0 auto;  padding-top: 5px;  *zoom: 1;  width: 100%;
     -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;
   
     -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;}
   .lb-dataContainer:after {  content: "";  display: table;  clear: both;}
   .lb-data {  padding: 0 10px;  color: #bbbbbb;}
   .lb-data .lb-details {  width: 85%;  float: left;  text-align: left;  line-height: 1.1em;}
   .lb-data .lb-caption {  font-size: 13px;  font-weight: bold;  line-height: 1em;}
   .lb-data .lb-number {  display: block;  clear: left;  padding-bottom: 1em;  font-size: 11px;}
   .lb-data .lb-close {  width: 35px;  float: right;  padding-bottom: 0.7em;  outline: none;}
   .lb-data .lb-close:hover {  cursor: pointer;}
   /*-- Lightbox --*/
   

6. Hit 'Save template'.
7. To display lightbox effect for an image, add rel="lightbox" attribute to that image link tag. You can also use the title attribute in case you are interested to display a caption.

   
   <a href="Image link" rel="lightbox" title="Image Caption">
     <img src="image thumbnail link" />
   </a>
   

   If you want to group a number of related images, add an addition group name within square brackets in the rel attribute.

   
   <a href="Image link 1" rel="lightbox[blr-group]" title="Image Caption 1">
     <img src="image thumbnail link 1" />
   </a>
   
   <a href="Image link 2" rel="lightbox[blr-group]" title="Image Caption 2">
     <img src="image thumbnail link 2" />
   </a>
   
   <a href="Image link 3" rel="lightbox[blr-group]" title="Image Caption 3">
     <img src="image thumbnail link 3" />
   </a>
   

Hope that will work for you. If you face any problem related to this, please let me know.
Happy blogging.