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

By in Playground on
Demo Download

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.

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Digital meets Physical: Risograph Printing with WebGL

Pixel Distortion Effect with Three.js

Audio Reactive Shaders with Three.js and Shader Park

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 88

Comments are closed.

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

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

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

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

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

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

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

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

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

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

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

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

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

    MS

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

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

  33. I tried to insert the numbers of pixels as you suggested. unfortunately does not work. Please help me…Thanks

  34. Hi is it possible to alter the code that the effect starts with the single image and from there you can click the controls and have other images come in box by box? I’m trying to edit it that i get rid of the initial boxes that come unto the screen and just have the one single image change as i click through.

    Thanks 🙂

  35. Has anyone worked out how to contain this within a table? Would help be out a treat as it is amazing but doesnt fit with my site

  36. Great job
    I would like to change the display with only 12 thumbnails 200px by 200px and a full image 800px by 600px
    Can you help me.
    Sorry for my english