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

JEDI » Blog Archive » links for 2007-01-03 said,

January 3, 2007 @ 6:21 am

[...] Get Into This » Image Gallery using jQuery, Interface & Reflections (tags: slideshow webdesign) [...]

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

RaymonWazerri said,

April 20, 2007 @ 7:00 pm

Hey,
I love what you'e doing!
Don't ever change and best of luck.

Raymon W.

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

Criação de sites said,

July 30, 2007 @ 10:43 am

Thanks so much!

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

Moxeaala said,

August 28, 2007 @ 8:34 pm

information ...
alaska fishing+ island kodiak salmon

Bylouala said,

August 29, 2007 @ 10:46 am

interesting thank you...
alaska fishing+ island kodiak salmon

Xamqiala said,

August 29, 2007 @ 12:42 pm

Greetings!..
alaska silver salmon fishing+

Wyguaala said,

August 29, 2007 @ 4:37 pm

Greetings!..
fly fishing+ lodge in alaska

Pavjoala said,

August 29, 2007 @ 6:42 pm

interesting thank you...
alaska alaska fishing+ salmon silver

Cegqoala said,

August 29, 2007 @ 8:38 pm

Thank you for your site.
fishing+ flats florida guide key

Lqzyiala said,

August 29, 2007 @ 10:21 pm

very interesting
halibut fishing+ in homer alaska halibut fishing+ in homer alaska

Domyjala said,

August 30, 2007 @ 4:21 am

interesting thank you...
alaska red salmon fishing+

Lafojala said,

August 30, 2007 @ 6:28 am

very interesting
salmon fishing+/ whittier alaska

Facjiala said,

August 30, 2007 @ 11:04 am

information ...
fly fishing+ lodge in alaska

JoeyBurns said,

August 31, 2007 @ 7:26 pm

Wow, there is some really nice info here.
I'll definitely come back soon to see everything.
Way to go! ;-)

Joey

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

Dean said,

September 17, 2007 @ 3:53 am

I just finshed writing a cool css zoom effect for my siite which can be used for slid shows as well, however is very good example...

Sycuixox said,

September 18, 2007 @ 7:52 pm

aidon big pizza sausage
aidon big pizza sausage

Wikeuxox said,

October 5, 2007 @ 1:00 pm

big love pizza sausage shy
big love pizza sausage shy

Wjleqxox said,

October 15, 2007 @ 3:31 pm

get off xanax
get off xanax

GUlqeggg said,

November 6, 2007 @ 8:01 pm

account forex trading
account forex trading

BAKjyggg said,

November 8, 2007 @ 6:59 pm

barbados car rental
barbados car rental

VUbOAggg said,

November 10, 2007 @ 1:55 am

car rental manhattan
car rental manhattan

SiweAggg said,

November 15, 2007 @ 9:15 pm

corvette rental cars
corvette rental cars

WimUekok said,

November 20, 2007 @ 2:22 pm

xgetafrttrrhf
art

240 plugins jquery : sastgroup.com said,

November 21, 2007 @ 11:08 am

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

April Brill said,

November 22, 2007 @ 10:03 am

A blog like this one for a while.
Good site !

GiTAqkok said,

November 25, 2007 @ 12:34 pm

art
art

Peviqkok said,

November 25, 2007 @ 3:15 pm

smell
smell

DOwiekok said,

November 26, 2007 @ 2:42 am

casino
casino

MOzyAkok said,

November 26, 2007 @ 6:00 am

jeans
jeans

VeDAyggg said,

December 2, 2007 @ 6:53 pm

58745
58745

Propiedad Privada » Blog Archive » 240 Plugins para jQuery said,

December 5, 2007 @ 8:38 am

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

240 Plugins para JQUERY | pixelco.us blog said,

December 5, 2007 @ 1:09 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. [...]

PewqAuon said,

December 5, 2007 @ 1:10 pm

b
b

chinatian › jQuery插件超级多 said,

December 5, 2007 @ 9:19 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. [...]

Excelente listado de 240 plugins para jquery | Adictos a la red said,

December 6, 2007 @ 10:35 am

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

XqCUiata said,

December 12, 2007 @ 12:37 pm

lllr
lllr

XibAUata said,

December 22, 2007 @ 10:07 am

kkl
kkl

tyttyu said,

January 3, 2008 @ 5:10 am

oyoiioui0o

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

幽谷寒泉的BLOG » Blog Archive » 强烈推荐:240多个jQuery插件 said,

January 24, 2008 @ 10:53 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. [...]

KemyAkok said,

February 1, 2008 @ 1:06 pm

art
art

Oyun hileleri said,

February 14, 2008 @ 1:47 pm

Thank you for your work.

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

February 17, 2008 @ 11:46 am

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

Jquery的N个插件 » NeiLyi.cn -尼尔易 said,

February 22, 2008 @ 10:32 pm

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

antivirüs indir said,

February 23, 2008 @ 7:54 pm

Thanks for this good article..

losing 40 pounds said,

February 26, 2008 @ 4:33 pm

Unfortunately I wasn't able to see it, the page just kept loading all the time. I will go back another time to see if it works better.

TOzyAata said,

March 1, 2008 @ 8:33 pm

cheap
cheap

Anivox said,

March 9, 2008 @ 1:11 pm

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

LUzOqkok said,

March 12, 2008 @ 9:10 am

Escrambler cox
Escrambler cox

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

The ultimate jQuery Plugin List | Kollermedia.at said,

April 2, 2008 @ 3:54 am

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

240 adet jquery ekelntisi - Volkan Şentürk said,

April 9, 2008 @ 6:02 am

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

teknoloji ve tasarım said,

April 14, 2008 @ 5:01 pm

very good article thanks

teknoloji ve tasarım said,

April 14, 2008 @ 5:02 pm

good design.. thanks

jQuery插件集合.(240) | Sapling soliloquize said,

April 28, 2008 @ 11:59 am

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

胡言乱语 » Blog Archive » 强烈推荐:240多个jQuery插件 said,

May 3, 2008 @ 12:59 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 | Six Revisions said,

May 3, 2008 @ 11:58 pm

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

RSS feed for comments on this post · TrackBack URI

Leave a Comment