David Walsh Blog

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.

The 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:


<ul id="tiles">
	<li><img src="images/image_1.jpg" width="200" height="283"><p>1</p></li>
	<li><img src="images/image_2.jpg" width="200" height="300"><p>2</p></li>
	<li><img src="images/image_3.jpg" width="200" height="252"><p>3</p></li>
	<li><img src="images/image_4.jpg" width="200" height="158"><p>4</p></li>
	<li><img src="images/image_5.jpg" width="200" height="300"><p>5</p></li>
	<li><img src="images/image_6.jpg" width="200" height="297"><p>6</p></li>
	<li><img src="images/image_7.jpg" width="200" height="200"><p>7</p></li>
	<li><img src="images/image_8.jpg" width="200" height="200"><p>8</p></li>
	<li><img src="images/image_9.jpg" width="200" height="398"><p>9</p></li>
	<li><img src="images/image_10.jpg" width="200" height="267"><p>10</p></li>
	<li><img src="images/image_1.jpg" width="200" height="283"><p>11</p></li>
	<li><img src="images/image_2.jpg" width="200" height="300"><p>12</p></li>
	<li><img src="images/image_3.jpg" width="200" height="252"><p>13</p></li>
	<!-- ... -->
</ul>

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!

Wookmark 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!