From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
Today we will show you a nice effect for images with jQuery. The idea is to have a set of rotated thumbnails that, once clicked, animate to form the selected image. You can navigate through the images with previous and next buttons and when the big image gets clicked it will scatter into the little box shaped thumbnails again.
When the window gets resized, the positions of the thumbnails will automatically adapt to fit the screen. We are using the jQuery 2D Transform plugin for the animated rotation. You can find the plugin here: http://plugins.jquery.com/project/2d-transform
The beautiful photographs are by tibchris and you can find his stunning works on his Flickr page:
http://www.flickr.com/photos/arcticpuppy/
When navigating through the full images, we will reveal the next or previous image by removing the current image box by box.
Have fun with the demo and download the ZIP to experiment with this cool effect!
The whole animation looks best in Google Chrome and Apple Safari.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
thanks a lot for this tut Mary Lou,
excellent idea,
always the best!!!
wow, this is insane, really awesome effect !
Again WOW! How many pictures can i swoh on screen? Only 24?
great ! mary lou rocks 🙂
Hey, thank you all!
@Johannes you just need to set the variable “per_line” to the according number. Then you add the thumbnails in the HTML with the correct background-position. You need to have a correct size of images so that all the thumbs together make up that image. Hope it helps,
ML
Hey,
big thanks!
Great as usual. I really think you’re the best.
Lot of thanks
awesome effect.. Thanks for sharing ..
This effect really explains the next level of awesomeness 😉
It’s amazing…
Woooooooowwwwwwwww
Just amazing
Thnx for sharing.
😮 very nice!!!!!!!
Truly Brilliant, just like all of your creations. Thank you so much.
nice effect as always,
thank you sharing this with us.
That’s BEAU-TI-FUL, well done. One of the most neat jQuery examples out there 🙂 . Keep up the great work!
extremely good one. thanks 🙂
Very nice,but try to make it work in IE6.
…and why exactly would I do that? 🙂 I don’t try to make it work in Firefox 1.5, either…
Not seen anything like this before, very impressive, keep it up.
Amazing effect! Absolutely new quality. Thank you.
we…ee…eee…Could be so like that, its a great, photograph of womens are the beautiful too, to be inverted view…:D
Thanks! this looks very impressive!!!
One word! Great!
Bravo!
What else can be said. So sweet it makes my dentures hurt.
🙂
Really really cool. Keep it up, Mary!
undoubtedly great post for a good way to display the thumbnails and images.
Love it, although I noticed the animation seems choppy and slow in Firefox. Works great in other browsers tho!
Thank you all so much for your great feedback, I am really glad you like it 🙂
Cheers, ML
Wow. It amazes me what people can come up with when they explore jQuery a bit.
Great work, Mary.
Effect and images both are great 😉
Very nice. I love what brilliant people can accomplish with a little jquery sauce.
Wow god effect..
Pero como siempre existe ello…venga no habra pensando en volver a el menu de las imagenes en vez de seguir en vista completa de ellas…
Great!!! Any option to set the background positions with Jquery, depending on the number of thumbnails you want to show?
This is a cool effect, but you need to work on the performance of it outside of Chrome. It’s sluggish to respond in Firefox 3.6.13, and more sluggish in IE8. Oddly enough it runs better in IE7 than IE8.
Joomla converted module available on : http://bit.ly/eiPZsK
I have a problem: the images are not centered as in yoru demo. What can it be?
See: http://www.quadrupede.it/micheleletizia/portfolio/scultura1.html
If I set he variable “per_line” to the according number and add the thumbnails in the HTML with the correct background-position, the image is cut at the bottom as if it needs “phantom” thumbnails and lines. Any changes other than 6linesx24thumbs messes up things.
how to create a “next page” button if I want to have more than 24 images ?
very impressive!!!
My implementation of this wonderful code… http://johnreedjr.com/
mind blowing work for jquery, i cant believe this type of work possible without flash.
Hats off !
Simply can’t admire within…
Mind blowing work..
Keep up good work.
Yeah, that’s great, but you would have to use some system tests to ensure that it only shows on decent systems.
I’m on my development laptop right now, which is about 8 years old, and it completely hung the tab for a few seconds when I opened the demo. That’s the sort of stuff which makes people close your website without even thinking.
Well, if we would keep on developing stuff for 8 year old computers, we wouldn’t really get anywhere, would we?
Now I’m curious. An 8-year-old laptop? That is designated “development?” And is STILL working?
Not slamming here, but just flabbergasted. 😉
This amazing effect take the whole window ¿Could it be inside a column?
beautiful code.
thank for share.
Is it possible to have a title etc below the big preview image?
Hey mary great work… please help me i want use it.
only within a div of 800 x 600 and do not make it always shows the entire width of the screen … please urgent
It is! I also write a lot of javascript/jquery code but yours is so functional and so clean.
good job