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:
  • Adamxj2
    that is at jones beach i recognize the pics !
  • Murphy
    it is very bad
  • Used this gallery for the second time now. Thanks!
  • paz
    Something that nobody seems to have picked up on is - who is the hot bird with blondish hair and blue eyes (sometimes crossed!)?
  • 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...
  • Excellent information. Finding a few such solutions has taken hours in the past.

    Thank u.
  • Nice effect. Planning on using it for my portfolio. Thanks a lot.
  • 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
  • seo
    nice job..
  • 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.
  • Very cool jQuery Interface, And nice design
    PS: it is 404 image
  • 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....
  • 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.
  • 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
  • How elegant is that reflection!

    Thanks so much for sharing the script!

    my best,


    -Sidnei :D
  • Paul
    Great plugin.... TO LOOK AT... where is the documentation on how to use it??????
  • the script works great in IE but not in firefox 2.0
  • 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.
  • 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!
  • Thank you for your work.
  • 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?
  • achei legal, só nao entendi o que é.hehehehe
    brincadeira

    Abraços
  • Robert Siniakiewicz
    It crashes opera (9.02)...
  • 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
  • Ergin
    Awesome job! I was just looking Ajax-Flickr enabled script. I guess the best flickr gallery ever!
  • 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.
  • @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.
  • yo
    I've tried it in FF2.0 and it is a mess. Unusable.
  • 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
  • @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.
  • 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.
  • 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.
  • ... 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.
  • 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.
  • Not ready for primetime? Well, I'll be using it and I'll post the Url once it's finished. :)
  • Phill Kenoyer
    Oh. It doesn't work in Safari. But it works in FireFox.
  • 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.
  • 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!
blog comments powered by Disqus