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)
Contribute
Want to share your source code? Create your account and join our community!
Comments
guest
Posted on 16.12.2020 15:38
Great work. Every step in you process flawless
Thanks
guest
Posted on 01.09.2020 16:18
This is very nice and easy to implement. I need the array of images sorted by timestamp though. How would i do that?
guest
Posted on 15.08.2020 22:46
This is a nice script for people that upload IP camera images that have auot-naming. My question is, can the sorting of the images be manipulated in the code somehow? I'm not a 'guru' in PHP so I wouldn't know what could be done to allow this. Right now the images seem to be kind of randomized for loading, I'd like to be able to either go off the date of the actual file/image or a naming sequence based off of 0 to infinity...
I appreciate this - Jerris
guest
Posted on 23.06.2020 12:43
Ehi people! Images are not displayed even if names are loaded and captions are visible...any tips? thanks dudes
pripankaj
Posted on 14.10.2019 12:15
thanx for sharing...........
guest
Posted on 13.09.2019 15:29
can it be automated to show every picture
guest
Posted on 13.09.2019 15:28
Java sucks the life out of the server/client if there 3000 plus photos in the directory
guest
Posted on 29.01.2019 02:17
Nice try. No cigar
guest
Posted on 12.08.2018 01:51
Belay that last request. I've got it to work! Thanks, I love it!!!
dwimyn
Posted on 27.02.2016 09:17
undefined
guest
Posted on 04.02.2016 09:28
can run in php 4.0.9.. tq
guest
Posted on 17.01.2016 14:13
Hi this ist a great Slideshow.
If there's a fade effect, they would be perfect.
Greetz
guest
Posted on 08.10.2015 13: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 13:18
so great..Gracias!
guest
Posted on 04.11.2014 11:01
thank
Add your comment