Simple PHP Class to put images into HTML slider format

A

Anonymous

Guest
This simple class will enable you to put all the images of a particular directory into HTML format so that you can use it for a slider or rotator. I'm only providing the PHP, for you should be able to create your own slider from the HTML that is generated.

Here's my index.php of my website:

Code:
<?php
require_once '../private/initialize.php';

use Library\Calendar\Calendar;
use Library\Display\Display;
use Library\Slider\Slider;

$slider = new Slider(); // Create and instance of the Slider Class
$display = new Display();

$calendar = new Calendar();

$calendar->phpDate();
require_once '../private/includes/header.inc.php';
?>
<div class="container mainPage">
    <div id="carousel" class="span6">
        <?php
            /*
             * Dump all the images from a particular directory into HTML format, so that they can be used for a simple 
             * JavaScript (or CSS) Slider. 
             */
            $slider->outputImages();
        ?>
    </div>
    <div id="info" class="span6">
        <?php
        $display->read($basename, 'middle');
        $display->display();
        ?> 
    </div>
</div>
<div class="container mainContent">
    <article class="content">
        <?php
        $display->read($basename, 'left');
        $display->display();
        ?> 
    </article>
    <article class="content">
        <?php
        $display->read($basename, 'right');
        $display->display();
        ?>         
    </article>
</div>
<?php
require_once '../private/includes/footer.inc.php';

The setting up the HTML portion is pretty straight forward in my opinion and here's the class that actually generates the properly formatted HTML for a slider.
Code:
<?php

namespace Library\Slider; // Uses a namespace so it doesn't  colide with other Classes:

class Slider {

    protected $files = [];
    /*
     * Supported image files for the slider
     */
    protected $supported_file = [
        'gif',
        'jpg',
        'jpeg',
        'png'
    ];
    protected $temp = \NULL;
    protected $image = \NULL;
    protected $ext = \NULL;

    /*
     * "assets/uploads/*.* is the default directory for the slide show.
     */

    public function __construct(string $image_dir = "assets/uploads/*.*", int $num = 7) {
        $this->temp = glob($image_dir); // Grab all the files in that directory:
        $this->files = array_reverse($this->temp);
        /* If files is larger than a certain total number of files wanted to use. */
        if (count($this->files) > $num) {
            array_splice($this->files, count($this->files) - (count($this->files) - $num));
        }
    }

    /*
     * If you want to use more than one slider on your website.
     */

    public function setDirectory(string $image_dir = \NULL, int $num = 7) {
        self::__construct($image_dir, $num);
    }

    public function outputImages() {
        echo '<ul id="slides">' . "\n";
        for ($i = 0; $i < count($this->files); $i++) {
            $this->image = $this->files[$i]; // Just making it easier to understand that $files[$i] are the individual image in the loop:
            $this->ext = strtolower(pathinfo($this->image, PATHINFO_EXTENSION));
            if (in_array($this->ext, $this->supported_file)) { /* Use an if statment to place images in HTML format. */
                /*
                 * echo basename($image); ### Shows name of image to show full path use just $image:
                 */
                if ($i === 0) {
                    echo '<li class="slide showing"><img src="' . htmlspecialchars($this->image) . '" alt="Slide Show Image"></li>' . "\n";
                } else {
                    echo '<li class="slide"><img src="' . htmlspecialchars($this->image) . '" alt="Slide Show Image"></li>' . "\n";
                }
            } else {
                continue;
            }
        }
        echo "</ul>\n";
    }

}

Now I haven't fully tested it out, but it works pretty darn good and if you want you can even steal the CSS and Javascript for the slider from my website. Though it's just a basic slider (actually it a rotator). Hope this helps someone.
 
Back
Top