Simple Image Slideshow with jQuery and PHP

I really liked Jon Raasch’s jquery-powered slideshow, but integrating it into a page requires a bunch of steps:

  1. Add the jQuery library
  2. Add the slideshow javascript function
  3. Add the CSS with opacity and z-layer set properly
  4. Upload the images for the slideshow someplace
  5. Enumerate the images’ URLs that you want to cycle through

Adding images is tedious (you have to upload AND update the image list), and there’s no clean support for multiple slideshows per page. I wanted a process that made integration into other pages trivial.

I decided that an IFRAME to host the slideshow would keep jQuery and the slideshow CSS partitioned away from the rest of the embedding page, and would let adding slideshows to new pages have an easy-to-follow recipe, no matter what was already going on in the existing page. The IFRAME needed the template HTML, and if I used PHP, I could generate the image list for the slideshow automatically from the images that live in the same directory as the PHP script.

So here are the new instructions, using this IFRAME approach:

  1. Make a directory that will contain the images you want in the slideshow. For this example it’s “slideshow-demo
  2. Copy this file into the “slideshow-demo”  directory and name it index.php
  3. Copy the images for the slideshow into the directory.
    Remember to resize all the images to the same dimensions.
  4. On the page you want to embed the slideshow, add
    Replace the width and height to be the common dimension of your images

Here’s a working demo:

Posted in Photography, Technical HOWTOs Tagged with: , ,
  • http://foreverfrenchbulldogs.com/ Randy Baker

    Hello,
    I am looking for code for a slideshow. I like your idea for easily adding new slideshows to an existing page.
    Can you send me the code for your slideshow? I am not familiar with php – can you help me out?
    Thanks,
    Randy

  • http://matthew.mceachen.us matthew

    If your hosting provider only supports ASP, the index.php (that is here) could certainly be rewritten in ASP — just replace the 2 PHP code chunks that iterate through the current directory with ASP code.

  • Admin

    Hi Matt, you are a great person you just sved me alot of time and money, i was using  jquery with my smarty and didnt work on IE
    but now after i use the iframe and your code , i have fixed everything and you made my life easier today  :) thanks alot,

  • Rich

    Any way to make the entire iFrame link to something?…or make the images in the slideshow link to something?

  • Jerseysal

    Matt, Good job! Here is my problem: I have many pix of varying sizes. I want to center them in the frame. So far I am having no luck. I may try to use php to calculate the “top” and “left” values. Any ideas?

  • Jerseysal

    Never mind… The following did what I need. Not pretty but it works.

    body {padding:0; margin:0;}
    #slideshow {position:relative; height:600px;width:400px}
    #slideshow IMG { z-index:8; opacity:0.0;}
    #slideshow IMG.active {z-index:10; opacity:1.0;}
    #slideshow IMG.last-active {z-index:9;}

    <?php
    $first = true;
    foreach ($files as $file) {
    list($wide,$high)= getimagesize($file);
    $left = (600-$wide)/2;
    If($left < 0 ) $left = 0;
    echo '';
    $first = false;
    }
    ?>

    This eliminates the requirement of having everything the same size as long as the frame is big enough…

  • Sanjumon

    Error message found while run time: Notice: Undefined index: count in C:wampwww12 1 2014slideshow-demoindex.php on line 18..

    But slider work properly, So how to avoid this Notice?

  • Carlos Costa

    Hello, its possible add videos to the slideshow? Thank you

  • ihsaaan

    Error message found while run time: Notice: Undefined index: count in slideshow-demoindex.php on line 18..