h0bbel.p0ggel.org

Let me just start off by saying that I am in no way a javascript wizard. I'm even hesitant to call myself a developer of any kind as most of the "development" work I've done has been of the hack'n'slash type. For the most part I can get something started, or hack something existing to work the way I want it to.

This post isn't about my ineptitude as a developer though, but rather about the discoveries I made while investigating jQuery based plugins to do some photography presentations on the photo365.org site I recently hacked together.

All Lightbox inspired solutions were automatically disqualified, at least in the long run, as thats been overdone basically everywhere by now. I do use a Thickbox on the site right now though, but thats not the solution I really want to stick with in the end. Consider it a placeholder for now.

After looking for pre-made plugins that could help the site display the photos, I was left with a list of potential candidates:

• slideViewer
• Galleria
• Galleriffic
• uGallery

All of these, besides Galleriffic have one major flaw, at least how I see it. They all download the full size image you wanto to display and then resize them in browser. Not only is this slow, but it's a huge bandwidth eater. Trent Foley’s Galleriffic however, does this a bit differently. Like all the others, it's based on an unordered list that holds your images, but instead of just doing a simple html img off the fulle size image, it implements a way to show a specific thumbnail that links to the full image you want to display. You can even link to the original image for download purposes if you want.

In my particular case, where I on each of the participating photographers "profile page" will end up with showing a total of 365 images on a single page, the bandwidth waste is very obvious.

To break it down, we end up with some number similar to this (Based on 1 random image from the pool):

• Full Size: 54993 bytes
• Thumbnail Size: 6165 bytes

Now, if you add all of this up you will end up with a calculation that is something like this:

• Resize in browser total image size:
  365 images x 54993 bytes = 20072445 bytes = 19.14 Megabytes
• Separate thumb and full size display:
  (1 x 54993 bytes) + (364 images x 6165 bytes) = 2299053 bytes = 2.19 Megabytes

This equals an approximate difference of 17 Megabytes transferred on each page request that this particular profile page gets. I could of course split my profile pages into smaller chunks and help relieve some of the bandwidth usage per page load that way, but my I want to display all of the thumbnails all at once.

As I said, I'm no javascript wizard and I'm sure there are good reasons why most of these plugins behave the way they do. Grabbing the full image and then resize it "locally" seems to be the easy way to implement something like this and I guess easy is what we are all looking for. Doing this does make the html markup very easy, and if you don't have thumbnails readily available in your setup it's fine. In my case, I do have thumbnails and I want to utilize them properly.

Did I miss some great jQuery based photo showoff plugin that I should have looked at? I'm sure there are several that consider the needs of bandwidth concious users out there, and that I've just missed them. If that is the case, please let me know.

Now I'm off to try and actually get Galleriffic integrated into my photo365 project site.