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.
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
beautiful
Is it possible to put it inside a div? Instead using the width of the screen?
Just tell me if it is, i already loose to much time on this lol :P
Thanks in advance… and for your hard work!
Wicked! Is there a way to get rid of the grid in full size preview? :)
I admire your knowledge to program such wonderful things. My question: is there a way to specify the height and width in pixels (instead of the size of the browser window) or integrate everything into a DIV? Thanks for your answer. Yours faithfully
Than you for this tutorial and plugin. I used it on my webpage.
http://toki-webdesign.com/
Really nice effect. I am finding it doesn’t work in Chrome though. Anyone else get this problem?
Hi Mary beautiful work… please help me i want use it. only within a div of 800 x 800 and do not make it always shows the entire width of the screen … please urgent
Thank you from ITALY……
Any one know how i can put the gallery in 600×400 instead full screen?
Awesome work Mary.
Thanks
i changed the location of the images and also changed it in the webpage, not this doesnt load anything. eg. images\ablum1\thumbs\….
figured it out, thanks though and wonderful work. Just in case anyone has the same problem, i replaced location in the javascript
original
.replace(‘/thumbs’, ”));
Edit
.replace(‘/albums/album1/thumbs’, ‘/albums/album1′));