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: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

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. There is a problem with this plugin in the newest Chrome browser. It works for me only if I delete the rotation. Is there better solution?

  2. Amazing Work!!!
    Like an Andrea and Alejandro i want to use it inside a div with fixed height and weight. It’s possible?

  3. The boxes don’t merge correctly in Google Chrome 12 leaving gaps among the tiles. Perfect in all other browsers. Any ideas how to correct?

    Thanks!
    ms

  4. Great effect, but some advice – do not use box-shadow with CSS3 transforms and transition because it works extremely slow

  5. Pls, Pls reply.

    The boxes don’t merge correctly in Google Chrome 12 leaving gaps among the tiles. Perfect in all other browsers. Any ideas how to correct?

    Thanks! in advance.

  6. The solution that I mentioned earlier doesn’t work correctly in IE. Back to the drawing board…

    MS

  7. I was able to fix the problem with Chrome and Safari by separating the “animate” statements into 2 parts:

    1) To animate the positions (top/left)
    2) To animate the rotation

    I hope this helps.

    MS

  8. is there a way that I can eliminate the first set of thumbnails scattered and just have the second part with the images show up with the controls?

    • This is really just an experiment but it should work if you try to replace $(window).width() and $(window).height() in the JavaScript with your values (950px and 700px). It’s used a couple of times to get the dimensions of the area we want the thumbs to disperse. I hope it helps somehow… cheers, ML