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

Upcoming Events

Recent Features

  • Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

  • Send Email Notifications for Broken Images Using MooTools AJAX

    One of the little known JavaScript events is the image onError event. This event is triggered when an image 404's out because it doesn't exist. Broken images can make your website look unprofessional and it's important to fix broken images as soon as possible....

  • 9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

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

  • OâReilly Velocity Conference â Amsterdam

    My favorite front-end conference has always been O'Reilly's Velocity Conference because the conference series has focused on one of the most undervalued parts of client side coding:  speed.  So often we're so excited that our JavaScript works that we forget that speed, efficiency, and performance are just as important. The next Velocity...

  • CanIUse Command Line

    Every front-end developer should be well acquainted with CanIUse, the website that lets you view browser support for browser features.  When people criticize my blog posts for not detailing browser support for features within the post, I tell them to check CanIUse:  always up to date, unlike...

  • Generating Alternative Stylesheets for Browsers Without @media

    If your CSS code is built with a mobile-first approach, it probably contains all the rules that make up the "desktop" view inside @media statements. That's great, but browsers that don't support media queries (IE 8 and below) will simply ignore them, ending up getting the...

  • Serve a Directory with PHP

    Many developers have a giggle at PHP, even looking down at the language, but let's be honest:  most of our blogs are powered by it (WordPress) and it's a great language to dabble around with.  I cut my teeth on PHP, though I prefer to avoid PHP these days. But...

  • Tips you can Use to Build an Excellent eCommerce Experience

    There are many reasons to build a good eCommerce experience if you are planning to build an eCommerce website. Visitors can place items in their cart and leave your site without making a purchase. In fact, three out of every four of them will do so....