Roatating Multiple Images

**slickwilly789** · 12-15-2007, 09:05 PM

I'm fairly new to Javascripting, so please if can bear with me.. lol... alright I'm trying to call up 4 sets of images at once... all random.. but with their corresponding links... So far I have the script set up to reload the random images on reload or a refresh of the browser... I've done pretty much all that I know how to do. I'm aiming at having the images randomly rotate in and out per a set time.... I've tried to get them images to fade in and out via an opacity route... but its not working

Code:

var myimages=new Array();
//specify random images below. You can have as many as you wish
myimages[0]="images/RotateImages/KirbyLitho.jpg";
myimages[1]="images/RotateImages/KirbyLitho2.jpg";
myimages[2]="images/RotateImages/KirbyLitho3.jpg";
myimages[3]="images/RotateImages/KirbyLitho4.jpg";
myimages[4]="images/RotateImages/KirbyLitho5.jpg";
myimages[5]="images/RotateImages/KirbyLitho6.jpg";

//specify corresponding links below
var imagelinks=new Array()
imagelinks[0]="casestudies/case1.html"
imagelinks[1]="casestudies/case1.html"
imagelinks[2]="casestudies/case1.html"
imagelinks[3]="casestudies/case1.html"
imagelinks[4]="casestudies/case1.html"
imagelinks[5]="casestudies/case1.html"

function random_imglink()
{
 var ry=Math.floor(Math.random()*myimages.length)
 
 document.write('<a target="_blank" href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a><br /><br />')
 
 myimages.splice(ry,1);
 imagelinks.splice(ry,1);
}

random_imglink();
random_imglink();
random_imglink();
random_imglink();


//set opacity options here

function setOpacity(el, value) {
  el.style.opacity = value / 100;
  el.style.filter = "alpha(opacity=" + value + ")";
}

function unfadeText(el, tg) {
  var v = el.style.opacity * 100 + 1;
  if(v > 100) {
    setOpacity(el, 100);
    setTimeout(bundleFunction(null, fadeText, [el, tg]), 15000);
    return;
  }
  setOpacity(el, v);
  setTimeout(bundleFunction(null, unfadeText, [el, tg]), 10);
}

function fadeText(el, tg) {
  var v = el.style.opacity * 100 - 1;
  if(v < 0) {
    setOpacity(el, 0);
    rotateText(el, tg);
    //or... setTimeout(bundleFunction(null, myimages, [el, tg]), NUMBER);
    return;
  }
  setOpacity(el, v);
  setTimeout(bundleFunction(null, myimages, [el, tg]), 10);
}

function bundleFunction(context, func, args) {
  context = context || null;
  if(typeof func == "string" && context)
    func = context[func];
  if(!args)
    args = [];
  else if(!(args instanceof Array))
    args = [args];
  return function() {
    return func.apply(context, args);
  };

**meloncholy** · 08:23 PM

To be honest, I'm not sure why your script isn't working (tired...). However, I was able to get the original one to do what you want (I assume you got the code from here).

This is a very lightly modified version of that script. It could do with tidying up to remove references to, say, restaurants:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    
    <script type="text/javascript">
    function rotateText(el, textGroup) {
  setOpacity(el, 0);
  var t = rotateText.texts[textGroup];
  var t = t[Math.floor(Math.random() * (t.length - 1))];
  el.src = t;
  unfadeText(el, textGroup);
}
rotateText.texts = {
  imgs: [
    "http://www.webmaster-talk.com/images/RotateImages/dismount-100.jpg",
    "http://www.webmaster-talk.com/images/RotateImages/one-arm-slide-100.jpg",
    "http://www.webmaster-talk.com/images/RotateImages/serptent-100.jpg",
    "http://www.webmaster-talk.com/images/RotateImages/basic-invert-100.jpg",
    "http://www.webmaster-talk.com/images/RotateImages/chopper-climb-100.jpg",
    "http://www.webmaster-talk.com/images/RotateImages/transition-up-pole-100.jpg"
  ]
};

function setOpacity(el, value) {
  el.style.opacity = value / 100;
  el.style.filter = "alpha(opacity=" + value + ")";
}

function unfadeText(el, tg) {
  var v = el.style.opacity * 100 + 1;
  if(v > 100) {
    setOpacity(el, 100);
    setTimeout(bundleFunction(null, fadeText, [el, tg]), 2000);
    return;
  }
  setOpacity(el, v);
  setTimeout(bundleFunction(null, unfadeText, [el, tg]), 10);
}

function fadeText(el, tg) {
  var v = el.style.opacity * 100 - 1;
  if(v < 0) {
    setOpacity(el, 0);
    rotateText(el, tg);
    //or... setTimeout(bundleFunction(null, rotateText, [el, tg]), NUMBER);
    return;
  }
  setOpacity(el, v);
  setTimeout(bundleFunction(null, fadeText, [el, tg]), 10);
}

function bundleFunction(context, func, args) {
  context = context || null;
  if(typeof func == "string" && context)
    func = context[func];
  if(!args)
    args = [];
  else if(!(args instanceof Array))
    args = [args];
  return function() {
    return func.apply(context, args);
  };
}
</script>
</head>
<body>

<div>
  <img style="width: 100px; " id="imgs"></div>
  <script type="text/javascript">
    rotateText(document.getElementById("imgs"), "imgs");
    //rotateText(document.getElementById("authors"), "authors");
    //rotateText(document.getElementById("restaurants"), "restaurants");
  </script>
</div>
</body>
</html>

Note that this code won't work in browsers that don't support the opacity style, so you'd need to add bits for -moz-opacity and filter alpha as well.

But if I were you, I'd look at jQuery or another library - it's much more high level and, well, nicer. The following does the same as before, but more robustly, to any number of image elements of class RotateImg. Note that, apart from function and array declarations, there are only 3 lines of code.

Which kinda rocks, if you ask me.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    
    <script type="text/javascript" src="jquery.js"></script>
    
    <script type="text/javascript">
imgs = [
    "http://www.webmaster-talk.com/images/RotateImages/dismount-100.jpg",
    "http://www.webmaster-talk.com/images/RotateImages/one-arm-slide-100.jpg",
    "http://www.webmaster-talk.com/images/RotateImages/serptent-100.jpg",
    "http://www.webmaster-talk.com/images/RotateImages/basic-invert-100.jpg",
    "http://www.webmaster-talk.com/images/RotateImages/chopper-climb-100.jpg",
    "http://www.webmaster-talk.com/images/RotateImages/transition-up-pole-100.jpg"];

    $(document).ready(function()
    {
        setInterval($(".RotateImg").rotateImgs, 10000);
    });

    $.fn.extend({ rotateImgs : function()
    {    
        $(".RotateImg").fadeOut("slow", function()
        {
            $(this).attr("src", imgs[Math.floor(Math.random() * imgs.length)]).fadeIn("slow");
        });
    }});
    
    </script>
</head>
<body>
    <div>
        <img class="RotateImg" src="http://www.webmaster-talk.com/images/RotateImages/dismount-100.jpg" />
        <img class="RotateImg" src="http://www.webmaster-talk.com/images/RotateImages/dismount-100.jpg" />
        <img class="RotateImg" src="http://www.webmaster-talk.com/images/RotateImages/dismount-100.jpg" />
    </div>
</body>
</html>