jQuery Animated Photo Gallery

by Ali Khaled

HTML

<script src="http://solidinnovationstudio.com/cssproject/bootstrap/js/jquery.easing.min.js"></script>
<!-- a simple grid and an animate button -->
<div class="grid"></div>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTIAT0XJbwtrOdSS7hpQT4h3IeEXfdm9IwohLzushkVDKYYkoNs" class="img-responsive" alt="Responsive image">

CSS

/*Montserrat font*/

@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/

* {
  margin: 0;
  padding: 0;
}

body {
  text-align: center;
  overflow: hidden;
}

.grid {
  width: 600px;
  height: 300px;
  margin: 100px auto 50px auto;
  perspective: 500px;
  /*For 3d*/
}

.grid img {
  width: 60px;
  height: 60px;
  display: block;
  float: left;
}

.animate {
  font: 12px Montserrat;
  text-transform: uppercase;
  background: rgb(0, 100, 0);
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.animate:hover {
  background: rgb(0, 75, 0);
}

JavaScript

//Creating 50 thumbnails inside .grid
//the images are stored on the server serially. So we can use a loop to generate the HTML.
var c=0;

//animation time
ss2();
window.setInterval(ss2,8000);
function ss2() {
 $(".grid").empty();

var images = "",
  count = 50;
	
	if(c==0)
{
for (var i = 1; i <= count; i++)

  images += '<img class="img" src="http://solidinnovationstudio.com/cssproject/bootstrap/images/animate1/' + i + '.jpg" />';

//appending the images to .grid
$(".grid").append(images);

var d = 0; //delay
var ry, tz, s; //transform params
c++;
}
else if (c==1) {
     
for (var i = 1; i <= count; i++)

  images += '<img class="img" src="http://solidinnovationstudio.com/cssproject/bootstrap/images/animate2/' + i + '.jpg" />';

//appending the images to .grid
$(".grid").append(images);

var d = 0; //delay
var ry, tz, s; //transform params
c++;

}
else if (c==2) {
     
for (var i = 1; i <= count; i++)

  images += '<img class="img" src="http://solidinnovationstudio.com/cssproject/bootstrap/images/animate2/' + i + '.jpg" />';

//appending the images to .grid
$(".grid").append(images);

var d = 0; //delay
var ry, tz, s; //transform params
c++;

}

else if (c==3) {
     
for (var i = 1; i <= count; i++)

  images += '<img class="img" src="http://solidinnovationstudio.com/cssproject/bootstrap/images/animate2/' + i + '.jpg" />';

//appending the images to .grid
$(".grid").append(images);

var d = 0; //delay
var ry, tz, s; //transform params
c=0;

}


    //fading out the thumbnails with style
    $(".img").each(function() {
      d = Math.random() * 1000; //1ms to 1000ms delay
      $(this).delay(d).animate({
        opacity: 0
      }, {
        //while the thumbnails are fading out, we will use the step function to apply some transforms. variable n will give the current opacity in the animation.
        step: function(n) {
          s = 1 - n; //scale - will animate from 0 to 1
          $(this).css("transform", "scale(" + s + ")");
        },
        duration:...