A simple JQuery Photo Rotator

A long time ago I wrote a photo rotator in jQuery and I dusted it off for my website (see signature). I have posted the basic version on codepen: http://codepen.io/Strider64/pen/LNOVzK. It’s not exactly how I have it on my website, well the HTML, CSS, and JQuery is. I did add PHP into the mix, so I don’t have to keep writing anchor tags. Anyways, you’ll need JQuery in order to run this.

Ah what the heck for those who know PHP, I’ll show you the php portion: :wink:

Grab the pictures from a directory:
[php]$directory = “lib/images/slideshow”;
$myFiles = scandir($directory);

for ($i = 0; $i < count($myFiles); $i++) {
if ($myFiles[$i] !== ‘.’ && $myFiles[$i] !== ‘…’) {
$file_new[] = $myFiles[$i];
}
}[/php]

then simply display them like the following:
[php]



    <?php
    $x = 1;
    foreach ($file_new as $key => $value) {
    $current = ($x === 1) ? ‘class=“current”’ : NULL; // Intial position of the current image in slideshow:
    echo ‘<li ’ . $current . ’ data-picture="’ . $x . ‘">Pepster\'s Place Slideshow’;
    $x++;
    }
    ?>

Start
</div>
<!-- END OF PICTURE ROTATOR -->    [/php]
Sponsor our Newsletter | Privacy Policy | Terms of Service