Home > Javascript, jQuery > Image Gallery using jQuery, Interface & Reflections

Image Gallery using jQuery, Interface & Reflections

October 12th, 2006 ramin Leave a comment Go to comments

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.

Related posts:

  1. My First jQuery Plugin, a Sliding Menu
  2. FireBug Extension and jQuery
  3. Rails 1.0, Rails Plugins and Rails Engines
  4. Ruby on Rails Plugin Architecture
Categories: Javascript, jQuery Tags:
  • http://ajaxian.com/archives/jquery-image-gallery-transitions-thumbnails-reflections 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. [...]

  • http://www.theba.hu Amon

    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!

  • http://www.theba.hu Amon

    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

    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

    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

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

  • Phill Kenoyer

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

  • http://mrnase.de Dominik Hahn

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

  • http://mrnase.de Dominik Hahn

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

  • Stuart

    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.

  • Stuart

    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.

  • http://blog.broadbandmechanics.com/2006/10/more-visual-links-3 Marc’s Voice » Blog Archive » More Visual Links #3

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

  • http://www.identitygang.com/2006/10/14/more-visual-links-3/ THE IDENTITY GANG / More Visual Links #3

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

  • http://mrnase.de Dominik Hahn

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

  • http://mrnase.de Dominik Hahn

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

  • http://www.phatoproductions.com Patrick

    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.

  • http://www.phatoproductions.com Patrick

    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.

  • http://nathanfarrugia.com nathan

    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.

  • http://nathanfarrugia.com nathan

    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.

  • http://www.getintothis.com/blog ramin

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

  • http://www.getintothis.com/blog ramin

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

  • http://www.phatoproductions.com Patrick

    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

  • http://www.phatoproductions.com Patrick

    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

  • http://weblogger.ch/blog/archives/2006/10/23/jquery-gallerie-photo/ Weblogger.ch » jQuery: Gallerie photo

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

  • http://clientside.cnet.com/3rd-party-libraries/jquery-image-gallery-transitions-thumbnails-reflections/ jQuery Image Gallery: Transitions, thumbnails, reflections » Clientside

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

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

  • yo

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

  • http://www.getintothis.com/blog ramin

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

  • http://www.getintothis.com/blog ramin

    @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

    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.

  • alex

    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.

  • http://adrian.otero.ws/2006/11/jquery-alternativa-a-prototype-scriptaculous/ AOWS — jQuery… ¿alternativa a Prototype + script.aculo.us?

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

  • http://www.anieto2k.com/2006/11/05/ximggallery-una-libreria-potenciada-con-jquery/ xImgGallery, una librería potenciada con jQuery – aNieto2K

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

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

  • Ergin

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

  • http://www.sudamericahardcore.com Pelluco

    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

  • http://www.sudamericahardcore.com Pelluco

    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

  • http://infectedfx.net/2006/11/18/enlaces-rapidos-xiv/ Infected-FX » Enlaces rápidos XIV

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

    It crashes opera (9.02)...

  • Robert Siniakiewicz

    It crashes opera (9.02)...

  • http://www.guiapesca.com.br Ericky

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

    Abraços

  • http://www.guiapesca.com.br Ericky

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

    Abraços

  • http://blogged-on.de/web-20/the-best-web-20-foto-galleries.html The Best Web 2.0 Foto Galleries – Web 2.0 – blogged on
  • http://rip747.wordpress.com tony petruzzi

    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?

  • http://rip747.wordpress.com tony petruzzi

    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?

  • http://xiaobian.cublog.cn xiaobian

    Thank you for your work.

  • http://xiaobian.cublog.cn xiaobian

    Thank you for your work.

  • Josecito

    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!

  • Josecito

    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!

  • http://gpessia.wordpress.com/2007/04/16/20-image-galleries-slideshows-gratis-slideshowpro/ 20 Image Galleries & Slideshows (Gratis) – SlideShowPro ($) « gp

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

  • Alain

    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.

  • Alain

    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.

  • http://www.web2point0.com king

    the script works great in IE but not in firefox 2.0

  • http://www.web2point0.com king

    the script works great in IE but not in firefox 2.0

  • Paul

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

  • Paul

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

  • http://cesarmoco.wordpress.com/2007/07/05/thoughts-on-javascript/ Thoughts on Javascript « Cesar’s Vanilla Blog

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

  • http://sidnei.us sidnei dasilva

    How elegant is that reflection!

    Thanks so much for sharing the script!

    my best,

    -Sidnei :D

  • http://sidnei.us sidnei dasilva

    How elegant is that reflection!

    Thanks so much for sharing the script!

    my best,

    -Sidnei :D

  • Bob Lockwood

    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

  • Bob Lockwood

    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

  • http://www.nghorta.com/2007/09/08/galeria-de-fotos-natal-rn/ Viche » Galeria de Fotos: Natal – RN

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

  • http://gabrieljones.com adam

    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.

  • http://gabrieljones.com adam

    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.

  • http://www.iamduncan.com Duncan

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

  • http://www.iamduncan.com Duncan

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

  • http://www.i-noova.com/?p=5 Ressources pour le développement web et WordPress » i-noova*

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

  • http://www.anivox.com/ Anivox

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

  • http://www.anivox.com/ Anivox

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

  • http://phpvn.info/index.php/2008/03/21/t%e1%bb%95ng-h%e1%bb%a3p-cac-trang-lam-slideshow-va-gallery/ VietNam PHP Blog » Blog Archive » Tổng hợp các trang làm SlideShow và Gallery

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

  • http://sixrevisions.com/javascript/free_javascript_image_galleries/ 16 Free JavaScript Solutions for Displaying Your Images | Six Revisions

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

  • Greg

    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.

  • Greg

    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.

  • http://www.2bebe.com seo

    nice job..

  • http://www.2bebe.com seo

    nice job..

  • http://blog.belive.ws/2008/05/27/15-free-image-galleries-using-javascript/ 15 Free Image Galleries Using JavaScript | Belive Blog

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

  • Kyle

    Amazing gallery, I really want to use it but in my project I use the latest Jquery (2009) and the gallery is not comatible :(
    Has anyone has an idea to make it compatible ?

    Thanks

    Kyle

  • Kyle

    Amazing gallery, I really want to use it but in my project I use the latest Jquery (2009) and the gallery is not comatible :(
    Has anyone has an idea to make it compatible ?

    Thanks

    Kyle

  • http://www.thebigpie.com Abdel

    Nice effect. Planning on using it for my portfolio. Thanks a lot.

  • http://www.thebigpie.com Abdel

    Nice effect. Planning on using it for my portfolio. Thanks a lot.

  • http://www.thirdeyereiki.com reiki

    Excellent information. Finding a few such solutions has taken hours in the past.

    Thank u.

  • http://www.thirdeyereiki.com reiki

    Excellent information. Finding a few such solutions has taken hours in the past.

    Thank u.

  • ken

    You really should port this to the latest jquery and put it in the plugins section of the jquery web site. This gallery has quite a few features that the current jquery galleries don't have...

  • ken

    You really should port this to the latest jquery and put it in the plugins section of the jquery web site. This gallery has quite a few features that the current jquery galleries don't have...

  • paz

    Something that nobody seems to have picked up on is - who is the hot bird with blondish hair and blue eyes (sometimes crossed!)?

  • paz

    Something that nobody seems to have picked up on is - who is the hot bird with blondish hair and blue eyes (sometimes crossed!)?

  • Amanda8

    Hi is this post still alive

    http://pilestreatment-4u.com

  • Test

    hello

  • Test

     Hello

  • Test

    test

  • Mahi Lohar

    nice

blog comments powered by Disqus