This time I will share jQuery Plugin and tutorial about Minimal Filterable Gallery Plugin For jQuery – Liquo, hope it will help you in programming stack.
Liquo is a super light jQuery plugin that lets you create a filterable photo gallery with a subtle shuffle effect using HTML5 data
attributes. The plugin also allows you to randomize the order of images as well as setting the starting category on page load.
How to use it:
1. Create a gallery list and categorize the images using data-liquo
attribute in the li
tags.
2. Create a group of menu links which will act as filter controls.
1 |
< div id = "gallery-menu" > |
2 |
< a href = "#" data-liquo = "all" >All</ a > |
3 |
< a href = "#" data-liquo = "1" >Category 1</ a > |
4 |
< a href = "#" data-liquo = "2" >Category 2</ a > |
5 |
< a href = "#" data-liquo = "3" >Category 3</ a > |
6 |
< a href = "#" data-liquo = "4" >Invalid Category</ a > |
3. Apply your own CSS styles to the gallery.
07 |
list-style-type : none ; |
08 |
display : inline- block ; |
11 |
.liquo-active { font-weight : bold ; } |
4. Link to the required JavaScript files.
1 |
< script src = "//code.jquery.com/jquery.min.js" ></ script > |
2 |
< script src = "liquo/liquo.min.js" ></ script > |
5. Initialize the gallery like this.
6. Randomize the category order on page load.
7. Set the starting category.
This awesome jQuery plugin is developed by RyanFitzgerald. For more Advanced Usages, please check the demo page or visit the official website.