A nice Javascript photo gallery

A customer, who is a photographer, wanted a photo gallery for his creations.
So Randolph designed it with a functionality in mind and my task was to try to make it real. This new site is not completely tested or filled with photos yet but should be working as expected. Take a look at it below or see it live.



There is always a possibility of creating everything yourself, but it takes time, something that we didn't have much of in this project. So I needed an existing solution that I could modify instead.

I found a couple of candidate solutions but the one that became number one in my opinion was one that both looked really nice, that presented a very cool functionality and that was also pretty easy to modify to fit your own design. The choice fell on a solution from (E)2 Interactive which is free to use, but anyone using it should consider making a donation of course.

Take a look at the demo here. You can download the whole thing here. The solution consists of PHP, JavaScript and CSS and you almost only have to modify the css templates. There is also a php configuration file to look at with a few basic parameters.

As I said the solution consists of PHP, JavaScript, HTML and CSS but the actual frameworks used besides the own great work of (E)2 Interactive is Mootools, the Image Uploader class.upload.php that I mentioned in a previous post a few days ago, Scott Schiller's - Basic Rounded Corner CSS and Paul Sowden - styleswitcher.js.

So besides the actual photo gallery - an upload functionality comes with the package that really eases the administration of the site. As I wrote in the previous post about the uploader I added a choice to be able to categorize the images. The categories are hard coded in this solution but could pretty easily be made dynamic as well. When clicking on a category images from that specific images directory and corresponding thumbnails directory are loaded using a querystring to the same page. You could also use session variables if you want to hide it.

I had some problems (as often) making it looking and working the same with different browsers, primarily with Internet explorer 6. Some fixing with CSS adjustments made it look pretty much the same regarding layout. The problem with transparency and png-images remains however, So I tried out both the approach in this blog post and the one on this page which is a great solution. Both of them however had the side effect of making the links not working. So I used some conditional statements to not use the png-image if IE6 is used. I am sure I would find a solution if I would work with this enough, but It will have to be like this for now. Please give me a suggestion if you have any.

Great s