Nice Photo Gallery With jQuery

Create an nice photo gallery with jQuery. JQuery is very popular, because it is very fast and abridged JavaScript library. In this photo gallery jQuery make automated zoom effect and smooth animation with small code. Earlier we mentioned an article about jQuery and css animated navigation menu.It also beautiful and animated effect. So this tutorial help to photo gallery website/blog.

Live Demo Download

HTML
Here is basic HTML code for displaying image thumbnail. You can see in below code we added birds.jpg and don't forget to change that.

<ul class="gallery">
<li><img src="birds.jpg" /> </li>
<li><img src="birds1.jpg" /> </li>
<li><img src="birds2.jpg" /> </li>
<li><img src="birds3.jpg" /> </li>
<li><img src="birds4.jpg" /> </li>
<li><img src="birds.jpg" /> </li>
<li><img src="birds1.jpg" /> </li>
<li><img src="birds2.jpg" /> </li>
<li><img src="birds3.jpg" /> </li>
<li><img src="birds4.jpg" /> </li>
</ul>

CSS
Here we given CSS code for adding image border, image background and image position.  

ul.gallery li{list-style: none; margin:0px 0px;}
ul.gallery li{float: left; position: relative; width: 120px; height: 120px;}
ul.gallery li img{height:80px; width:80px; padding:5px; border: 1px solid #ddd; background: #f0f0f0; position: absolute; cursor:pointer;}

Now it will change the image position and all images width/height will display correctly, you change the width and height of image with your wish. But you will see images without automatic zoom effect. Just like below image.

jQuery

Following code for adding automatic zoom effect and animation.

var currentImg;/*To hold the current image in action*/

function rand(l,u) // lower bound and upper bound
{
 return Math.floor((Math.random() * (u-l+1))+l);
}

$(function()
{
 $child = $('ul.gallery').children();
 var childLength = $child.length;

 setInterval(bubble, 600);

 function bubble()
 {
  var thisImg = rand(1,childLength);/*Get any random number from 1 to maximum number of children in gallery*/
 
  if(currentImg != thisImg)/*To prevent multiple effects on same element*/
  {
   $thisChild = $('ul.gallery li:nth-child(' + thisImg + ') > img')/*Get img child of this li element*/

   $thisChild.css({'z-index' : '10'});
   $thisChild.animate({
     marginTop: '-110px',
     marginLeft: '-110px',
     top: '50%',
     left: '50%',
     width: '174px',
     height: '174px',
     padding: '10px'
    }, 1000);
   $thisChild.css({'z-index' : '0'});
   $thisChild.animate({
     marginTop: '0',
     marginLeft: '0',
     top: '0',
     left: '0',
     width: '70px',
     height: '70px',
     padding: '5px'
    }, 900);
  }
  else
  {
   currentImg = thisImg;
  }
 }
});

That's it, don't forget to leave a comment about this tutorial.

Share and Enjoy!

SHARE

Tweet