Friday, October 13th, 2006

jQuery Image Gallery: Transitions, thumbnails, reflections

Category: Showcase

Ramin B. has put together yet another image gallery. This time it is using jQuery as the library, and has a bunch of rich effects such as transitions, reflections, and the use of thumbnails.

It looks pretty close to the Flickr Flash widget.

Check out the Demo Page

jQuery Image Gallery

Posted by Dion Almaer at 8:58 am
11 Comments

+++--
3.7 rating from 108 votes

11 Comments »

Comments feed TrackBack URI

It is nice work. But it has a bug. With two quick click on different images and the reflection on the bottom will be different than the main picture on the top. (Sometimes, the reflection picture’ll be hidden or the previous picture appears with full opacity and normal position)

Comment by Amon — October 13, 2006

Pretty nice UI work! A few bits that could be tweaked, but still a good job. Always nice to see folks doing cool stuff with JS. The reflections are pretty tight, the use of canvas under Firefox is presumably a lot more efficient than copying the image 100+ times to give the same effect (though I didn’t dig too far into the code.) Keep it up.

Comment by Scott Schiller — October 13, 2006

@Amon: yeah, i see what you mean.. it is definitely a bit buggy. I’ll have to handle the doubleclick or fast clicking issue. Shouldn’t be too hard to catch that.

@Scott: thanks. I agree, I like the canvas/IE filters solution a lot better than the 100+ image solution I’ve seen on some other sites. Too bad you can’t “fade out” the reflection in IE, which is why it sorta just disappears when a new image is loading.

Comment by Ramin — October 13, 2006

[…] Más en Ajaxian […]

Pingback by despuesdegoogle » Archivo del weblog » Galería de imágenes con jQuery — October 13, 2006

awesome one. Jquery seems more stable in comparison to Prototype/scriptaculous to me

Comment by Google Logs — October 13, 2006

i’ve been using jquery for 2 corporate projects already…it never ceases to amaze me with the outcome… c”,)

Comment by r00t — October 13, 2006

The CSS work is amazing with this gallery but I feel display of the gallery image menu is not so stable.. i’ll definitely find a way out to do that

Comment by Google Logs — October 14, 2006

jQuery More stable??? Its JS not a nuclear reactor. If you want to compare jQuery to Scriptaculous you should compare Scriptaculous to Interface (the jQuery equiv.). And by far Scriptaculous is more ‘stable’ 8P

Comment by Mario — October 14, 2006

It looks nice, but it’s not that responsive. Plus pulling down the gallery overview is pretty tricky. If I mouse over the title and wait for the gallery to fade in. If I move my mouse out of the header it fades out. You have to quickly get your mouse out of the header before it comes up. Then it will let you work with it. And, the next/back buttons are not responsive. There is way more than a 10sec delay before it changes pics. I can’t tell if its even doing anything or just cycling automatically. Not ready for primetime.

Comment by Charlie Hubbard — October 16, 2006

Thanks for all the comments people. I know its not ready for primetime. It was just a little test project for me to play around with JQuery and Interface. I’ve also been a little disappointed with all the different gallery packages out there, so I wanted to make one myself. I have some big plans for this project. I hope it turns out the way I envision it.

Comment by Ramin — October 24, 2006

[…] via ajaxian: jQuery Image Gallery: Transitions, thumbnails, reflections Ramin B. has put together yet another image gallery. This time it is using jQuery as the library, and has a bunch of rich effects such as transitions, reflections, and the use of thumbnails. […]

Pingback by jQuery Image Gallery: Transitions, thumbnails, reflections » Clientside — October 26, 2006

Leave a comment

You must be logged in to post a comment.