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!
Great plugin.
I didn’t know it. Thanks for sharing.
Isn’t this very similar to the old & great Jquery Masonry?
How does this differ from the Masonry Plugin?
Looks nice. I will try it.
Merci
Perfect , just what i been looking to applay on some of my desing, thank you D.
Is there any decent mootools equivalent ?
Wookmark is not smart enough when dealing with image loading, try Masonry, it comes with imagesLoaded(), it helps u alot:)
This is the first thing came in my mind when i saw pinterest.. but now i came to know it’s a plugin.
i love this type of UI, specially horizontal sliding. Windows 8… Awwww m crazy for that, n thinking to apply that in my new blogging site !!!
Nice plugin, but – i see the autoresize here, but it didn’t works at the demo page
Thanks very much for that post.
I was searching for the same for long and ended up in ipin wordpress plugin. But now i can do my website on my own php code :-)
Thanks David
Wookmark works fine with imagesLoaded and also with more content as images only.
Have a look at our Blog. My initialization
looks like this:
var container = $('.content');
container.imagesLoaded(function() {
// Prepare layout options.
var options = {
align: 'left', // no horizontal centered layout
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('view-content', container), // Optional, used for some extra CSS styling
offset: 20, // Optional, the distance between grid items
// itemWidth: 211 // Optional, the width of a grid item
};
// Get a reference to your grid items.
var handler = $('.view-content > li', container);
// Call the layout function.
handler.wookmark(options);
});
Wookmark works fine with imagesLoaded and also with more content as images only.
Have a look at our Blog. My initialization looks like this:
var container = $('.content');
container.imagesLoaded(function() {
// Prepare layout options.
var options = {
align: 'left', // no horizontal centered layout
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('view-content', container), // Optional, used for some extra CSS styling
offset: 20, // Optional, the distance between grid items
// itemWidth: 211 // Optional, the width of a grid item
};
// Get a reference to your grid items.
var handler = $('.view-content > li', container);
// Call the layout function.
handler.wookmark(options);
});
Sorry David, your Code Editor works not so good. Can you clean up my posts, please.
Hi David nice post, FYI your demo link at the top is pointing to the webkit filters article though.
This plugin is great easy to implement and very functional thank you!