Modify this array to allow for links?

JavaScript
1

Hi,

I’m using this code for slideshows on my page. But I want to make it so that I can put a different link for each image. How can I modify this to do that?

window.onload = function()
  {
     
     var divId1 = "photodiv";
     var imgId1="photoimg";
     var imgArray1= new Array(
        "http://static.flickr.com/53/149047107_78ebdaf8bc.jpg?v=0",
        "http://static.flickr.com/48/149048049_3523869ba4.jpg?v=0",
        "http://static.flickr.com/56/149047438_fabcf2f7ce.jpg?v=0"
        );
     
      var object1 = new shuffler(divId1,imgId1,imgArray1,5);
      object1.photoShufflerLaunch();
      
      var divId2 = "photodiv2";
      var imgId2 ="photoimg2";
      var imgArray2= new Array(
        "http://static.flickr.com/53/149047107_78ebdaf8bc.jpg?v=0",
        "http://static.flickr.com/56/149047438_fabcf2f7ce.jpg?v=0",
        "http://static.flickr.com/48/149048049_3523869ba4.jpg?v=0"
        
        );
     
      var object2 = new shuffler(divId2,imgId2,imgArray2,6);
      object2.photoShufflerLaunch();
      
      //YOU CAN DO AS MANY OBJECTS AS YOU WANT
      
  }
  var shuffler = function(divId,imgId, imgArray, interval)
  {

   this.gblPhotoShufflerDivId = divId;
   this.gblPhotoShufflerImgId = imgId; 
   this.gblImg = imgArray;
   this.gblPauseSeconds = interval;
   this.gblFadeSeconds = .85;
   this.gblRotations = 1;

  // End Customization section
  
   this.gblDeckSize = this.gblImg.length;
   this.gblOpacity = 100;
   this.gblOnDeck = 0;
   this.gblStartImg;
   this.gblImageRotations = this.gblDeckSize * (this.gblRotations+1);
  
  
  this.photoShufflerLaunch = function()
  {
      var theimg = document.getElementById(this.gblPhotoShufflerImgId);
        this.gblStartImg = theimg.src; // save away to show as final image

    document.getElementById(this.gblPhotoShufflerDivId).style.backgroundImage='url(' + this.gblImg[this.gblOnDeck] + ')';
    setTimeout(( function(obj){ return function(){ obj.photoShufflerFade(); } } )(this),this.gblPauseSeconds*1000);
  }

  this.photoShufflerFade = function()
  {
      var theimg = document.getElementById(this.gblPhotoShufflerImgId);
    
      // determine delta based on number of fade seconds
    // the slower the fade the more increments needed
        var fadeDelta = 100 / (30 * this.gblFadeSeconds);

    // fade top out to reveal bottom image
    if (this.gblOpacity < 2*fadeDelta ) 
    {
      this.gblOpacity = 100;
      // stop the rotation if we're done
      if (this.gblImageRotations < 1) return;
      this.photoShufflerShuffle();
      // pause before next fade
          setTimeout(( function(obj){ return function(){ obj.photoShufflerFade(); } } )(this),this.gblPauseSeconds*1000);
    }
    else
    {
      this.gblOpacity -= fadeDelta;
      this.setOpacity(theimg,this.gblOpacity);
      setTimeout(( function(obj){ return function(){ obj.photoShufflerFade(); } } )(this),30);  // 1/30th of a second
    }
  }

  this.photoShufflerShuffle = function()
  {
    var thediv = document.getElementById(this.gblPhotoShufflerDivId);
    var theimg = document.getElementById(this.gblPhotoShufflerImgId);
    
    // copy div background-image to img.src
    theimg.src = this.gblImg[this.gblOnDeck];
    // set img opacity to 100
    this.setOpacity(theimg,100);

        // shuffle the deck
    this.gblOnDeck = ++this.gblOnDeck % this.gblDeckSize;
    // decrement rotation counter
    if (--this.gblImageRotations < 1)
    {
      // insert start/final image if we're done
      this.gblImg[this.gblOnDeck] = this.gblStartImg;
    }

    // slide next image underneath
    thediv.style.backgroundImage='url(' + this.gblImg[this.gblOnDeck] + ')';
  }

  this.setOpacity = function (obj, opacity) 
  {
    opacity = (opacity == 100)?99.999:opacity;
    
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
    
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;

    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;

    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
  }
}
2

This photo shuffler demo allows custom links for each image.

http://iamacamera.org/sandbox/linkedphotoshuffler/

3

Hi Paul,

Thanks for that link - That is exactly what I am looking for. However, I have 2 slide shows on the page. If you look at the code I provided, you can see it has 2 arrays. How can I modify this new photo shuffler with links so that it will let me have 2 slide shows? I have tried messing with the code myself, but no success yet.

Thanks

4

Pardon me for saying this but the code relies on several global variables, which is pretty much for a one-time only use.

You might be able to use iframes to achieve multiple uses of it, but if that fails, it might be time to look at something else that can also do the job.