Yay! It’s my first contribution to the coding community! I present to you the SimpleView Gallery. I would have had this uploaded yesterday, but my server was down when I was in the computer lab. Oh well. Here’s a demo for those who don’t want to wait.

Goals

First, let me tell you the goals I tried to achieve with this piece:

• simple gallery system
• quick for creator and user
• degradable javascript

I wanted any easy way to display images in a sequence so I could show my Stitchy comic, which broke after I redesigned my site and moved to WordPress. Originally, I used a database to store the file name and retrieved it with php. I’m trying to move away from a dependency on databases, which is why my new system simply reads all the files in a directory and finds the images. All you have to do to get it to work is put a single php file in a directory filled with the images you want to display!

Features

The filenames are naturally sorted, so if they’re numbered they’ll be displayed in the correct order, otherwise the images will be displayed in alphabetical order.

If the user has JavaScript enabled, all of the image switching is done that way. I decided not to use AJAX because that would have increased load time. All that needs to be done is changing the image source, so when the page loads, php passes all the filenames to javascript to with it what it will. No more server communication necessary. The user is alerted that a new image is loading when a link is clicked, and next and previous images are preloaded.

If users don’t have javascript, functionality remains the same; a new page is simply loaded, and php handles the image switching instead of javascript.

Bugs/Improvements

I’ve noticed in Opera 9, if an image has already been viewed and the user goes back to it, the image doesn’t register the onload event so the loading div doesn’t get hidden again. If anyone has a better idea on how to handle loading, please share.

Also, I have not been able to test it in many browsers, only FF 1.5, IE 6, and Opera 9. Additional testing would be helpful. As would any code optimization suggestions for php or javascript. I want to reduce the filesize as much as possible.

I’ve already implemented a version of it in my Stitchy comic. Hope you enjoy!

Update - 9/11/06 I’ve added an Archive menu and optimized some of the javascript.

Update - 9/14/06 I fixed a bug dealing with image preloading.

I’ve released an updated version that you should download instead.

This entry was posted on Wednesday, September 6th, 2006 at 9:24 am and is filed under scripts and tagged with gallery, javascript, php, simpleview. You can follow any responses to this entry through the RSS 2.0 feed.