arrow-left arrow-right brightness-2 chevron-left chevron-right facebook-box facebook loader magnify menu-down rss-box star twitter-box twitter white-balance-sunny window-close
Photo slideshow with PHP
2 min read

Photo slideshow with PHP

UPDATE:Slideshow Project Page

I’ve completely redone my photo pages. After much more consternation than there should have been, I decided that I wanted to do a slideshow with the picture sets instead of the tiled thumbnails that I previously used. I spent a fair amount of time looking at possible solutions for this, but opted to build it myself in PHP after not being able to find a method that I liked. Among the different solutions I looked at were the BetterHtmlExport plugin for iPhoto and Galerie (not to be confused with Gallery, which I’ve used a few times in the past and knew would be overkill for what I wanted to do now). I probably worked through eight different options before deciding that I would just write it myself because none of the things I found captured the simplicity of what I was shooting for: the ability to drop a single PHP (or other) file into a directory of sequentially numbered images and have those images presented as a slideshow. I also wanted the presentation to mesh well with my current page templates and be easy to change in the future.

My solution takes care of all these things and the code is fairly short (as it should be given the simplicity of the problem). The way I have it set up, you need to include a one line text file in each directory of pictures which specifies the title of the page (so that the PHP code/template can be kept completely separate from whatever set of pics it’s working with). This could obviously be easily extended to cover more variables like descriptions for individual pictures (for example, you could set up each text line to correspond to that line number’s matching image number, thereby allowing you to give a description of each picture). After you create this text file you simply need to drop the PHP file into the directory and then point to it.

Initially, I planned to have the pictures show up in my content column (where this text is), but this would have required me to either widen the div or go back and resize all of my pics to 400×300, neither of which I wanted to do. Because of these constraints, I decided to keep the slideshow pages free of the menu and title header found on the other pages. I removed the title header because I wanted to make sure that the pictures could be viewed in full without the person having to scroll, which they would have had to do if they were viewing 375×500 portrait pics on a 1024×768 screen (yah, I find it hard to believe myself, but some people still use that resolution).

So, yah, nothing revolutionary here, but I’m pretty pleased with the results. If past experience is any indication, I have a feeling a few people are going to ask for the code. If this turns out to be the case, I’ll probably flesh it out a bit and make it more robust before passing it around.

You've successfully subscribed to Justin Blanton.
Success! Your account is fully activated, you now have access to all content.