O'Reilly

jQuery Wookmark

By on  

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.

jQuery Wookmark

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!

Track.js Error Reporting

Recent Features

  • Create a Sheen Logo Effect with CSS

    I was inspired when I first saw Addy Osmani's original ShineTime blog post.  The hover sheen effect is simple but awesome.  When I started my blog redesign, I really wanted to use a sheen effect with my logo.  Using two HTML elements and...

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • Drag and Drop MooTools File Uploads

    Honesty hour confession:  file uploading within the web browser sucks.  It just does.  Like the ugly SELECT element, the file input is almost unstylable and looks different on different platforms.  Add to those criticism the fact that we're all used to drag and drop operations,...

Discussion

  1. Great plugin.
    I didn’t know it. Thanks for sharing.

  2. Isn’t this very similar to the old & great Jquery Masonry?

  3. How does this differ from the Masonry Plugin?

  4. iso

    Looks nice. I will try it.
    Merci

  5. Jesús Bejarano

    Perfect , just what i been looking to applay on some of my desing, thank you D.

  6. Is there any decent mootools equivalent ?

  7. Wookmark is not smart enough when dealing with image loading, try Masonry, it comes with imagesLoaded(), it helps u alot:)

  8. This is the first thing came in my mind when i saw pinterest.. but now i came to know it’s a plugin.

  9. 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 !!!

  10. Nice plugin, but – i see the autoresize here, but it didn’t works at the demo page

  11. 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

  12. 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);
    });
    
  13. Sorry David, your Code Editor works not so good. Can you clean up my posts, please.

  14. Hi David nice post, FYI your demo link at the top is pointing to the webkit filters article though.

  15. This plugin is great easy to implement and very functional thank you!

  16. Hi David

    Another cool post man! Not many people know about this plugin.

    I’m sharing all options for the woomark plugin as configurable bits with a live preview

    http://bitconfig.com/woomark/bitconfig_woomark.html

    Thanks David

    – Patrick

  17. Its ok

    Its a good script..but only works with images and if u specifie h and w of the image..othervise items goes on each other and doesnt work..

  18. Hi, I am facing the following problem and I need your help I suggestions. I am redesigning a travel portal site using umbraco and I am using wookmark in front page to load images from articles. The problem is that the articles are more than 1000 so I need a lazy load for every 60 articles. On wookmark examples there is an example with lazy load but the example is using jquery and copy the first 10 items from the example list. Here starts my problem. The list of articles exists in the razor page. How to append more li items in wookmark ul from within jquery with values from the list of the articles which is a razor variable? I will appreciate your help.

  19. João G.

    Does Wookmark plugin have an option to handler the url for a filtered result, such as adding an anchor to the url? I’ve building a website and the main menu contains the wookmark filters, so, the menu will be included into all pages. My problem is: when the user is on another page, how can I “make a link” for the previous url which should be return the results filtered by wookmark? Is is possible to add an anchor to the url in order to handler the filters?

    Thanks and congratulations for the plugin!

  20. I was searching for the same for long and ended up in ipin wordpress plugin.
    Great plugin.

  21. Alex

    Hello. Great plugin. But i have one problem. I need add new block after wookmark complete.
    I have ajax loader to add new image into page. How i can restart wookmark to add new DIV

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...

  • Copy a Directory from Command Line

    Copying a directory for the sake of backup is something I do often, especially when I'm trying to figure out why something isn't working when I use an external library.  I'll copy the directory structure as a backup, mess around with the original source until I find a solution,...