[SOLVED] Javascript Image Rotator

Stuart · September 9th, 2007, 12:41 PM

[RESOLVED]

Hi,

I recently found a great code to rotate images onLoad, either randomly or in order. Its a great code and all, but I would like to use it for something else, too. Unfortunately, I have not successfully customized it...

The code is:

Code:

<!doctype html public "-//w3c//dtd html 4.01 transitional//en"> 
<html> 
<head> 
<title>Javascript Image Rotater</title> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
<script type="text/javascript"> 
<!-- 
// The order of display : True - Random / False - Sequential 
var randomOrder = false; 
// Default Width of the image (if not set individually) 
var defaultWidth = 50; 
// Default Height of the image (if not set individually) 
var defaultHeight = 50; 
// An array of the images to be rotated (Image Path[, Width of the Image[, Height of the Image]]) 
// If the width and height is not specified, the Default value specified above will be used 
var arImg = new Array(); 
arImg[0] = ['images/1.gif']; 
arImg[1] = ['images/2.gif', 100, 100]; 
arImg[2] = ['images/3.gif']; 
arImg[3] = ['images/4.gif', 25, 25]; 
arImg[4] = ['images/5.gif']; 

function rotateImage(){ 
    if(randomOrder){ 
        index = Math.floor(Math.random() * arImg.length); 
    }else{ 
        var index = getCookie('rotate_image'); 
        index = index ? index : 0; 
        index = ++index % arImg.length; 
    } 
    (img = document.getElementById('image_id')).src = arImg[index][0]; 
    img.width = (arImg[index][1]) ? arImg[index][1] : defaultWidth; 
    img.height = (arImg[index][2]) ? arImg[index][2] : defaultHeight; 
    setCookie('rotate_image', index); 
} 

function getCookie(name) { 
    var sPos = document.cookie.indexOf(name + '='); 
    var len = sPos + name.length + 1; 
    if((!sPos) && (name != document.cookie.substring(0, name.length))){ 
        return null; 
    } 
    if(sPos == -1){ 
        return null; 
    } 
    var ePos = document.cookie.indexOf(';', len); 
    if(ePos == -1) ePos = document.cookie.length; 
    return unescape(document.cookie.substring(len, ePos)); 
} 

function setCookie(name, value, expires, path, domain, secure){ 
    var today = new Date(); 
    if(expires){ 
        expires = expires * 1000 * 3600 * 24; 
    } 
    document.cookie = name+'='+escape(value) + 
        ((expires) ? ';expires=' + new Date(today.getTime() + expires).toGMTString() : '') + 
        ((path) ? ';path=' + path : '') + 
        ((domain) ? ';domain=' + domain : '') + 
        ((secure) ? ';secure' : ''); 
} 
//--> 
</script> 
</head> 

<body onload="rotateImage()"> 
<img src="http://www.webforumz.com/images/1.gif" id="image_id" width="50" height="50" border="0" alt=""/> 
</body> 
</html>

(Source: http://www.weberdev.com/get_example-4598.html)

... and what I want to do is use the same code (with different variables) to also rotate captions for the images onLoad, in order. This is tricky, since the captions need to correspond with the images, otherwise, there's no point. The caption is inside a paragraph:

Code:

<p id="caption">...caption text to be rotated...</p>

If anyone can help me, that would be great.

SWagner

Rakuli · September 9th, 2007, 01:14 PM

Okay you should be able to do this by adding another index to each image array...

Similar to :

Code:

<!doctype html public "-//w3c//dtd html 4.01 transitional//en"> 
<html> 
<head> 
<title>Javascript Image Rotater</title> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
<script type="text/javascript"> 
<!-- 
// The order of display : True - Random / False - Sequential 
var randomOrder = false; 
// Default Width of the image (if not set individually) 
var defaultWidth = 50; 
// Default Height of the image (if not set individually) 
var defaultHeight = 50; 
// Default Caption
var defaultCaption = "This picture can't be described";
// An array of the images to be rotated (Image Path[, Width of the Image[, Height of the Image[,Caption for image]]]) 
// If the width and height is not specified, the Default value specified above will be used 
var arImg = new Array(); 
arImg[0] = ['images/1.gif', false, false, "This is a caption"]; 
arImg[1] = ['images/2.gif', 100, 100, "This is too"]; 
arImg[2] = ['images/3.gif']; // No caption for this one
arImg[3] = ['images/4.gif', 25, 25]; // Or this one
arImg[4] = ['images/5.gif', false, false, "But this one does"]; 

function rotateImage(){ 
    if(randomOrder){ 
        index = Math.floor(Math.random() * arImg.length); 
    }else{ 
        var index = getCookie('rotate_image'); 
        index = index ? index : 0; 
        index = ++index % arImg.length; 
    } 
    (img = document.getElementById('image_id')).src = arImg[index][0]; 
    img.width = (arImg[index][1]) ? arImg[index][1] : defaultWidth; 
    img.height = (arImg[index][2]) ? arImg[index][2] : defaultHeight; 
 
    if (arImg[index][3]) 
      document.getElementById('caption').innerHTML = arImg[index][3];
    else
      document.getElementById('caption').innerHTML =  defaultCaption;
     

    setCookie('rotate_image', index); 
} 

function getCookie(name) { 
    var sPos = document.cookie.indexOf(name + '='); 
    var len = sPos + name.length + 1; 
    if((!sPos) && (name != document.cookie.substring(0, name.length))){ 
        return null; 
    } 
    if(sPos == -1){ 
        return null; 
    } 
    var ePos = document.cookie.indexOf(';', len); 
    if(ePos == -1) ePos = document.cookie.length; 
    return unescape(document.cookie.substring(len, ePos)); 
} 

function setCookie(name, value, expires, path, domain, secure){ 
    var today = new Date(); 
    if(expires){ 
        expires = expires * 1000 * 3600 * 24; 
    } 
    document.cookie = name+'='+escape(value) + 
        ((expires) ? ';expires=' + new Date(today.getTime() + expires).toGMTString() : '') + 
        ((path) ? ';path=' + path : '') + 
        ((domain) ? ';domain=' + domain : '') + 
        ((secure) ? ';secure' : ''); 
} 
//--> 
</script> 
</head> 

<body onload="rotateImage()"> 
<img src="images/1.gif" id="image_id" width="50" height="50" border="0" alt=""/> 
<p id="caption"></p>
</body> 
</html>

So basically using the same principle as found in the checking the existence of img width and height the script will now check for a caption and update the paragraph accordingly - or it will default to your chosen text.

Cheers,

Rakuli

Stuart · September 9th, 2007, 01:53 PM

Thanks Rakuli,

It works very well. I put in the correct img srcs, and my pictures and captions come up the way they're supposed to.

One other question, would there be a way to use class="caption" instead of id="caption"? It fits better with my CSS document: p.caption

SWagner

Rakuli · September 10th, 2007, 01:45 AM

If you only have the one tag p.caption you can use p#caption to address the paragraph by ID instead.

Stuart · September 14th, 2007, 07:59 PM

All right, I got it all set to p#caption now.
Thanks again for the advice