Multiple image randomizer?

[darktemp]

Hi, I am quite new with PHP so please bear with me.

I would like to update old code I have that I use for signatures. Currently it functions like so:

- Pulls one image from a folder at random, the file names are not directly associated with the code so it is possible to put new images without changing the code.
- Is able to display some text that used to be used, but was later disabled.

Problems:
- Current use requires multiple images.

Here is what the old code is like.

<?php
//
// Load all background images from specified path...
//
$images_ary = array();
$handle = @opendir('./images');
while( $file = @readdir($handle) )
{
    if( $file <> '.' && $file <> '..' )
    {
        $tmpary = explode('.', $file);
        $extension = strtolower($tmpary[count($tmpary)-1]);
        if( in_array($extension, array('gif', 'jpg', 'jpeg', 'png')) )
        {
            $images_ary[] = $file;
        }
    }
}
@closedir($handle);
 
if( count($images_ary) <= 0 )
{
    die("Sorry, no images found!");
}
 
//
// Randomly select an image...
//
$random = time() % count($images_ary);
$image_info = array(
    'image'    => $images_ary[$random]
);
 
 
$image_text_ary = array();
$image_text_ary[] = array(
    array(
        'x'     => 8,
        'y'     => 6,
        'color' => array(50, 100, 180),
        'font'  => 9,
        'text'  => ""
    )
);
 
 
$random = time() % count($image_text_ary);
$image_text = $image_text_ary[$random];
 
include('./includes/dynamic_gd_image.php');
?> 

What I would like it to do is display multiple images in it (like 5 images), I was thinking I probably have to rewrite the whole thing and draw a canvas and then make the program pull the images and I set the x/y coordinate so it can place it correctly.

If anyone has any suggestions to go about this please reply back. Just to be complete, I would like to retain the ability to randomly pick a image from a folder, the canvas should be 490 pixels x 130 pixels.

Thanks for your time!

[Thew]

If you only want to randomize some pictures, i here have a javascript for you:

<script language="JavaScript">
 
images = new Array(4);
 
images[0] = "<img src='1.jpg'>";
 
images[1] = "<img src='2.jpg'>";
 
images[2] = "<img src='3.jpg'>";
 
images[3] = "<img src='4.jpg'>";
 
index = Math.floor(Math.random() * images.length);
 
document.write(images[index]);
 
</script>
 

Good luck with it ;)

[darktemp]

My code already randomizes pictures listed in a folder. What I want is to have multiple images either from that folder or another folder stitched together into one image and displayed together.

Also I don't think JavaScript will work since it has to display an image in the format .jpg.

[Canabeez]

Let me get the straight, you want to have multiple images in the directory, but show like 5 images on the client side? You need to use some images library like ImageMagic or GD, but that might overload your host if you'll have some traffic. I'd suggest you use the client side to draw some images, something like:

<?php
    $images = array();
 
    $texts = array(
        "Text 1",
        "Text 2",
        "Text 3",
        "Text 4",
        "Text 5",
    );
 
    $handle = @opendir('./images');
    while( $file = @readdir($handle) ){
        if( $file != '.' && $file != '..' ){
            $tmpary = explode('.', $file);
            $extension = strtolower($tmpary[count($tmpary)-1]);
            if( in_array($extension, array('gif', 'jpg', 'jpeg', 'png')) ){
                $images[] = array(
                    "src" => $file,
                    "title" => $texts[ mt_rand(0,4) ]
                );
            }
        }
    }
 
    shuffle($images);
 
    echo "<script type=\"text/javascript\">var imagesData = " . json_encode(array_slise($images, 0, 4)) . ";</script>";
?>
<div id="signaturesContainer"></div>
<style type="text/css">
    div.signatureOverlay{
        position: absolute;
        left: 10px;
        top: 10px;
 
        font-family: Arial;
        font-size: 10pt;
        color: #000000;
    }
</style>
<script type="text/javascript">
    for(var i in imagesData){
        var image = imagesData[i];
 
        var imgDiv = document.createElement('div');
        div.style.position = 'relative';
 
        var img = document.createElement('image');
        img.src = image.src;
        img.title = image.title;
 
        var txt = document.createElement('div');
        txt.className = 'signatureOverlay';
        txt.innerHTML = image.title;
 
        imgDiv.appendChild(img);
        imgDiv.appendChild(txt);
        document.getElementById('signaturesContainer').appendChild(imgDiv);
    }
</script>
 

This should give you the main idea of what I meen. Didn't test the code thought, so tell me if you're having any problems with it.