How to auto play animation of image gallery

Question

I have the below page for an image gallery which when you hover over the image, the description slides out and image enlarges. It works fine. However I wondered, rather than having to hover over with mouse I would like to visit the page and a random image in the gallery enlarges and description slides out and returns to normal, then moving onto another image and to the next. So just to clarify as you visit the page:

In random order an image from the gallery enlarges and description slides out, then returns to original state before moving onto next image.
Next random image in the gallery enlarges and description slides out and so on

All in random order.

$(function() {
  // View the selected photo at full size
  $(".photo-image").click(function() {
    $(this).addClass("photo-selected");
    $(this).parent().addClass("photo-x");
    $("#overlay").show();
  });

  // Close the full size view when #overlay is clicked
  $("#overlay").click(function() {
    $(".photo-image").removeClass("photo-selected");
    $(".photo-x").removeClass("photo-x");
    $("#overlay").hide();
  });
});

// Close full size view if "esc"
$(document).keyup(function(e) {
  if (e.keyCode == 27) {
    $(".photo-image").removeClass("photo-selected");
    $("#overlay").hide();
  }
});

#container {
  width: 850px;
  position: relative;
  margin: 0 auto;
  top: 50px;
}

#overlay {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #000;
  opacity: .7;
  z-index: 2000;
  display: none;
}

.photo {
  position: relative;
  float: left;
  height: 100px;
  width: 100px;
}

.photo-image {
  cursor: pointer;
  position: relative;
  top: 1px;
  left: 1px;
  width: 100px;
  border: 1px solid #999;
  z-index: 1000;
  opacity: 0.6;
  transition: width 1s, top 1s, left 1s, opacity 1s, z-index .01s;
}

.photo-image:hover {
  width: 200px;
  top: -50px;
  left: -50px;
  z-index: 1001;
  opacity: 1;
}

.photo-selected {
  cursor: default;
  z-index: 2001;
  width: 500px;
  opacity: 1;
  top: -20px;
  left: -200px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.photo-selected:hover {
  width: 500px;
  top: -50px;
  left: -50px;
  z-index: 2001;
  opacity: 1;
  top: -20px;
  left: -200px;
}

.imagepluscontainer div.desc {
  /* CSS for desc div of each image. */
  position: absolute;
  width: 90%;
  z-index: 1;
  /* Set z-index to that less than image's, so it's hidden beneath it */
  bottom: 0;
  /* Default position of desc div is bottom of container, setting it up to slide down */
  left: 5px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.8);
  /* black bg with 80% opacity */
  color: white;
  -moz-border-radius: 0 0 8px 8px;
  /* CSS3 rounded borders */
  -webkit-border-radius: 0 0 8px 8px;
  border-radius: 0 0 8px 8px;
  opacity: 0;
  /* Set initial opacity to 0 */
  -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  /* CSS3 shadows */
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  -moz-transition: all 0.5s ease 0.5s;
  /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
  -webkit-transition: all 0.5s ease 0.5s;
  -o-transition: all 0.5s ease 0.5s;
  -ms-transition: all 0.5s ease 0.5s;
  transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a {
  color: white;
}

.imagepluscontainer:hover div.desc {
  /* CSS for desc div when mouse hovers over main container */
  -moz-transform: translate(0, 100%);
  -webkit-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  -o-transform: translate(0, 100%);
  transform: translate(0, 100%);
  opacity: 1;
  /* Reveal desc DIV fully */
}


/*### Below CSS when applied to desc DIV slides the desc div from the right edge of the image ###*/

.imagepluscontainer div.rightslide {
  width: 200px;
  /* reset from default */
  height: 100px;
  top: -50px;
  right: -50px;
  left: auto;
  /* reset from default */
  bottom: auto;
  /* reset from default */
  padding-left: 15px;
  -moz-border-radius: 0 8px 8px 0;
  -webkit-border-radius: 0 8px 8px 0;
  border-radius: 0 8px 8px 0;
}

.imagepluscontainer:hover div.rightslide {
  -moz-transform: translate(100%, 0);
  -webkit-transform: translate(100%, 0);
  -ms-transform: translate(100%, 0);
  -o-transform: translate(100%, 0);
  transform: translate(100%, 0);
  z-index: 2001;
}


/*### Below CSS when applied to desc DIV slides the desc div from the left edge of the image ###*/

.imagepluscontainer div.leftslide {
  width: 280px;
  /* reset from default */
  height: 185px;
  top: 0px;
  left: -100;
  bottom: auto;
  /* reset from default */
  padding-left: 15px;
  -moz-border-radius: 8px 0 0 8px;
  -webkit-border-radius: 8px 0 0 8px;
  border-radius: 8px 0 0 8px;
  z-index: 2001;
}

.imagepluscontainer:hover div.leftslide {
  -moz-transform: translate(-100%, 0);
  -webkit-transform: translate(-100%, 0);
  -ms-transform: translate(-100%, 0);
  -o-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}


/*### Below CSS when applied to desc DIV slides the desc div from the top edge of the image ###*/

.imagepluscontainer div.upslide {
  top: 0;
  bottom: auto;
  /* reset from default */
  padding-bottom: 10px;
  -moz-border-radius: 8px 8px 0 0;
  -webkit-border-radius: 8px 8px 0 0;
  border-radius: 8px 8px 0 0;
}

.imagepluscontainer:hover div.upslide {
  -moz-transform: translate(0, -100%);
  -webkit-transform: translate(0, -100%);
  -ms-transform: translate(0, -100%);
  -o-transform: translate(0, -100%);
  transform: translate(0, -100%);
}

<div id="overlay"></div>
<div id="container">
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-1.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-2.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-3.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-4.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-5.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-6.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-1.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-2.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-3.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-4.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-5.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-6.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-1.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-2.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-3.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-4.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-5.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-6.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-1.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-2.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-3.jpg" alt="" class="photo-image" />
      <div class="imagepluscontainer">
        <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
      </div>
    </div>
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-4.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-5.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
  <div class="imagepluscontainer">
    <div class="photo"><img src="http://s.cdpn.io/37045/wedding-6.jpg" alt="" class="photo-image" />
      <div class="desc rightslide">Bdjfjffjkfjgjfgjfgjfgjfgjfjkg</div>
    </div>
  </div>
</div>

Here is the JSFiddle

score 0 · Answer 1 · edited May 23 '17 at 11:44

*This is 'jQquery only' implementation****

Without randomization

1.First make sure the page is fully loaded and now the animation should be executed.

Use $( window ).load(function() { //all code written below here })

2.Now iterate through each children and pause before going to next. Do this using .find() and How to add pause between each iteration of jQuery .each()? $('.imagepluscontainer').find('img').each(function () { //jquery animation code goes here //remember to remove hover // now pause between different itterations };

With randomization

If you want to randomize the image selection procedure, I find following the easiest and minimal way:

Rather than iterating through child elements one by one we can make and array of the child img elements. eg-

var imgplusArray = $(".imagepluscontainer").find("img").toArray();

Now that we have the array we can easily shuffle it. Use the following javascript(yes, javascript) function-

function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}
shuffleArray(imgplusArray);

Now that we have the shuffled array we just have to iterate through array rather than children like earlier. How to add pause between each iteration of jQuery .each()?

$(imgplusArray).each(function () { //jquery animation code goes here
//remember to remove hover
// now pause between different itterations
};

Hi thanks for this, your above solution makes perfect sense using the .find(). — bluewavestudio, Dec 27 '15 at 12:30
But I would need it to randomly select the img within the div and perform the action before moving to next random div. I have this so far// Getting a random index for the list of images that are on the page. var index = Math.floor((Math.random() * $('.imagepluscontainer').length)); // Adding class hover to trigger the hover action. $($('.imagepluscontainer')[index]).addClass('hover'); — bluewavestudio, Dec 27 '15 at 12:31

score 0 · Accepted Answer · answered Dec 27 '15 at 13:28

You should use another CSS class to give hover effect to the image using jQuery. Say the class name is hovered. Add the same CSS property used in :hover for both .imagepluscontainer and .photo-image like following.

.photo-image.hovered {
     width: 200px;
     top: -50px;
     left: -50px;
     z-index: 1001;
     opacity: 1;
}
.imagepluscontainer.hovered div.desc {
    -moz-transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
    opacity: 1;
}
.imagepluscontainer.hovered div.rightslide {
    -moz-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    transform: translate(100%, 0);
    z-index: 2001;
}
.imagepluscontainer:hovered div.leftslide {
    -moz-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}
.imagepluscontainer.hovered div.upslide {
    -moz-transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    transform: translate(0, -100%);
}

And you can use javascript setInterval function to add hover effect continuously after an interval. Use Math.random() for select random element like following.

setInterval(function(){
    $('.imagepluscontainer').removeClass('hovered');
    $('.photo-image').removeClass('hovered');

    var x = Math.floor((Math.random() * ($('.imagepluscontainer').length-1)) + 0);
    $('.imagepluscontainer').eq(x).addClass('hovered');
    $('.photo-image').eq(x).addClass('hovered');
}, 2000);

Hope this will help you.

How to auto play animation of image gallery

2 Answers2

*This is 'jQquery only' implementation****

Without randomization

With randomization

UPDATED FIDDLE

How to auto play animation of image gallery

2 Answers2

*****************This is 'jQquery only' implementation********************

Without randomization

With randomization

UPDATED FIDDLE

*This is 'jQquery only' implementation****