[SOLVED] Javascript Image Rotator

Stuart · #1 (**permalink**) Sep 9th, 2007, 16:41

[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: Select all

<!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: Select all

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

If anyone can help me, that would be great.

SWagner

Rakuli · #2 (**permalink**) Sep 9th, 2007, 17:14

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

Similar to :

Code: Select all

<!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 · #3 (**permalink**) Sep 9th, 2007, 17:53

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 · #4 (**permalink**) Sep 10th, 2007, 05:45

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

Stuart · #5 (**permalink**) Sep 14th, 2007, 23:59

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
PNG problem with php image rotator	bkbdesign	Web Page Design	1	Apr 10th, 2008 18:22
[SOLVED] multiple image rollover not restoring image	snappy	JavaScript Forum	4	Nov 5th, 2007 14:38
[SOLVED] Javascript/PHP Image Rotator	Stuart	PHP Forum	28	Oct 21st, 2007 22:37
[SOLVED] display image if javascript not enabled	Voodoochilli	JavaScript Forum	1	Oct 4th, 2007 13:58
Image rotator	aloysius	JavaScript Forum	2	Oct 2nd, 2006 22:12

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
[SOLVED] Javascript Image Rotator