inicio mail me! sindicaci;ón

Image Gallery using jQuery, Interface & Reflections

Update 10/13/2006: Put in a flag to check when an image is being swapped so that the user clicks don't register until image has fully loaded. This fixed the fast-click / double-click issue (on both the thumbnails as well as the back/next links)

Also updated the mouse hover area for the thumbnail activation to be 25px from the top by default (used to be 50). This is ofcourse configurable. I will have full explanation on how to use the gallery soon.

Demo page has been updated. You may also grab a zipped up version of the whole project here: gallery.zip.

I'm been playing around with jQuery a lot lately. It's definitely not the holy grail of Javascript toolkits, but I like it. The community created plugins and the documentation are great.

Anyway, here is my second jQuery application/plugin. It's an image gallery with smooth transitions, thumbnails and pretty reflections. Of course, this is the first version (something like a beta) and definitely not ready for prime time. However, feel free to grab it and use it as you please. A link back would be appreciated.

Just so that I can display the gallery here, I've put it within an IFRAME. Visit the original page to view/grab the source.

note: the IFRAME is causing some weird effects on the mouseover on the image as the thumbnails are loading. This doesn't happen on the actual demo page.

Ajaxian » jQuery Image Gallery: Transitions, thumbnails, reflections said,

October 13, 2006 @ 9:58 am

[...] 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. [...]

Amon said,

October 13, 2006 @ 10:57 am

Hello! I write to here too:

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)
Sorry for my bad English!

Phill Kenoyer said,

October 13, 2006 @ 11:46 am

Ahh, it died or is broke or something now. I didn't get the chance to even see it. I guess I'll download the code and try it out local.

Phill Kenoyer said,

October 13, 2006 @ 11:48 am

Oh. It doesn't work in Safari. But it works in FireFox.

Dominik Hahn said,

October 14, 2006 @ 7:32 am

Not ready for primetime? Well, I'll be using it and I'll post the Url once it's finished. :)

Stuart said,

October 14, 2006 @ 12:56 pm

This is not ready at all. Doesn't work in Safari and in Firefox (2.0) it has a number of problems. The thumbs at the top push the main image down the page (even when they are not visible), transitions are slow and jerky and the entire thing flashes as each image loads. I guess it is too much, too fast.

Marc’s Voice » Blog Archive » More Visual Links #3 said,

October 14, 2006 @ 3:03 pm

[...]  Coolio JQuery images [...]

THE IDENTITY GANG / More Visual Links #3 said,

October 14, 2006 @ 4:17 pm

[...]  Coolio JQuery images [...]

Dominik Hahn said,

October 14, 2006 @ 6:11 pm

... and it has problems when you change the image url from a website to something pointing at the same server.

Changing http://bla.com/image/img1.jpg to image/img1.jpg breaks the thumbnails, the next/previous buttons still work fine.

Patrick said,

October 15, 2006 @ 5:47 am

Hi there, loved your gallery and it inspired me to make my own. I used the scriptaculous library instead of jquery. Also used some image resizing functions with php. How I go about getting images into my gallery is by uploading them to an images folder on my server and then my script does the rest. I decided to go this route as I have a ton of space on my server so I don't necessarily need to use an external source such as flickr.

Thanks for the inspiration and you can check out my gallery here.

http://gallery.phatoproductions.com.

nathan said,

October 18, 2006 @ 12:16 pm

Hey just let u know your link doesnt work. it just keeps loading, i was waiting for ages in hope it would load.
just a question hope you might know. can Jquery be connected up to images through a database.

Any help thanks.

ramin said,

October 18, 2006 @ 1:42 pm

@Patrick, good job. The only issue i had with your gallery is that the thumbnails disappear when you move your mouse off the image. I like your idea about generating the thumbnails from an image folder. This is something I want to eventually do as well. I just used Flickr for now because it made it easier.

@nathan, what do you mean by the link doesn't work? you mean the link to the sample page? it seems to be working. I think you might be referring to the menu item that loads the actual images (Gallery 1). Apparently it doesn't work in Safari browsers and its a bit buggy on Opera. Try using IE or Firefox. I wish I had Safari to debug on.

Patrick said,

October 20, 2006 @ 7:14 pm

Thanks for the input Ramin. I'm not sure why it is an issue to have the thumbnails dissapear when you move your mouse off of the images. Please explain and give me a way you think I could make it better and I will implement it. You should check out my gallery again. I have expanded on it some more and added a few features, I'm going to continue to keep working on it and adding features as I have time. here is the link again: http://gallery.phatoproductions.com

Also, the gallery can be easily implemented into someone elses site, you can check out my friends here: http://jake.phatoproductions.com

Thanks again,
Patrick

Weblogger.ch » jQuery: Gallerie photo said,

October 23, 2006 @ 10:35 am

[...] Rien à dire, avec jQuery et quelques petits plugin on peut faire de vrais merveilles. Une gallerie de photos fort étonnante. Tiens, ça me donne envie de recoder un peu mon outil de photoblog développé avec Code Igniter, bien que le temps me manque en ce moment… [...]

jQuery Image Gallery: Transitions, thumbnails, reflections » Clientside said,

October 26, 2006 @ 4:27 pm

[...] 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. [...]

yo said,

October 27, 2006 @ 5:17 am

I've tried it in FF2.0 and it is a mess. Unusable.

ramin said,

October 27, 2006 @ 10:28 am

@yo, I'm using FF 2.0 and it seems to be working just fine. My OS is WinXP SP2 running FF 2.0 final release. I know it doesn't work so well in Safari and I have to find a way to debug that, because I don't have access to Safari .. but it should work just fine in FF and IE.

alex said,

November 3, 2006 @ 5:32 pm

there is a problem when you view a gallery, click on another gallery to view and then come back to the previous gallery. its missing tons of pictures in the listing.

AOWS — jQuery… ¿alternativa a Prototype + script.aculo.us? said,

November 4, 2006 @ 1:50 am

[...] Plugins: una interesantísima colección de plugins, con los que podemos realizar un espía estilo Digg o Menéame, o esta impresionante galería de fotos. En: AJAX, JavaScript — 2 November, 2006 [...]

xImgGallery, una librería potenciada con jQuery - aNieto2K said,

November 4, 2006 @ 11:38 pm

[...] Si a una librería le aplicas jQuery puedes obtener resultados muy prácticos, como los conseguido para xImageGallery. Una librería poco accesible pero diferente a las demás. Esta versión con reflejos es mucho más bonita y conseguida. [...]

Ergin said,

November 8, 2006 @ 6:55 am

Awesome job! I was just looking Ajax-Flickr enabled script. I guess the best flickr gallery ever!

Pelluco said,

November 15, 2006 @ 9:50 pm

Patrick, i have a problem watching your gallery. The thumbnails load correctly but then they dissapear.

Im using FF2 ( tested with IE tab) and IE6.

Nice work tho
Pelluco

Infected-FX » Enlaces rápidos XIV said,

November 18, 2006 @ 8:14 pm

[...] Image Gallery Usando jQuery crea una galería de imágenes con todo y su reflejo. These icons link to social bookmarking sites where readers can share and discover new web pages. [...]

Robert Siniakiewicz said,

November 26, 2006 @ 3:44 am

It crashes opera (9.02)...

Ericky said,

December 14, 2006 @ 2:36 pm

achei legal, só nao entendi o que é.hehehehe
brincadeira

Abraços

tony petruzzi said,

March 11, 2007 @ 2:20 pm

what is the status of this project? I would like to use it for a project I'm working on right now, but there seems to be some bugs. Do you need help getting this project stable?

xiaobian said,

March 21, 2007 @ 9:02 am

Thank you for your work.

Josecito said,

April 13, 2007 @ 3:30 pm

I have this gallery up and running but my problem is that the thumbnails don't show up at all. The message saying loading 1 of 12 images comes up but the thumbnails never load. Anyone run into the same problem?? Help would be appreciated . Thanks!

20 Image Galleries & Slideshows (Gratis) - SlideShowPro ($) « gp said,

April 16, 2007 @ 1:09 pm

[...] Image Gallery using jQuery, Interface & Reflections [...]

Alain said,

May 12, 2007 @ 6:01 am

This gallery is great!
I would like to slightly adapt it in order to use it in my website (a searchable ice hockey photo database).

Firstly, I want to display a single gallery (no menu displayed to choose a collection and a gallery). I downloaded the code but was unable to modify it successfully in order to display a gallery (let's say gallery 1 of collection 1) without any click.

Secondly, I need to display a legend attached to each picture of the gallery. The legends could be stored in an array included in the images/images.js file. I have no idea of which code file(s) I need to modify and how to do it.

Can anybody help on any of these two topics? Anticipated thanks.

king said,

June 7, 2007 @ 1:36 am

the script works great in IE but not in firefox 2.0

Paul said,

June 9, 2007 @ 6:49 pm

Great plugin.... TO LOOK AT... where is the documentation on how to use it??????

Thoughts on Javascript « Cesar’s Vanilla Blog said,

July 5, 2007 @ 4:07 pm

[...] my favorite demos yet, and something that I was trying to reproduce is the image gallery javascript demo. I started a subproject (called photowheel), which sucks compared to the link. This started after a [...]

sidnei dasilva said,

July 15, 2007 @ 11:05 pm

How elegant is that reflection!

Thanks so much for sharing the script!

my best,

-Sidnei :D

Bob Lockwood said,

August 4, 2007 @ 5:08 pm

Was this the gallery that I saw that had rotating images that reflected in the 'floor'? All I get at the moment is "This Photo is Currently Unavailable". Which is a shame, it looked lovely. Anyone know of an implementation other than this or that's been tweaked to avoid the problems mentioned below? Thanks

Viche » Galeria de Fotos: Natal - RN said,

September 8, 2007 @ 6:06 pm

[...] momento - é disponibilizado um link para você visualizar as fotos, de outra maneira, a partir de Image Gallery using jQuery, Interface & Reflections, de Ramin [...]

adam said,

January 21, 2008 @ 3:31 pm

You have access to Safari, you can download Safari 3 for Windows XP at anytime.... you shouldnt worry about older Safari browsers as Mac users are inferior and thusly do not deserve to use the web. Ok, that last part was a little harsh, but you get my point.

Duncan said,

January 24, 2008 @ 7:47 am

So Adam is an idiot? What exactly IS your point?
Oh, that tired old Mac vs PC crap. How dull.
This doesn't work in FF2, and there are a couple of interface bugs.
When loading more than say 65 thumbnails how does the page scale?
It was impossible to tell because it's in an iframe.
And Adam? Get a life....

Ressources pour le développement web et WordPress » i-noova* said,

February 17, 2008 @ 11:46 am

[...] Image Gallery using jQuery, Interface & Reflactions [...]

Anivox said,

March 9, 2008 @ 1:11 pm

Very cool jQuery Interface, And nice design
PS: it is 404 image

VietNam PHP Blog » Blog Archive » Tổng hợp các trang làm SlideShow và Gallery said,

March 21, 2008 @ 4:28 am

[...] Image Gallery using jQuery, Interface & Reflections [...]

16 Free JavaScript Solutions for Displaying Your Images | Six Revisions said,

May 3, 2008 @ 11:58 pm

[...] 3. jQuery Gallery [...]

Greg said,

May 15, 2008 @ 12:17 am

I tried to use your gallery, but I encountered some odd, inconsistent problems. For example, when I tried to add two collections, each with sub galleries, I ended up having to make a separate .js file for each collection, and after that, only one of them would work for some reason, and the one that didn't was the one that worked before. I've checked it a hundred times and can't find a single reason why it shouldn't work so I'm thinking there's some sort of conflict confusing my browser (firefox). I would love to use your code on my site, but I can't if it's this temperamental and inconsistent.

seo said,

May 22, 2008 @ 11:28 am

nice job..

15 Free Image Galleries Using JavaScript | Belive Blog said,

May 27, 2008 @ 5:45 am

[...] 3. jQuery Gallery [...]

Javascript Image Galleries Collection | Net Feast said,

August 26, 2008 @ 2:37 am

[...] 3. jQuery Gallery [...]

240 Plugin List in jQuery | Marius Dima said,

September 6, 2008 @ 4:24 pm

[...] jQuery jQIR Image Replacement. jCarousel Lite. jQPanView. jCarousel. Interface Imagebox. Image Gallery using jQuery, Interface & Reflactions. simple jQuery Gallery. jQuery Gallery Module. EO Gallery. jQuery ScrollShow. jQuery Cycle Plugin. [...]

16 Free JavaScript Solutions for Displaying Your Images : NguyenVanChieu said,

September 14, 2008 @ 10:35 am

[...] 3. jQuery Gallery [...]

RSS feed for comments on this post · TrackBack URI

Leave a Comment