Skip to content

Another javascript gallery

posted by Eric Puidokas 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.

Comments Post a Comment

Fred says... August 17th, 2007 at 6:17 am

I thing it would be better and more easy for potentional users to set a name of images, then creating an array as you have here http://www.puidokas.com/anura/myGallery.js . Last year I was playing with such kind of automatic galleries as you can see here http://js-playground.blogspot.com/2006/08/gallery-bookmarklet.html or http://js-playground.blogspot.com/2006/08/simple-unobtrusive-dom-driven-autoplay.html or here http://pension-barbora.cz/obrazky.html on this last address it is used also for ajax loading xml in that alphabet tips down on http://pension-barbora.cz/tipy-na-vylet.html Anyway your script looks great, when implementaion will be easier it could be very poppular.

Mike Gadd says... September 20th, 2007 at 3:36 am

Looks good nice work Eric.
One idea to improved I always use the lightbox keys (arrows and x) is it possible to incorporate these, I quite like the idea of keeping the familiar Lightbox feel. oh and of cause caption option :-)

pascal says... September 21st, 2007 at 11:04 am

Very nice.
I see in myGallery.js : caption and credits but they doesn’t not appear, isn’t it ?
Thanks

Eric Puidokas says... September 21st, 2007 at 1:51 pm

Wow, I really didn’t expect this much feedback already. It’s been a great help, but has also been slowly pushing back the final release of this script. I want to make sure it’s perfect before I put something out there that I feel everyone can use without a problem.

Fred: Very good points. I’m currently reworking the script a bit so it will be even easier to implement.

Mike: Looking back, I’m not quite sure why I didn’t implement it to work with the keyboard already. I will definitely be adding support for this before I do an official release.

Pascal: Good eye. I put the caption and credits in there because I want to support them in the final version. I made some quick changes if you want to use the script now with support for captions and credits. You can grab the new file at: http://www.puidokas.com/wp-content/uploads/2007/09/anura_beta2.zip

pascal says... September 22nd, 2007 at 5:50 am

Thanks Eric.
Unfortunately I will not be able to use…
The reason is i always another framework (Mootols).
Mootols and Prototype doesn’t work together :
http://forum.mootools.net/viewtopic.php?id=1964#post-9356

Too bad, i really liked you gallery

Howard Grimsdale says... October 7th, 2007 at 9:18 am

Simply incredibly beautiful! Your ‘old’ version was excellent - this is a whole other universe.

OUTSTANDING work (… of love 8-) I’m on a dialup link tonight and it even works here - but slow. Might be worthwhile to add a leeetle more explanation in the ‘Loading’ comment.

WOW as a 40 year veteran photographer & film maker I’ve finally found a way to demo our stuff the way I’d like it to be seen. Quality elegance and very cool.

You’re permanently bookmarked!

Peter Honour says... October 8th, 2007 at 5:31 am

Hi Eric
I am trying to use your script in my site but it will not work.
All I get are thumbnail images that open bigger pictures in a new window.
I am using Microsoft FrontPage 2003 on a windows vista PC.
I have tried using the script from your page examples but an error occurs in the script ‘line 2 character 1’
I never really used JavaScript before but need a professional picture viewer for a site I am building.
Can you shed any light on my problem?
Is there a forum where I could get help with this?
Kind regards

Peter Honour

Richard Hayden says... October 20th, 2007 at 7:55 am

Your image display looks great and it may well suit my needs but can the slideshow be automated at all?

win says... October 22nd, 2007 at 4:53 am

Excellent job! I like the it very much!

win says... October 22nd, 2007 at 10:16 pm

I got this error, seems like the “loadThumbs” is called before “myAnura.loadGallery”. Any clue? Thanks.
Error: AnuraImageArray[i] has no properties
Source File: http://sgcsgsuebiz11.csminc.com:7003/Gadgets/anuraGallery/anura/anura.js
Line: 162

win says... October 22nd, 2007 at 10:37 pm

It is intermittent problem. sometimes, the loadThumbs is called before the myAnura.loadGallery responsed; causing the Array is empty, and the page just keep loading forever.

langgeng says... October 26th, 2007 at 6:00 pm

nice effect,,

i like it.

Tobias says... October 30th, 2007 at 6:47 am

Hello Eric,

a nice work. I like the Gallery.

Keep on working on a documentation for implementing your nice piece.

Thx.

Jeff says... November 8th, 2007 at 7:34 am

Hello, i’m makins a site based on the immages gallery made from the script frog.js
here: http://www.betfer.co.uk/ruwett/scena.html
But sometimes, when i go ahead with the photos, the thumb don’t load, and i can’t continue. To make the thumb appear, i have to go back, and than go ahead again ..
I really can’t understand where is the problem.
Please if have suggestion..

Hans Hendrady says... November 27th, 2007 at 12:48 am

Hi.. Loved your Image gallery

Tiffany says... December 28th, 2007 at 2:59 pm

I’ve installed your Anura Gallery and it is wonderful -it’s very easy to implement. I am using a DHTML menu and there is also a js scroll marquee on the page. Both the menu and the marquee does not work. Please, I want to use this gallery but I also need the menu on the page.

Thanks

Tiffany

Atanas Mishef says... January 7th, 2008 at 2:17 pm

Thanks for this gallery :)

marco vezzani says... January 10th, 2008 at 9:43 am

just wanted to say what a great little gallery script works amazingly indeed, fantastic work!

took says... February 22nd, 2008 at 2:34 am

Hi Eric,

Salute from Prague, (Czech republic) where I think you’d be glad to spend few moments :-)

Just to ask you if I should put all the files (there are a lot inside: buider, drag drop, effects, frog, prototype, …) in the Frog.zip in the same folder than the images and thumbs.
I think that I’m wrong but could you confirm?

Once that I’ll succeed to make it run on a joomla website, I’ll surely try Anura.

Really great galleries.

ausgezeichnete says... February 24th, 2008 at 10:15 am

Hii Eric,
wanna ask u about Frog project, i tried to make it dynamic using PHP but it didnt work,have no idea how to do it?

stephan says... March 9th, 2008 at 4:42 pm

hi,

you have to remove “initFrog();return false;” in the frog.js (end of page) end put it at the position where the gallery is meant to be loaded. on http://www.forty-niner.de/?49er=photos you can see that it works dynamic.

regards, stephan

yee says... May 21st, 2008 at 6:26 pm

this is what i am looking for.. Thanks

Mel says... May 28th, 2008 at 6:25 am

Question for Stephan

Can you be a bit more specific - it works well on your site, but I have the problem where the right hand thumbnail doesn’t always load. The script I downloaded doesn’t have “initFrog();return false;” , it has “function initFrog(){ myFrog = new Frog(); }
Event.observe(window, ‘load’, initFrog, false);”
can you give me a link to your frog.js script so that I can compare it with mine?

Thanks, Mel

Mel says... July 3rd, 2008 at 7:40 am

Hi Eric

Greetings from the South of France. Like FrogLS a lot, neat and simple - but can’t sort out the bug where the right hand thumbnail doesn’t always load - see my question to Stephan above. He seems to have gone off the radar - can you help please.

Thanks Mel

Mada says... July 13th, 2008 at 6:53 am

I love your script. For some reason the example isn’t showing now, was yesterday. Probably on my end I guess.

Mada says... July 13th, 2008 at 12:00 pm

Wellllllllllllllllllllll after IE decided to update, it blew out alot of things. I reinstalled javascript and restarted. I think if I implement this awesome script onto my site, I’ll link to java check for updates.

John says... August 19th, 2008 at 1:25 pm

What was the final fix for the right side thumbnails not loading at times. I have this problem. I love this script but if the code if buggy I don’t know that I can use it. (…but I want too)

Please publish the fix for the missing thumbnails.

Thanks,
John

www.marwebdesign.net » Blog Archive » Anura gallery 1.0 says... August 24th, 2008 at 1:01 am

[…] dar codul sursa al exemplului care este inclus in scriptul ce poate fi accesat la adresa : http://www.puidokas.com/another-javascript-gallery/  arata clar cum se […]

ilan parmentier says... October 31st, 2008 at 9:08 pm

Well done.
I love the carrousel effect.

Post a Comment

Extra information for this entry