0

I have set up a rotating gallery on a homepage using the Javascript code below. The gallery works great, except I would like to have a different image show on refresh. What do I need to change in the code to make this happen? Thank you!

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

    <script>
    $.fn.preload = function() {
    this.each(function(){
    $('<img/>')[0].src = this;
    });
    }

    var images = Array(
    "1.jpg",
    "2.jpg",
    "3.jpg",
    "4.jpg",
    "5.jpg",
    "6.jpg",  
    "7.jpg",
    "8.jpg"  
     );

    $([images[0],images[1],images[2],images[3],images[4]]).preload();

    // Usage:

    var currimg = 0;

    $(document).ready(function(){
    function loadimg(){
    $('#outerWrapper').animate({ opacity: 1 }, 400,function(){

    //finished animating, minifade out and fade new back in
    $('#outerWrapper').animate({ opacity: 0.7 }, 100,function(){
     currimg++;
    if(currimg > images.length-1){
      currimg=0;
    }
    var newimage = images[currimg];
    //swap out bg src
    $('#outerWrapper').css("background-image", "url("+newimage+")");

    //animate fully back in
    $('#outerWrapper').animate({ opacity: 1 }, 600,function(){

    //set timer for next
    setTimeout(loadimg,5000);

    });
    });
    });
    }
    setTimeout(loadimg,5000);
    });
         </script>
S.Griffith
  • 1
  • 1
  • Can you include a fiddle... – EugenSunic Sep 03 '15 at 03:59
  • When you say "on refresh" you might be opening up a can of worms. Do you plan to store the last image shown before reload? That sounds like horror. But if you must, I recommend [this post](http://stackoverflow.com/questions/8013429/jquery-detect-page-refresh). – jmargolisvt Sep 03 '15 at 04:06

1 Answers1

0

You can set currimg to a random value from 0 to n, where n is the total number of images in the gallery. Upon refresh, the currently displayed image will be inclined to be different from the one displayed prior to refresh.

currimg = Math.floor(Math.random()*8);
BitMystic
  • 1