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.
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!
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.
Oh. It doesn't work in Safari. But it works in FireFox.
Not ready for primetime? Well, I'll be using it and I'll post the Url once it's finished. :)
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.
... 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.
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.
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.
@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.
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
I've tried it in FF2.0 and it is a mess. Unusable.
@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.
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.
Awesome job! I was just looking Ajax-Flickr enabled script. I guess the best flickr gallery ever!
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
It crashes opera (9.02)...
achei legal, só nao entendi o que é.hehehehe
brincadeira
Abraços
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?
Thank you for your work.
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!
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.
the script works great in IE but not in firefox 2.0
Great plugin.... TO LOOK AT... where is the documentation on how to use it??????
How elegant is that reflection!
Thanks so much for sharing the script!
my best,
-Sidnei :D
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
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.
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....
Very cool jQuery Interface, And nice design
PS: it is 404 image
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.
nice job..
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
Nice effect. Planning on using it for my portfolio. Thanks a lot.
Excellent information. Finding a few such solutions has taken hours in the past.
Thank u.
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...