Adding jQuery Photo Gallery with Description Effect in Blogger

Today I’ll be featuring another cool widget which you can integrate in your Blogger site, which is a beautiful jQuery photo gallery with description effect from Bloggertrix. Adding it is simple, and you can also add a description to your selected image, even in the animation.
Steps:

• Go to Blogger Dashboard.

• Click on the drop down menu > Layout

• Click Add Gadget > HTML/Javascript

• Copy and paste this code provided below:

<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="http://bloggertrixcode.googlecode.com/files/jquery.scrollTo.js"></script>
<script>
$(document).ready(function() {

 //Speed of the slideshow
 var speed = 5000;

 //You have to specify width and height in #slider CSS properties
 //After that, the following script will set the width and height accordingly
 $('#mask-gallery, #gallery li').width($('#slider').width()); 
 $('#gallery').width($('#slider').width() * $('#gallery li').length);
 $('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());

 //Assign a timer, so it will run periodically
 var run = setInterval('newsscoller(0)', speed); 

 $('#gallery li:first, #excerpt li:first').addClass('selected');

 //Pause the slidershow with clearInterval
 $('#btn-pause').click(function () {
 clearInterval(run);
 return false;
 });

 //Continue the slideshow with setInterval
 $('#btn-play').click(function () {
 run = setInterval('newsscoller(0)', speed); 
 return false;
 });

 //Next Slide by calling the function
 $('#btn-next').click(function () {
 newsscoller(0); 
 return false;
 }); 

 //Previous slide by passing prev=1
 $('#btn-prev').click(function () {
 newsscoller(1); 
 return false;
 }); 

 //Mouse over, pause it, on mouse out, resume the slider show
 $('#slider').hover(

 function() {
 clearInterval(run);
 }, 
 function() {
 run = setInterval('newsscoller(0)', speed); });});

function newsscoller(prev) {

 //Get the current selected item (with selected class), if none was found, get the first item
 var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
 var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

 //if prev is set to 1 (previous item)
 if (prev) {

 //Get previous sibling
 var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
 var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');

 //if prev is set to 0 (next item)
 } else {

 //Get next sibling
 var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
 var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
 }

 //clear the selected class
 $('#excerpt li, #gallery li').removeClass('selected');

 //reassign the selected class to current items
 next_image.addClass('selected');
 next_excerpt.addClass('selected');

 //Scroll the items
 $('#mask-gallery').scrollTo(next_image, 800);  
 $('#mask-excerpt').scrollTo(next_excerpt, 800);     }

</script>
<style>

#slider {

 /* You MUST specify the width and height */
 width:660px;
 height:275px;
 position:relative; 
 overflow:hidden;
-moz-box-shadow: 0px  0px 6px #000000;
-webkit-box-shadow: 0px 0px 6px #000000;
box-shadow: 0px 0px 6px #000000;
}
#mask-gallery {
 overflow:hidden; 
}

#gallery {
 list-style:none;
 margin:0;
 padding:0;
 z-index:0;
 width:900px;
 overflow:hidden;
}
 #gallery li {
 float:left;
 }
#mask-excerpt {
 position:absolute; 
 top:0;
 left:0;
 z-index:500;
 width:100px;
 overflow:hidden; 
 }

#excerpt {
 filter:alpha(opacity=60);
 -moz-opacity:0.6;  
 -khtml-opacity: 0.6;
 opacity: 0.6;  

 list-style:none;
 margin:0;
 padding:0;

 z-index:10;
 position:absolute;
 top:0;
 left:0;

 width:100px;
 background-color:#000;
 overflow:hidden;
 font-family:arial;
 font-size:14px;
 color:#fff; 
}

 #excerpt li {
 padding:5px;
 }

.clear {
 clear:both; 
}
#btn-prev {
 border-top: 1px solid #96d1f8;
 background: #65a9d7;
 padding: 4px 8px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
 -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
 box-shadow: rgba(0,0,0,1) 0 1px 0;
 text-shadow: rgba(0,0,0,.4) 0 1px 0;
 color: white;
 font-size: 9px;
 font-family: Georgia, serif;
 text-decoration: none;
 vertical-align: middle;
 }
#btn-prev:hover {
 border-top-color: #28597a;
 background: #28597a;
 color: #ccc;
 }
#btn-prev:active {
 border-top-color: #238acf;
 background: #238acf;
 }
#btn-next {
 border-top: 1px solid #96d1f8;
 background: #65a9d7;
 padding: 4px 8px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
 -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
 box-shadow: rgba(0,0,0,1) 0 1px 0;
 text-shadow: rgba(0,0,0,.4) 0 1px 0;
 color: white;
 font-size: 9px;
 font-family: Georgia, serif;
 text-decoration: none;
 vertical-align: middle;
 }
#btn-next:hover {
 border-top-color: #28597a;
 background: #28597a;
 color: #ccc;
 }
#btn-next:active {
 border-top-color: #238acf;
 background: #238acf;
 }
</style>
<div id="debug"></div>
<div id="slider">

 <div id="mask-gallery">
 <ul id="gallery">
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqwWiZcAGx6vL01gkSlSPX-njF8cL7MFDN4t9_NYqa4STSXcK2l-T8I5C_4snBaPVFu-DD_ZHYdditutHF7iVIY_P0gw-KUTQCrcGFUieVCb1BkS2DjyPhd5aJDtgG3j0MOhDYiCdAUvo/s1600/btrix_image2" width="660" height="275" alt=""/></li>
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk2i3Yyh_ACzLjvG86vsBEqaGw74PBVxkOIla3I2LpyIDf0pIf1AfkmwGDGDztv0Mw4U07pSiraR8lZi2AOBxcL-t-xsom3MQxOgO620NCJLkj_of5FNgmZXibAJqlTnZRNJAkgi88eKw/s1600/btrix_image1.jpg" width="660" height="275" alt=""/></li>
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPOrHMJS6OiqwoMvQb7LMNzalrNLSI9mVN1rAs7QWptNHGBKeSBVB-1NiXI1j0dVFXari-nsTVUBg-8TzZpXSICggi3TH2ctTyryeyBCsL4FAwEnCSr5-ktqSFYcMNpUgP1OY6l8CZ7M/s1600/btrix_image3.jpg" width="660" height="275" alt=""/></li>
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXYBeASOKQDf4F6MBtLckdC_nolY3PwYmArDXDINhJWzmxk7uqSs0q1op7PxtbMR0vP6f91RuN-gQKpukTQy9MvLFJVJ5pitRZfhMH5IqIQ1tqMma99ZGVxVvAUn6XMtCITHxlzz-HW8o/s1600/btrix_image5.jpg" width="660" height="275" alt=""/></li>
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJm3d6xH_VSMv5pXWwzuo0Q73pdJT1m22rTKer3vvVmJV8WgfBQT57DTN_CK9AwdZU58DGtqny-_KWz6fh46cTnfptMwkxXcK8VzlbMsju4t37NKey0Y_Ved4-GYBal7Wgu-KGy_VCKhQ/s1600/btrix_image4.jpg" width="660" height="275" alt=""/></li>
 </ul>
 </div>

 <div id="mask-excerpt">
 <ul id="excerpt">
 <li>Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend.</li>
 <li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
 <li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li>
 <li>tristique senectus et netus et malesuada fames ac turpis egestas.</li>
 <li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li> </ul>
 </div>

</div>

<div id="buttons" style="width: 100px;margin-left: 260px;padding-left: 25px;height: 25px;">
 <a href="#" id="btn-prev">prev</a> 
 <a href="#" id="btn-next">next</a>
</div>

<div></div>

• Change photos of your choice by changing the image URL.

• You can change the image texts by changing the bolded texts (this part of the code above):

<div id="mask-excerpt">
 <ul id="excerpt">
 <li>Cras dictum. Maecenas ut turpis. In vitae erat ac orci dignissim eleifend.</li>
 <li>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
 <li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li>
 <li>tristique senectus et netus et malesuada fames ac turpis egestas.</li>
 <li>Nunc quis justo. Sed vel ipsum in purus tincidunt pharetra.</li> </ul>
 </div>

</div>

Note: Always have a backup before editing your template.

• Save.