Prabhu-Gallery Beta

I took a five day break from office and headed home to spend my time with my parents.
Finally I got time to work on my webpage and got it running.
http://prabhudc.net/gallery/index.html is in its beta stages. I call it Beta as I am yet to build the Front end,load all the images and many other plans in mind.

I really enjoyed building and I would like to brief on How I achieved it.
Apart from my own scripts,I have used Lightbox module for the effects on the images and scriptaculous library for the special effects with the menu panel.

I wrote Ajax front end and back end php for the gallery. Only tool I used for debugging was Firefox's firebug. Firebug is an awesome tool and it really helped me getting over the numerous javascript bugs.

The backend php script is very straight forward. It receives a directory location as a post request from the front end. The script looks within that directory and retrieves all files with a ".JPG" extension and creates a "^" delimited list of all the image files. This string is returned as a response to the front end.
The Front end too, without any much special effects is straight forward. The Ajax script is written in such a way that it sends a directory path as a request to the server.

As the images could be very heavy and also large in number,displaying all of them by resizing them into thumbnails would be very inefficient. Hence I created distinct directories for thumbnails and the large images, although I made it sure that the image names were same. So the images that are displayed as thumbnails are indeed low resolution thumbnails and they load pretty fast. But On clicking the thumbnail, the image that is retrieved is the high resolution image(I got javascript to change the path).

Until now was the easiest. What really bogged me was getting the effects of lightbox. Latest lightbox release has the ability of recognizing a group of snaps which fall under the same category which is actually very helpful and easy for a developer. But! What the heck! That would be really boring if you don't get to do anything. So I took the primitive version of lightbox and tried to get it run. All we have to do is to include the lighbox.js/.css files and add the property "rel=lightbox" to each image. I got this done pretty easily with javascript. But somehow the image was not rendering itself. As I click on any thumbnail, it opens itself in a blank page without any effects. The Ajax code which I had written, worked absolutely fine, i.e. I was getting the thumbnails easily, but it was the lightbox Ajax part that had been f###'d up! I took nearly 20hrs to find the cause of this going wrong. I even edited the lightbox javascript code, but that really didn't help me. Finally I was able to figure out what was going wrong. The lightbox script works as following. Once a page loads it scans the whole page for all images and also verifies if it has the "rel=lightbox" property. Now once my page was getting loaded, it was able to capture any image that was hardcoded in the HTML. The problem with lightbox script was that it was not able to recognize my thumbnails as it was got through Ajax and at a later stage(After page load). All I had to do to get over this problem was to reload the lightbox module after any successful response from the server.

As of now I am still testing the page in various browsers. It seems to be fine on FF2+, IE7,IE6. There is still a lot of work that needs to be done.