Sunday, February 21, 2010

jQuery Portfolio Engine

I've reworked my online portfoilios using a jQuery solution: Galleria. The code is not new but it works pretty nicely. It also allows navigating the portfolio by clicking the large image which means it works fairly well on the iPhone. Please check out the implementation on my site and let me know your thoughts on its usability.


6 comments:

Preston said...

Very nice, Ray. I like the navigation. Is it my imagination, or do the photos load faster than before?

Ray Meibaum said...

Thanks. Yes - it preloads the images. Feels much quicker than monoslideshow. I forgot to mention another big advantage: that it generates the thumbs on the fly from the full size images. This saves lots of time managing images. You can selectively replace each thumb if you don't like the generated image.

benjamin gandhi-shepard said...

Great update! I've seen the Galleria plug-in before, however I think that you have used it the best out of other sites that I've seen. It's great to see a photographer's web site that can do all the cool stuff without using flash. This is a clear example of how do it right. Very nice work.

Ray Meibaum said...

Thanks, Benjamin. The code offers lots of options as far as highlighting and opacity of the thumbnails, etc. This is my first experience with jQuery but it seems very powerful and I'm anxious to learn more. One thing that's a little troubling is that Galleria breaks when I use jQuery 1.4.2 (latest) so I need to figure out why.

BTW, I've also added some "progressive enrichment" in this implementation (Thanks to Dan Cederholm). I've used some CSS3 properties that put a nice drop shadow under the main image in compliant browsers (Firefox, Safari).

benjamin gandhi-shepard said...

I love it! CSS3 is such a front end dream. No more creating shadow files. As far as the latest jQuery goes, they updated several (many) parts of the library for faster execution and more logical/robust use. I'm sure the Galleria people will update this soon.

FYI you can easly switch to Asynchronous Google analytics for possible faster site loading time. This is super easy to do. http://briancray.com/2009/12/20/asynchronous-tracking-google-analytics/

And I might suggest obfuscating your email address to avoid spammers.http://www.fingerlakesbmw.org/main/flobfuscate.php

Great photos. I hope to update my site too someday. Thanks for the inspiration.

Ray Meibaum said...

Thanks for the kind words...and I really appreciate the links. I've implemented both solutions at the site.