random images on 1 page?

[willemr]

Hey all,

My plan is to make a webpage full of images of 10x10 pixels next to each other.
These images should randomly be either WHITE (2 of the 3 images in the "random" map), or BLACK (1 image).
I want those images right next to and right under each other (so IFRAMES and the like is not a solution) - the goal is to generate a random pattern of black 10x10 pixel images....

I suppose this should be rather easy to script for those who are no JS-virgins like me, however, i can't find any script on the net that does the random image trick for MORE THAN 1 IMAGE ON 1 PAGE.

I hope you guys can help me out! I'm getting kind of desperate.

Thanks !
W

[Alan]

I don't know about JS (not really my thing), but it can be done using PHP. If you really need to use JS, you may be able to re-engineer my code.

/**
 * An image model.
 * Filename: Image.php
 */
class Image
{

    private $_filename;
    private $_alt;

    public function __construct($filename, $alt = null)
    {
        $this->_filename = $filename;

        if ($alt != null) {
            $this->_alt = $alt;
        }
    }

    public function getFilename()
    {
        return $this->_filename;
    }

    public function setFilename($filename)
    {
        $this->_filename = (string) $filename;
    }

    public function getAlt()
    {
        return $this->_alt;
    }

    public function setAlt($alt)
    {
        $this->_alt = (string) $alt;
    }

}

/**
 * Stores a list of Image types.
 * Filename: ImageList.php
 */
class ImageList
{

    private $_images = array();

    /**
     * Populate the image list with some images (also verifies their type).
     */
    public function __construct(array $images = null)
    {
        if ($images != null) {
            try {
                foreach ($images as $image) {
                    $this->_typeCheckImage($image);
                }
            } catch (Exception $e) {
                exit('Error in class \'' . __CLASS__ . '\':' .  $e->getMessage());
            }

            $this->_images = $images;
        }
    }

    /**
     * Verifies that the given object is of type Image (using PHP's built-in type hinting).
     */
    private function _typeCheckImage(Image $image)
    {
         return $image;
    }
    
    /**
     * @return Image a random image.
     */
    public function getRandomImage()
    {
        if (!$this->isEmpty()) {
            return $this->_images[rand[0, $this->size() - 1]);
        }

        return null;
    }

    public function isEmpty()
    {
        if ($this->size() > 0) {
            return false;
        }

        return true;
    }

    public function size()
    {
        return count($this->_images);
    }

}

/**
 * Application code
 * Filename: test.phtml
 */

// Create an array with Image objects
$images = array(
    new Image('image1.png'),
    new Image('image2.png'),
    new Image('image3.png'),
    new Image('image4.png')
);

$list = new ImageList($images);

// The number of images to generate
$count = 10;

while ($count > 0) {
    $image = $list->getRandomImage();    

    if ($image != null) {
        echo '<img src="/images/' . $image->getFilename() . '"';
        
        if ($image->getAlt() != null) {
            echo ' alt="' . $image->getAlt() . '"';
        }

        echo ' />' . "\n";

        $count -= 1;
    } else {
        // End the loop
        $count = 0;
    }
} 

You should create a grid object and populate that with the images. Also, if you're worried about speed, feel free to use an object cache. (I wrote this code without testing or demoing it, so there may be some small issues with it.)

Feel free to pm me or reply if you want more details.