About Wookmark jQuery Plugin
The jQuery Wookmark plugin offers a robust set of properties and methods that enable you to recreate the dynamic, grid-style image layout popularized by Pinterest.
To get started, simply download the plugin’s ZIP package from the official site and extract its contents. Inside, you'll find essential files like wookmark.js, main.css, and a collection of example layouts to help you implement and customize the plugin with ease.
Optimizing Image Dimensions for Wookmark Layouts
Integrating images into your webpage using the "jQuery Wookmark plugin" is straightforward, and you can easily enhance your layout with its built-in features. For optimal results, it's recommended to standardize the width of your images before adding them to the grid. This ensures a clean, uniform appearance across columns.
The height of the images can vary freely, allowing for a dynamic and visually engaging layout. If preferred, you can also use images in their original dimensions. Just keep in mind that inconsistent widths may affect the overall alignment of the grid.
✨ Before using the Wookmark plugin, you may want to resize multiple images to ensure consistent widths across your grid layout.
In the markup section, begin by including the jQuery CDN or a local jQuery .js file, followed by the Wookmark plugin’s JavaScript and CSS files. In this example, I've used the main.css file provided with Wookmark, which automatically applies a clean default font to image captions and adds a subtle background color for visual appeal. This stylesheet also includes additional styling properties that enhance the overall layout and user experience.
<!DOCTYPE html>
<html>
<head>
<title>Wookmark jQuery Image Layout Plugin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!--ADD WOOKMARK LIBRARIES-->
<script src="Wookmark-jQuery-master/Wookmark-jQuery-master/wookmark.min.js"></script>
<script src="Wookmark-jQuery-master/Wookmark-jQuery-master/wookmark.js"></script>
<link rel="stylesheet" href="Wookmark-jQuery-master/Wookmark-jQuery-master/css/main.css">
<style>
ul {
list-style:none;
}
li {
display:list-item;
border:solid 1px #CCC;
background:#FFF;
cursor:pointer;
}
li > div {
text-align:center;
padding:2px 1px;
margin:2px;
color:#555;
font-size:13px;
}
</style>
</head>
<body>
<div style="width:750px;">
<ul id="myImages">
<li>
<img src="sample/ASCENSION.jpg" width="230" height="200" alt="" />
<div>12 x 14 ~ "ascension"</div>
</li>
<li>
<img src="sample/CAR.png" width="230" height="134" alt="" />
<div>Image ~ “my car”</div>
</li>
<li>
<img src="sample/BALANCE.jpg" width="230" height="200" alt="" />
<div>Image ~ “balance”</div>
</li>
</ul>
</div>
</body>
</html>I have added few images to my web page. The unordered list or the <ul> serves as a container and has all the images in it, along with a text describing each image. I have given it an id called myImages. You need to hook the container (with its id) to the plug-in when the page loads.
🖼️ Need to trim your images for a cleaner look? Try the Crop Image tool to remove unwanted edges while maintaining quality.
<script>
$(document).ready(function () {
const ul = new Wookmark('#myImages', {
outerOffset: 5, // Default is '0'.
offset: 2,
itemWidth: 232, // Value can be in %. For example, 10%.
align: 'left'
});
});
</script>🔤 Want to add captions or labels to your images? Use the Add Text to Image tool to overlay custom text before uploading.
Once the image container (#myImages) is linked to the jQuery Wookmark plugin, it automatically generates a clean, uniform grid layout. In this example, I’ve customized the layout using a few optional parameters to control spacing, alignment, and item dimensions.
1) outerOffset – The distance to the containers border. It will separate the image container (the <ul>) with other elements on the page.
2) offset – It’s the margin or the space between each image inside the container.
3) itemWidth – The width of the grid item in the container. Its takes a number value or you can assign value in percentage (%).
4) align – You can align the images on the page "left" or "right".
All the above mentioned options are optional. You can omit or keep the options according to your choice. For more options, you can refer to this official page.
Is Wookmark Still Relevant?
Many people have asked me if wookmark is still relavant today. My answer is yes, Wookmark still works well if you're maintaining older sites built with jQuery.
If you are working on new projects, then you should know that jQuery itself has fallen out of favor due to modern JavaScript frameworks like React, Vue, and Angular, which offer better performance and scalability.
There has been some performance concerns since Wookmark can slow down modern web apps due to their heavier footprint.