Those who have worked on projects with me or who I talk to about projects know how protective I can be over my projects. I love to share project code and ideas, I love to recieve ideas and feedback on my own projects. However I get depressed when someone places bad code in my projects or change the way things work without asking or thinking about the consequences. I guess this comes from the fact that I usually put a lot of effort and care into my projects.
Anyway… A couple of months ago I gave non-developer fellow band member access to update the files of my band’s website. The website has an admin section to manage news and to manage events but I never built an admin section to manage photos. The process was to place a directory in the pictures folder with the yymmdd format with a html file containing the pictures and captions. Something wasn’t fine with this system as on Monday I noticed that simpleviewer had been used to display the latest image sets. The folders had also not been called the appropriate name, which meant the script on the event page that searched to see if there were photos for the date also no longer had a link to the photos.
So instead of getting upset, I have tried to put together a solution that uses the simpleviewer xml and photos and put it into a page that doesn’t navigate away from the page, that google can still read easily and as many of our users are not technically savy, a solution that is viewable without the flash plugin or in a browser that has JS disabled.
The solution is in two parts.
The first part done in the gallery.php file. If the folder, for the date given, contains a gallery.xml file then it reads in the xml file. It then resizes all the images to 500px wide so they fit in the page and then displays image with caption underneath.
If the user has JS then that content is replaced with the thumbnails, the caption for the first picture and the first picture. A user can then click on each of the thumbnails to see the image and caption for the image.
This means that google or someone without javascript can read the content for the whole page. Those with JS can have view the content by clicking on the thumbnails.
The solution is still hidden for the moment as I won’t update the links until I finish the scripts. However here is the link to the example:
http://www.bmcb.org.au/gallery.php?date=070901
TODO
Make the images fade out and in
Make the PHP script not resize the image up to 500px wide if it is smaller then that.
Only show 5 thumbnails and provide a next and back button to scroll through the images.
Possibly add the function that when you press the left and right arrows to navigate through the images
Make the selected states and presentation of thumbnails prettier
