[SOLVED] Javascript/PHP Image Rotator

Stuart · #1 Oct 14th, 2007, 23:38

I have the following code to rotate images and a corresponding caption:

<!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>

Would there be a way to do this with PHP instead...
If this is too complicated, don't bother trying. Otherwise, I'm interested.

Thanks,
SWagner

c010depunkk · #2 Oct 15th, 2007, 04:01

It most certainly is and I'm willing to bet that it's much faster doing this server-side....

Check out the PHP image functions.

Stuart · #3 Oct 15th, 2007, 11:42

Quote:

Originally Posted by c010depunkk

It most certainly is and I'm willing to bet that it's much faster doing this server-side....

Do you mean that it is too complicated or that there is a way of doing it?

karinne · #4 Oct 15th, 2007, 13:10

I have used this one in the past - Simple PHP randomizer - I'm sure you could easily integrate some caption from this code.

hth

c010depunkk · #5 Oct 15th, 2007, 14:26

Quote:

Originally Posted by swagner

Do you mean that it is too complicated or that there is a way of doing it?

No, it's not complicated and yes, I'm sure there is a way of doing it. I've just never done much myself with the image functions so I can't tell you exactly how.

Stuart · #6 Oct 15th, 2007, 22:09

Quote:

Originally Posted by karinne

I have used this one in the past - Simple PHP randomizer - I'm sure you could easily integrate some caption from this code.

I looked at the script. How would you integrate it? I would also like to make it consecutive, not random. Any help on how to do this would be great...

Rakuli · #7 Oct 16th, 2007, 06:27

From what I can see, you would not have to use image functions at all.

It's just a matter of loading a different each time? If that's the case, a function like the one I whipped up below should work

PHP: Select all


<?php



function rotateImages()

{

    // The default values

    $defaults = array('width'     => 250,

                      'height'    => 400,

                      'caption' => 'Guinea pigs are pretty good at martial arts'

                      );

    

    // The images

    $images = array();

    

    $images[] = array ('url'         => 'something.jpg',

                        'width'     => 100,

                        'height'    => 100,

                        'caption'     => 'This is a guinea pig doing a fly-kick');

    // etc/...........

    

    // How many images?

    $numImages = count($images);

    

    // get the last image

    if (isset($_COOKIE['image_index']) && $_COOKIE['image_index'] < $numImages)

        $currentImage = int ($_COOKIE['image_index']);

    else

        $currentImage = 0;

    

    // get the img and caption ready    

    $output = array();

    

    $output['image'] = '<img src="' . $images[$currentImage]['url'] . '" height="' . (isset($images[$currentImage]) ? $images[$currentImage]['height'] : $defauls['height']) . '" width="' . (isset($images[$currentImage]) ? $images[$currentImage]['width'] : $defaults['width']) . '" />'; // The image

    $output['caption'] = '<div>' . (isset($images[$currentImage]) ? $images[$currentImage]['caption'] : $defaults['caption']) . '</div>'; // the caption

    

    

    // set the cookie

    $_COOKIE['image_index'] = $currentImage + 1;

    

    // return the output array so that you can call the function into a variable then output to screen

    // eg. $img = rotateImages()

    // echo $img['image'];

    // echo $img['caption'];



return $output;

}

?>

Cheers,

c010depunkk · #8 Oct 16th, 2007, 11:44

Oh, I thought you meant rotate as in "turn the images 90 degrees"....

Stuart · #9 Oct 16th, 2007, 12:49

Quote:

Originally Posted by c010depunkk

Oh, I thought you meant rotate as in "turn the images 90 degrees"....

No, sorry. I meant "rotate" as in change when body loads. Rakuli's code looks good. I'll try it...

Stuart · #10 Oct 17th, 2007, 00:07

Rakuli,
Thanks for the code. There is just one problem. The following appears on my page:

Code: Select all

Parse error:  syntax error, unexpected T_STRING in /opt/www/courses2-port80/wagnerlab/index.php on line 108

Line 108 contains this:

PHP: Select all


$defaults = array('width'   => 740,

(The beginning of the array that sets the defaults)

Any idea why this happens?

Rakuli · #11 Oct 17th, 2007, 05:57

Can you show the preceding code because it means a statement has not been ended correctly in the code above it.

Thanks

Stuart · #12 Oct 17th, 2007, 11:21

Actually, the problem sort of fixed itself (not occurring anymore). But now, there is another small issue - the image is not being displayed...

Rakuli · #13 Oct 17th, 2007, 11:25

Did you call the function and echo it to your page?

Stuart · #14 Oct 17th, 2007, 11:30

Do you mean the examples you gave me within the comments?

Rakuli · #15 Oct 17th, 2007, 11:34

Yes, if you have changed the code you would need to echo the equivalent

Stuart · #16 Oct 17th, 2007, 11:38

I used pretty much the exact code you gave me, of course adding the other images and changing the image sources, heights, widths, and captions...

PS: If I add images, do I need to put a number in the []s after $images?

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