jQuery Wall Image Gallery

View demo     Download source

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.
Let’s start with the HTML structure.

Posted in: Gallery