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.
Let’s take a look at the advantages of using Wookmark jQuery:
- Wookmark is an incredible image layout tool
- Wookmark is a plugin showing different sized images in a proper style
- Wookmark is a jQuery plugin for laying out a dynamic grid of elements
- The Wookmark plugin detects the size of the window and automatically organizes the boxes into columns.
A live example of Wookmark:
Let me show you how to use Wookmark in a step by step process:
- First of all, we download Wookmark jQuery from GITHUB
- We are now going to convert the downloaded zipped file
- Create an html file and put that code below in it
- 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
// Division tag is used to divide the page according to our dimensions and as per the demand of the user.//
<div id ="main" role="main>
<ul id="tiles">
<!-- These are the grid blocks -->
<li><img src="../sample-images/image_1.jpg" alt="" />1</li>
<li><img src="../sample-images/image_2.jpg" alt="" />2</li>
<li><img src="../sample-images/image_3.jpg" alt="" />3</li>
<li><img src="../sample-images/image_4.jpg" alt="" />4</li>
<li><img src="../sample-images/image_5.jpg" alt="" />5</li>
<li><img src="../sample-images/image_6.jpg" alt="" />6</li>
<li><img src="../sample-images/image_7.jpg" alt="" />7</li>
<li><img src="../sample-images/image_8.jpg" alt="" />8</li>
<li><img src="../sample-images/image_9.jpg" alt="" />9</li>
<li><img src="../sample-images/image_10.jpg" alt="" />10</li>
<li><img src="../sample-images/image_1.jpg" alt="" />11</li>
<li><img src="../sample-images/image_2.jpg" alt="" />12</li>
<li><img src="../sample-images/image_3.jpg" alt="" />13</li>
<li><img src="../sample-images/image_4.jpg" alt="" />14</li>
<li><img src="../sample-images/image_5.jpg" alt="" />15</li>
<li><img src="../sample-images/image_6.jpg" alt="" />16</li>
<li><img src="../sample-images/image_7.jpg" alt="" />17</li>
<li><img src="../sample-images/image_8.jpg" alt="" />18</li>
<li><img src="../sample-images/image_9.jpg" alt="" />19</li>
<li><img src="../sample-images/image_10.jpg" alt="" />20</li>
<li><img src="../sample-images/image_1.jpg" alt="" />21</li>
<li><img src="../sample-images/image_2.jpg" alt="" />22</li>
<li><img src="../sample-images/image_3.jpg" alt="" />23</li>
<li><img src="../sample-images/image_4.jpg" alt="" />24</li>
<li><img src="../sample-images/image_5.jpg" alt="" />25</li>
<li><img src="../sample-images/image_6.jpg" alt="" />26</li>
<li><img src="../sample-images/image_7.jpg" alt="" />27</li>
<li><img src="../sample-images/image_8.jpg" alt="" />28</li>
<li><img src="../sample-images/image_9.jpg" alt="" />29</li>
<li><img src="../sample-images/image_10.jpg" alt="" />30</li>
</ul>
</div>
<!-- End of grid blocks -->
CSS
/**
* Grid items
*/
#tiles li {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#tiles li img {
width: 100%;
height: auto;
}
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.
<script src="js/jquery.min.js"></script> <script src="js/jquery.imagesloaded.js"></script> <script type="text/javascript" src="jquery.wookmark.js"></script>
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.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="../libs/jquery.imagesloaded.js"></script> <!-- Include the plug-in --> <script src="../jquery.wookmark.js"></script>
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.
<script type="text/javascript">
(function ($){
$('#tiles').imagesLoaded(function() {
// Prepare layout options.
var options = {
itemWidth: 300,
autoResize: true,
container: $('#main'),
offset: 5,
outerOffset: 20,
flexibleWidth: '50%'
};
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.
// Get a reference to your grid items.
var handler = $('#tiles li');
var $window = $(window);
$window.resize(function() {
var windowWidth = $window.width(),
newOptions = { flexibleWidth: '50%' };
// Breakpoint
if (windowWidth < 1024) {
newOptions.flexibleWidth = '100%';
}
handler.wookmark(newOptions);
});
// Call the layout function.
handler.wookmark(options);
});
})(jQuery);
</script>
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!
The post How To Create A Multi Column Design Layout Using Wookmark jQuery appeared first on Webmuch.
