PHP image slideshow auto

A solid implementation of an image slideshow gallery. Fully automated, no setup needed.

2020 update
1. Added responsive functionality for mobile devices
2. Moved pagination links to top so they don't move up and down because of different image heights.
3. A few HTML/CSS changes

<?php
/*
    PHP image slideshow - auto version - PHP > 5.0
*/
// set the absolute path to the directory containing the images
define('IMGDIR', '/var/www/html/mysite.com/html/images/slideshow/');
// same but for www
define('WEBIMGDIR', '/images/slideshow/');
// set session name for slideshow "cookie"
define('SS_SESSNAME', 'slideshow_sess');
// global error variable
$err = '';
// start img session
session_name(SS_SESSNAME);
session_start();
// init slideshow class
$ss = new slideshow($err);
if (($err = $ss->init()) != '')
{
	header('HTTP/1.1 500 Internal Server Error');
	echo $err;
	exit();
}
// get image files from directory
$ss->get_images();
// set variables, done.
list($curr, $caption, $first, $prev, $next, $last) = $ss->run();
/*
    slideshow class, can be used stand-alone
*/
class slideshow
{
    private $files_arr = NULL;
    private $err = NULL;

    public function __construct(&$err)
    {
        $this->files_arr = array();
        $this->err = $err;
    }
    public function init()
    {
        // run actions only if img array session var is empty
        // check if image directory exists
        if (!$this->dir_exists())
        {
            return 'Error retrieving images, missing directory';
        }
        return '';
    }
    public function get_images()
    {
        // run actions only if img array session var is empty
        if (isset($_SESSION['imgarr']))
        {
                $this->files_arr = $_SESSION['imgarr'];
        }
        else
        {
            if ($dh = opendir(IMGDIR))
            {
                while (false !== ($file = readdir($dh)))
                {
                    if (preg_match('/^.*\.(jpg|jpeg|gif|png)$/i', $file))
                    {
                        $this->files_arr[] = $file;
                    }
                }
                closedir($dh);
            }
            $_SESSION['imgarr'] = $this->files_arr;
        }
    }
    public function run()
    {
        $curr = 1;
        $last = count($this->files_arr);
        if (isset($_GET['img']))
        {
            if (preg_match('/^[0-9]+$/', $_GET['img'])) $curr = (int)  $_GET['img'];
            if ($curr <= 0 || $curr > $last) $curr = 1;
        }
        if ($curr <= 1)
        {
            $prev = $curr;
            $next = $curr + 1;
        }
        else if ($curr >= $last)
        {
            $prev = $last - 1;
            $next = $last;
        }
        else
        {
            $prev = $curr - 1;
            $next = $curr + 1;
        }
        // line below sets the caption name...
        $caption = str_replace('-', ' ', $this->files_arr[$curr - 1]);
        $caption = str_replace('_', ' ', $caption);
        $caption = preg_replace('/\.(jpe?g|gif|png)$/i', '', $caption);
        $caption = ucfirst($caption);
        return array($this->files_arr[$curr - 1], $caption, 1, $prev, $next, $last);
    }
    private function dir_exists()
    {
        return file_exists(IMGDIR);
    }
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Slideshow</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            font: 100% Verdana, Arial, Helvetica, sans-serif;
            font-size: 14px;
        }
	.gallery {
            border: 1px #ccc solid;
            max-width: 600px;
            margin: 0 auto;
            padding: 40px;
            text-align: center;
        }
        .gallery .gallery-nav {
            margin-bottom: 40px;
        }
        
        .gallery .gallery-nav a:first-child {
            margin-right: 10px;
        }
        .gallery .gallery-nav a:last-child {
            margin-left: 10px;
        }
        .gallery .gallery-image img {
            max-width: 100%;
            height: auto;
        }
        .gallery .gallery-image-label {
            color: #777;
        }
	a {
            color: #333;
        }
	a:hover {
            color: #cc0000;
        }
	.sp {
            padding-right: 40px;
        }
    </style>
</head>
<body>
    <div class="gallery">
        <div class="gallery-nav">
            <a href="?img=<?=$first;?>">First</a>
            <a href="?img=<?=$prev;?>">Previous</a>
            <span class="sp"></span>
            <a href="?img=<?=$next;?>">Next</a>
            <a href="?img=<?=$last;?>">Last</a>
        </div>
        <div class="gallery-image">
            <img src="<?=WEBIMGDIR;?><?=$curr;?>" alt="" />
        </div>
        <p class="gallery-image-label"><?=$caption;?></p>
    </div>
</body>
</html>

Usage

For a quick setup:

1. Create a folder for the slideshow images.
2. Drop images for the slideshow in the folder.
3. Grab the code, paste it in a file and call it "index.php"
4. Upload this file to a directory that will be the gallery (http://www.site.com/slideshow/)
5. Change lines 6 and 8 to correspond to your setup.
6. Run it (use URL from step 4)


Comments

pripankaj
Posted on 14.10.2019 10:15

thanx for sharing...........

guest
Posted on 13.09.2019 13:29

can it be automated to show every picture

guest
Posted on 13.09.2019 13:28

Java sucks the life out of the server/client if there 3000 plus photos in the directory

guest
Posted on 29.01.2019 01:17

Nice try. No cigar

guest
Posted on 11.08.2018 23:51

Belay that last request. I've got it to work! Thanks, I love it!!!

dwimyn
Posted on 27.02.2016 08:17

undefined

guest
Posted on 04.02.2016 08:28

can run in php 4.0.9.. tq

guest
Posted on 17.01.2016 13:13

Hi this ist a great Slideshow.
If there's a fade effect, they would be perfect.
Greetz

guest
Posted on 08.10.2015 11:50

Hi steve. PRIMA!!!, it works perfect, thank you!
But what if there are some videos in folder, when they also output on screen.
That'd be great. Are you able to have it in mind! Please!
THX. Alistair

guest
Posted on 03.06.2015 11:18

so great..Gracias!

guest
Posted on 04.11.2014 10:01

thank

guest
Posted on 31.10.2014 06:43

Nice one!!!!! Gr8 Job....

guest
Posted on 29.10.2014 18:04

nice start

guest
Posted on 08.06.2014 02:46

Thank you so much for this wonderful php SlideShow.

guest
Posted on 06.04.2013 12:11

Thanks

Add your comment

Need a COVID-19 website?
Preview
Or
Contact us

No, thanks!