Stylish Bubbly Image Gallery with jQuery

0

In this post I have extended the image zoom effect to create an awesome image gallery. This gallery picks a random image from the list and applies zoom effect to it. The result is a beautiful effect like bubbles of water. Like to see it???


Live Demo Download

HTML Markup

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Webspeaks.in</title>
<body>
<div id="main">
 <ul class="gallery">
  <li><img src="1.jpg" /> </li>
  <li><img src="2.jpg" /> </li>
  <li><img src="3.jpg" /> </li>
  <li><img src="4.jpg" /> </li>
  <li><img src="1.jpg" /> </li>
  <li><img src="2.jpg" /> </li>
  <li><img src="3.jpg" /> </li>
  <li><img src="4.jpg" /> </li>
  <li><img src="1.jpg" /> </li>
  <li><img src="2.jpg" /> </li>
  <li><img src="3.jpg" /> </li>
  <li><img src="4.jpg" /> </li>
  <li><img src="1.jpg" /> </li>
  <li><img src="2.jpg" /> </li>
  <li><img src="3.jpg" /> </li>
 </ul>
</div>
</body>
</html>

jQuery code

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;
  }
 }
});

CSS Code

body{ background-color:#CCC;}
#main{top:50%; left:50%; height:600px; width:800px;}
ul.gallery{list-style: none; margin:200px 100px;}
ul.gallery li{float: left; position: relative; width: 110px; height: 110px;}
ul.gallery li img{height:70px; width:70px; padding:5px; border: 1px solid #ddd; background: #f0f0f0; position: absolute; cursor:pointer;}

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/