Random Image Displayer

PHP Implementation

<?php
/**
 * Random Image Displayer - PHP Version
 */

// Configuration - list your images here
$images = [
    '/var/www/html/images/banners/banner1.gif',
    '/var/www/html/images/banners/banner2.gif',
    '/var/www/html/images/banners/banner3.jpg',
    '/var/www/html/images/banners/banner4.png',
];

// Select random image
$image = $images[array_rand($images)];

// Check if file exists
if (!file_exists($image)) {
    http_response_code(404);
    exit;
}

// Determine content type
$extension = strtolower(pathinfo($image, PATHINFO_EXTENSION));
$content_types = [
    'gif'  => 'image/gif',
    'jpg'  => 'image/jpeg',
    'jpeg' => 'image/jpeg',
    'png'  => 'image/png',
    'webp' => 'image/webp',
    'svg'  => 'image/svg+xml',
];

$content_type = $content_types[$extension] ?? 'application/octet-stream';

// Prevent caching for true randomness
header('Content-Type: ' . $content_type);
header('Cache-Control: no-cache, no-store, must-revalidate');
header('Pragma: no-cache');
header('Expires: 0');
header('Content-Length: ' . filesize($image));

// Output image
readfile($image);
exit;
?>

PHP with Weighted Rotation

<?php
/**
 * Random Image with Weighted Probability
 * Useful for ad rotation where some ads should appear more often
 */

$images = [
    ['path' => '/images/sponsor_platinum.png', 'weight' => 50],
    ['path' => '/images/sponsor_gold.png', 'weight' => 30],
    ['path' => '/images/sponsor_silver.png', 'weight' => 15],
    ['path' => '/images/sponsor_bronze.png', 'weight' => 5],
];

function weightedRandom($items) {
    $totalWeight = array_sum(array_column($items, 'weight'));
    $random = mt_rand(1, $totalWeight);

    $current = 0;
    foreach ($items as $item) {
        $current += $item['weight'];
        if ($random <= $current) {
            return $item['path'];
        }
    }
    return $items[0]['path'];
}

$selectedImage = weightedRandom($images);

// Output image (same as above)
// ...
?>

JavaScript Implementation (Recommended)

/**
 * Random Image Displayer - JavaScript Version
 * Client-side solution with no server requests per image
 */

class RandomImage {
    constructor(element, images, options = {}) {
        this.element = typeof element === 'string'
            ? document.querySelector(element)
            : element;

        this.images = images;
        this.options = {
            preload: true,
            fadeTransition: true,
            transitionDuration: 300,
            interval: 0,  // 0 = no auto-rotation
            ...options
        };

        this.currentIndex = -1;
        this.preloadedImages = [];

        this.init();
    }

    init() {
        if (this.options.preload) {
            this.preloadImages();
        }

        this.showRandom();

        if (this.options.interval > 0) {
            setInterval(() => this.showRandom(), this.options.interval);
        }
    }

    preloadImages() {
        this.images.forEach(src => {
            const img = new Image();
            img.src = src;
            this.preloadedImages.push(img);
        });
    }

    showRandom() {
        // Ensure we don't show the same image twice in a row
        let newIndex;
        do {
            newIndex = Math.floor(Math.random() * this.images.length);
        } while (newIndex === this.currentIndex && this.images.length > 1);

        this.currentIndex = newIndex;
        const src = this.images[newIndex];

        if (this.options.fadeTransition) {
            this.fadeTransition(src);
        } else {
            this.element.src = src;
        }
    }

    fadeTransition(src) {
        this.element.style.transition = `opacity ${this.options.transitionDuration}ms`;
        this.element.style.opacity = '0';

        setTimeout(() => {
            this.element.src = src;
            this.element.style.opacity = '1';
        }, this.options.transitionDuration);
    }

    // Manual control methods
    next() {
        this.currentIndex = (this.currentIndex + 1) % this.images.length;
        this.showImage(this.currentIndex);
    }

    prev() {
        this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
        this.showImage(this.currentIndex);
    }

    showImage(index) {
        const src = this.images[index];
        if (this.options.fadeTransition) {
            this.fadeTransition(src);
        } else {
            this.element.src = src;
        }
    }
}

// Usage examples:

// Basic usage
const banner = new RandomImage('#banner-image', [
    '/images/banner1.jpg',
    '/images/banner2.jpg',
    '/images/banner3.jpg'
]);

// With auto-rotation
const slideshow = new RandomImage('#slideshow', [
    '/images/slide1.jpg',
    '/images/slide2.jpg',
    '/images/slide3.jpg'
], {
    interval: 5000,  // Rotate every 5 seconds
    fadeTransition: true,
    transitionDuration: 500
});

// Background image rotation
class RandomBackground {
    constructor(element, images, options = {}) {
        this.element = document.querySelector(element);
        this.images = images;
        this.options = { interval: 10000, ...options };

        this.showRandom();
        if (this.options.interval > 0) {
            setInterval(() => this.showRandom(), this.options.interval);
        }
    }

    showRandom() {
        const src = this.images[Math.floor(Math.random() * this.images.length)];
        this.element.style.backgroundImage = `url('${src}')`;
    }
}

new RandomBackground('body', [
    '/images/bg1.jpg',
    '/images/bg2.jpg',
    '/images/bg3.jpg'
], { interval: 30000 });

HTML Usage Examples

<!-- Basic usage with CGI script -->
<img src="/cgi-bin/rand_image.pl" alt="Random Banner">

<!-- As a background image (inline style) -->
<body background="/cgi-bin/rand_image.pl">

<!-- Multiple random images on same page -->
<img src="/cgi-bin/rand_image.pl?set=banners" alt="Banner">
<img src="/cgi-bin/rand_image.pl?set=sponsors" alt="Sponsor">

<!-- Modern JavaScript approach (recommended) -->
<img id="random-banner" src="" alt="Random Banner">

<script>
const banners = [
    '/images/banners/summer-sale.jpg',
    '/images/banners/new-arrivals.jpg',
    '/images/banners/free-shipping.jpg'
];

document.getElementById('random-banner').src =
    banners[Math.floor(Math.random() * banners.length)];
</script>

<!-- Bootstrap carousel with random start -->
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="/images/slide1.jpg" class="d-block w-100" alt="Slide 1">
        </div>
        <div class="carousel-item">
            <img src="/images/slide2.jpg" class="d-block w-100" alt="Slide 2">
        </div>
        <div class="carousel-item">
            <img src="/images/slide3.jpg" class="d-block w-100" alt="Slide 3">
        </div>
    </div>
</div>

<script>
// Start carousel at random slide
const carousel = document.querySelector('#carouselExample');
const items = carousel.querySelectorAll('.carousel-item');
const randomStart = Math.floor(Math.random() * items.length);

items.forEach((item, index) => {
    item.classList.toggle('active', index === randomStart);
});
</script>