Home » Blogger Tutorials, Tricks and Hacks » Blogger Images / Photos Tricks » Adding jQuery Photo Gallery with Description Effect

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Adding jQuery Photo Gallery with Description Effect

Adding jQuery Photo Gallery with Description Effect

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,572 views

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.

Liked It ? Please Share

Comments

3 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. hendrix says:

    what does clicking the image do?

  2. elfans says:

    I have pasted the code above. But the images cannot animated. Is there a problem?

  3. Great article. Really thank you! Want more.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here