Merging Image Boxes with jQuery

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

From our monthly sponsor: Take WordPress to a whole new level with Divi's incredibly advanced visual builder technology. Try it for free.

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.

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 88

Comments are closed.
  1. 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.

  2. Well, if we would keep on developing stuff for 8 year old computers, we wouldn’t really get anywhere, would we?

  3. Now I’m curious. An 8-year-old laptop? That is designated “development?” And is STILL working?

    Not slamming here, but just flabbergasted. 😉

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

  5. It is! I also write a lot of javascript/jquery code but yours is so functional and so clean.

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

    Thanks in advance… and for your hard work!

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

  8. Really nice effect. I am finding it doesn’t work in Chrome though. Anyone else get this problem?

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

  10. Any one know how i can put the gallery in 600×400 instead full screen?
    Awesome work Mary.
    Thanks

  11. i changed the location of the images and also changed it in the webpage, not this doesnt load anything. eg. images\ablum1\thumbs\….

  12. 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’));