Javascript crossfade gallery not working

programming web dev
1

Hi all,

I am having a bit of trouble with a javascript crossfade gallery, the main problem is the gallery is not running through the images from the array in the script file. Can anyone help. Ive attached both the script and the CSS file that I am using.

Cheers

Deringer


<script type="text/javascript">

  var gblPhotoShufflerDivId = "photodiv";
  var gblPhotoShufflerImgId = "photoimg"; 
  var gblImg = new Array(
    "images/slideshow_image_1.jpg",
    "images/slideshow_image_2.jpg",
    "images/slideshow_image_3.jpg",
    "images/slideshow_image_1.jpg"
    );
  var gblPauseSeconds = 7.25;
  var gblFadeSeconds = .85;
  var gblRotations = 1;

  // End Customization section
  
  var gblDeckSize = gblImg.length;
  var gblOpacity = 100;
  var gblOnDeck = 0;
  var gblStartImg;
  var gblImageRotations = gblDeckSize * (gblRotations+1);

  window.onload = photoShufflerLaunch;
  
  function photoShufflerLaunch()
  {
      var theimg = document.getElementById(gblPhotoShufflerImgId);
        gblStartImg = theimg.src; // save away to show as final image

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

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

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

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

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

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

  function setOpacity(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;
  }

</script>



  <style type="text/css">

body 
{
 font-family: verdana, tahoma, sans-serif;
 font-size:.825em;
 background-color:#333;
 margin:0;
 padding:0;
}

#wrap {
 margin: 0 auto 0 auto;
 padding: 2em;
 border-left: 3px solid #000;
 border-right: 3px solid #000;
 width: 500px;
 background-color:#fff;
}

pre {
 padding:10px;
 border: 1px dotted #eee;
 background-color:#f9f9f9;
}


#photodiv {
  background-repeat: no-repeat;
}


</style>

Heres the div from the html page.



<div id="photodiv">
<img id="photoimg" src="images/slideshow_image_1.jpg" />

</div>