jQuery Wookmark
The first thing that hits you when you visit Pinterest is “Whoa, the columns are the same width and the photos are cut to fit just the way they should.” Basic web users probably think nothing of it but as a developer, I can appreciate the effort that went into creating that design, both on the server and client sides. That’s why I’ve fallen in love with Wookmark, a jQuery plugin to create the same consistent layout effect with imagery.
Let me show you how to use Wookmark.
View DemoThe amount to work the developer has to do can be completed in just a few minutes. Start by including the images in any format; this example uses a list:
1
2
3
4
5
6
7
8
9
10
11
12
13
Images should optimally be preprocessed on the server side to the same width, however, you can still force widths if desired. With the images in place, you can use the jQuery plugin to do the dirty work:
$(document).ready(new function() { // Call the layout function. $('#tiles li').wookmark({ autoResize: true, // This will auto-update the layout when the browser window is resized. container: $('#tiles'), // Optional, used for some extra CSS styling offset: 2, // Optional, the distance between grid items itemWidth: 210 // Optional, the width of a grid item }); });Wookmark also includes a few additional options to customize the look of columns and can resize the column widths to a window resize — excellent!
View DemoWookmark is a plugin that does one thing exceptionally well. If you’d like to create an elegant, uniform photo galleyy, give Wookmark a try and I think you will be impressed!
Read the full article at: jQuery
Read Full Post at David Walsh Blog
