Adding jQuery Photo Gallery with Description Effect

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="http://4.bp.blogspot.com/- j_6QOaTuLCQ/UUNGkGEcjdI/AAAAAAAAHOs/CANxlyJnVvE/s1600/btrix_image2" width="660" height="275" alt=""/></li> <li><img src="http://2.bp.blogspot.com/- dp26Ub0qhB8/UUNGlARp7DI/AAAAAAAAHO0/xyXgXrOP48s/s1600/btrix_image1.jpg" width="660" height="275" alt=""/></li> <li><img src="http://2.bp.blogspot.com/- 8UESQ46gwQM/UUNGm0YBP8I/AAAAAAAAHO8/81cNif5NNbw/s1600/btrix_image3.jpg" width="660" height="275" alt=""/></li> <li><img src="http://3.bp.blogspot.com/- bFgDRlKV2aI/UUNGo2-Q0EI/AAAAAAAAHPE/abTaAslSzgQ/s1600/btrix_image5.jpg" width="660" height="275" alt=""/></li> <li><img src="http://1.bp.blogspot.com/-dTVXayv2h- 4/UUNGo3RBAoI/AAAAAAAAHPM/WjZ_7b_GS84/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.