Automatic Image slideshow Using PHP

Today, We want to share with you php slideshow.In this post we will show you image slider in php, hear for automatic image slider in html css javascript we will give you demo and example for implement.In this post, we will learn about Create Dynamic Image Slider using PHP with jQuery with an example.

PHP image slideshow auto

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

2021 – March update

  • 1. Added new code responsive functionality for mobile devices
  • 2. Moved some added more pagination links to top so they don’t move up as well as down because of different image heights.
  • 3. A some HTML/CSS updation

PHP Automatic image slider in html css

index.php

<?php
/*
    PHP image galleries - auto version - PHP > 5.0
*/

define('IMGDIR', '/var/www/html/mysite.com/html/images/galleries/');

define('WEBIMGDIR', '/images/galleries/');
// set session name for galleries "cookie"
define('SS_SESSNAME', 'galleries_sess');

$err = '';

session_name(SS_SESSNAME);
session_start();
// init galleries class
$ss = new galleries($err);
if (($err = $ss->init()) != '')
{
	header('HTTP/1.1 500 Internal Server Error');
	echo $err;
	exit();
}

$ss->get_images();

list($is_active, $img_cpt_name, $first, $prev, $next, $last) = $ss->run();
/*
    galleries class, can be used stand-alone
*/
class galleries
{
    private $gallerise_array = NULL;
    private $err = NULL;

    public function __construct(&$err)
    {
        $this->gallerise_array = 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()
    {
        if (isset($_SESSION['imgarr']))
        {
                $this->gallerise_array = $_SESSION['imgarr'];
        }
        else
        {
            if ($dh = opendir(IMGDIR))
            {
                while (false !== ($file = readdir($dh)))
                {
                    if (preg_match('/^.*\.(jpg|jpeg|gif|png)$/i', $file))
                    {
                        $this->gallerise_array[] = $file;
                    }
                }
                closedir($dh);
            }
            $_SESSION['imgarr'] = $this->gallerise_array;
        }
    }
    public function run()
    {
        $is_active = 1;
        $last = count($this->gallerise_array);
        if (isset($_GET['img']))
        {
            if (preg_match('/^[0-9]+$/', $_GET['img'])) $is_active = (int)  $_GET['img'];
            if ($is_active <= 0 || $is_active > $last) $is_active = 1;
        }
        if ($is_active <= 1)
        {
            $prev = $is_active;
            $next = $is_active + 1;
        }
        else if ($is_active >= $last)
        {
            $prev = $last - 1;
            $next = $last;
        }
        else
        {
            $prev = $is_active - 1;
            $next = $is_active + 1;
        }
        // line below sets the img_cpt_name name...
        $img_cpt_name = str_replace('-', ' ', $this->gallerise_array[$is_active - 1]);
        $img_cpt_name = str_replace('_', ' ', $img_cpt_name);
        $img_cpt_name = preg_replace('/\.(jpe?g|gif|png)$/i', '', $img_cpt_name);
        $img_cpt_name = ucfirst($img_cpt_name);
        return array($this->gallerise_array[$is_active - 1], $img_cpt_name, 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>automatic image slider in html css - www.pakainfo.com</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            font: 100% Verdana, Arial, Helvetica, sans-serif;
            font-size: 14px;
        }
	.tamilrokers {
            border: 1px #ccc solid;
            max-width: 600px;
            margin: 0 auto;
            padding: 40px;
            text-align: center;
        }
        .tamilrokers .tamilrokers-nav {
            margin-bottom: 40px;
        }
        
        .tamilrokers .tamilrokers-nav a:first-child {
            margin-right: 10px;
        }
        .tamilrokers .tamilrokers-nav a:last-child {
            margin-left: 10px;
        }
        .tamilrokers .tamilrokers-image img {
            max-width: 100%;
            height: auto;
        }
        .tamilrokers .tamilrokers-image-label {
            color: #777;
        }
	a {
            color: #333;
        }
	a:hover {
            color: #cc0000;
        }
	.sp {
            padding-right: 40px;
        }
    </style>
</head>
<body>
    <div class="tamilrokers">
        <div class="tamilrokers-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="tamilrokers-image">
            <img src="<?=WEBIMGDIR;?><?=$is_active;?>" alt="" />
        </div>
        <p class="tamilrokers-image-label"><?=$img_cpt_name;?></p>
    </div>
</body>
</html>

Usage

For a quick setup:

  • 1. Make a folder for the slideshow Galary images.
  • 2. Drop all Galary images for the slideshow in the folder.
  • 3. Grab the code, paste it in a file as well as call it “index.php”
  • 4. Upload this file to a directory that will be the gallery (http://www.domain_name.com/galleries/)
  • 5. Update lines number 6 and number 8 to correspond to your need based setup.
  • 6. last step You can Run it (use URL from phase 4)

I hope you get an idea about PHP Image Slideshow with jQuery using Multiple File Upload.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.