Archive for August 16th, 2007

Over the last few months, I’ve received tons of email regarding FrogJS. I’ve gotten everything from compliments to ideas on how to improve FrogJS. After getting so much feedback from the web design community, I had planned to revisit FrogJS to fix some bugs as well as make a few improvements. Unfortunately, I haven’t had time to do so and without a real personal need to improve it, the enthusiasum just wasn’t there.

I recently began working on a new type of javascript gallery, that incorporates much of the feedback I received. When I started this project, I didn’t just want it to be a new version of FrogJS. I aimed to create something that is ideal for a different scenario.

What’s so great about it anyways?

I decided to create something that didn’t require actual real estate on the page. It’s ideal for an index page that has links to numerous galleries. I don’t want the user to be sent to a new page to view each gallery. This meant I would go for something with a modal style window.

Because the gallery is not going to be permanently visible on the page, I don’t want the gallery’s HTML to be part of the page. I use an ajax request to solve this issue. The user doesn’t download the list of the images in the gallery until they have triggered an event (in this case, clicking on a link). However, this also means that implementation is slightly more tricky than FrogJS, but the semantic markup benefits justify this decision.

I also took this opportunity to apply some of the knowledge I’ve learned since my last gallery project. This gallery doesn’t rely on browser caching to preload images. Every <img> tag remians on the page at all times (display:none; is used to hide the images until the user wants to see them). Unfortunately, this puts a limit on the size of the gallery. Add too many images in one gallery, and the user’s browser will move at a snail’s pace. I also make use of innerHTML where possible. Avoiding the slower DOM methods helps reduce the strain on a user’s browser.

So… where is it?

Well that’s enough explaination… by now you probably just want to see it. I present to you Anura Gallery. Click the link below to see an example.

Click here to view my Anura Gallery

If you’re interested in playing around with it now, you can download the source. I will try to write up documentation sometime next week to make implementation of an Anura Gallery on your site a snap. As with any new code, I’ve done my best to test it, but I’m sure there are things that I have missed. Please let me know if you find any bugs, so I can fix them before the official release.