Today we want to show you how to create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the picture and when clicking again on the thumbnail, the ribbon will close and open again with a large version of the image.

To scatter the images we will be using the CSS3 child selector property and the jQuery Masonry plugin by David DeSandro.

The beautiful photos are by Mark Sebastian and you can see his Flickr photostream here. The images are licensed under the Creative Commons Attribution-ShareAlike 2.0 Generic License.

Demo Link : http://tympanus.net/Tutorials/ImageWall/

Download Link : http://tympanus.net/Tutorials/ImageWall/ImageWall.zip

If you enjoyed this article, Get email updates (It’s Free)

Karthikeyan KjqueryCSS3,Jquery
Today we want to show you how to create a neat image wall with jQuery. The idea is to scatter some thumbnails with different sizes on the page and make a ribbon slide in when we click on the picture. The ribbon will show some description next to the...