wookmark jquery

How To Create A Multi Column Design Layout Using Wookmark jQuery

Why Are We Using Wookmark jQuery

Wookmark jQuery is a plugin that does one thing exceptionally well. If you’d like to create an elegant, uniform photo gallery, you can use Wookmark.

wookmark-plugin

Let’s take a look at the advantages of using Wookmark jQuery:

  1. Wookmark is an incredible image layout tool
  2. Wookmark is a plugin showing different sized images in a proper style
  3. Wookmark is a jQuery plugin for laying out a dynamic grid of elements
  4. The Wookmark plugin detects the size of the window and automatically organizes the boxes into columns.

A live example of Wookmark:

Picture1

Let me show you how to use Wookmark in a step by step process:

  1. First of all, we download Wookmark jQuery from GITHUB
  2. We are now going to convert the downloaded zipped file
  3. Create an html file and put that code below in it
  4. Start by including the images in any format; this example uses a list, so we put all the images in a separate folder and give it’s path in the ‘tag’.

HTML

CSS

Then within the head section of our given html file, we include all the “CSS files”. In the above code, we use the CSS(Cascading Style Sheet) code to put all kind of different styles in it. And here, we are using the box sizing to define the border box in the given list.

JavaScript

In the following code, we place all the script files before the tag. We are using the jQuery functionality related to the images in the script.

wookmark javascript

In the given code, we used to run the javascript library functions, and then we used to load the images in a desired manner and arrange the images in similar dimensions.

As you can see the below code, once the images are loaded, we initialize the Wookmark plug-in. ‘autoResize’ function is used to auto update the layout when the browser window is resized. Container function is used for some extra CSS styling. ‘outerOffset’ function is used to create distance between grid and parents.

In the given code, we take the “tiles” id of ul tag and store it into a variable, which we’ve named “HANDLER”. It is used to arrange all the images with the same size, height and to fill the gap between two or more images. Then we store the value of “windows width” into a variable named “windowWidth” and provide the width flexibility upto 50%. And afterwards, the condition is used to check, whether the window width is less than 1024 pixels or not. If it is less than 1024 px, increase the width of window upto 100%. Once you’re done with that, call to layout function is invoked to handle Wookmark option.

 

I believe you should be ready with your very own Wookmark jQuery based image layout. Hope you liked the tutorial. Do subscribe for our newsletter for upcoming tutorials, web-based news, etc. Feel free to leave comments if you appreciate the tutorial or if you have any queries.

Cheerio!