jQUERY LIGHTBOX IMAGE OVERLAY POP-UP EFFECT FOR BLOGGER

This is the gadget which every webmaster and a good blogger should have it on their blogs as this gadgets includes the best features like Image Zoom Effect and Featured Image Slideshow. Adding this gadget to your blog will change your blog looks, it the best gadget for the bloggers who uploads much images on their blog. It maximizes the image on the current page itself, if it is clicked and can be slided to next image if there are more than 1 images. Isn't it is interesting.

ADD LIGHT-BOX OVERLAY EFFECT TO YOUR BLOG

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

]]></b:skin>

4). Copy and Paste the followig code just BEFORE the code you have searched.


/*start css lightbox*/
#jquery-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
#jquery-lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#lightbox-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
width: 49%;
height: 100%;
zoom: 1;
display: block;
}
#lightbox-nav-btnPrev { 
left: 0; 
float: left;
}
#lightbox-nav-btnNext { 
right: 0; 
float: right;
}
#lightbox-container-image-data-box {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
padding: 0 10px 0;
}
#lightbox-container-image-data {
padding: 0 10px; 
color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
width: 70%; 
float: left; 
text-align: left; 
} 
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
display: block; 
clear: left; 
padding-bottom: 1.0em; 
} 
#lightbox-secNav-btnClose {
width: 66px; 
float: right;
padding-bottom: 0.7em; 
}
/*end lightbox css*/

5). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

</head>

6). Copy and Paste the followig code just BEFORE the code you have searched.

<!--Start lightbox scripts info from http://www.pcleaks.blogspot.com-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>

<script src='http://suyb.googlecode.com/files/jquery.lightbox-0.5.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(&#39;a.spicebox&#39;) .lightBox({

overlayOpacity: 0.6,
imageLoading: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixWi56fd2dK3vJly3hvdGY2fklNa79C_R7Fs6hKFP4yWFRxOh2RtTbVnUoT9qYnn1fjnHUuuTUA0f1-HHDze4RFfnyt2kR2TJ4xMgZICAyjuxv-eEr-SL9ICGh2-gsqq8cuY34MRy2jR3x/s1600/lightbox-ico-loading.gif&#39;,
imageBtnClose: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZWTs8nz5Ut3ER3LUmgL2dz-xNOzFdgj6yqa-zDiJKs72tHeNqD51sQsjPbmnLkH37-tE64cphUYGymItn-qMhUqeQd17B70imAVfr3P7txVRbFKvg074QJAyxrwMGbTWAiqd1neYxDRa_/s1600/lightbox-btn-close.gif&#39;,
imageBtnPrev: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcUUwq6jysBxpMcnD9nv9ODE0iIc5FWgo9CJcFeZujjlognwffspIl7mr3X2H4AihVv2BMm08Vtw5OoyiDHwNJRkCw0tkWs6IptRvr0fezsJWBwl5DJ3lQhwm3fMp9IP5Di9EmBG0Gr6E8/s1600/lightbox-btn-prev.gif&#39;,
imageBtnNext: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivEqr3PY3d9XB6EYFu3iGBlczi2k5o5CTXxueotRlw5F4mX4gvaXAoOsI3zVDuGuJq4bTUAifW5sVrMsYUuTAUWAoTdop-Gfmo_ZbT8TDt67KuLiO-YBskO1lNnd4cYtP9LG1fDuCH-1hy/s1600/lightbox-btn-next.gif&#39;,
containerResizeSpeed: 350,
txtImage: &#39;Image&#39;,
txtOf: &#39;Of&#39;
});
});
</script>
<!--end lightbox scripts-->

5). Save your template, We had added the script and Css.

NOTE :- NOW, When you add an image to your blog that you want to use the light-box effect, Simply Go To Edit Html > Search Image Code 

And ADD the given code to Image code

class="spicebox" and title="Add Description Here"

It Will Look Like :-

<a class="spicebox" title="Image Description Here" href="http://image.jpg"><img src="http://image.jpg"></a>

If you got a good experience than leave comments and Contact Me for any assistance.