Minimal Filterable Gallery Plugin For jQuery - Liquo

File Size: 9.61 KB
Views Total: 5153
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Filterable Gallery Plugin For jQuery - Liquo

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.

<ul id="gallery">
  <li data-liquo="1">
    <img src="1.jpg">
  </li>
  <li data-liquo="2">
    <img src="2.jpg">
  </li>
  <li data-liquo="3">
    <img src="3.jpg">
  </li>
  <li  data-liquo="3">
    <img src="3.jpg">
  </li>
  <li data-liquo="2">
    <img src="1.jpg">
  </li>
  <li data-liquo="1">
      <img src="2.jpg">
  </li>
</ul>

2. Create a group of menu links which will act as filter controls.

<div id="gallery-menu">
  <a href="#" data-liquo="all">All</a>
  <a href="#" data-liquo="1">Category 1</a>
  <a href="#" data-liquo="2">Category 2</a>
  <a href="#" data-liquo="3">Category 3</a>
  <a href="#" data-liquo="4">Invalid Category</a>
</div>

3. Apply your own CSS styles to the gallery.

.liquo-gallery {
  margin: 0;
  padding: 0;
}

.liquo-gallery li {
  list-style-type: none;
  display: inline-block;
}

.liquo-active { font-weight: bold; }

4. Link to the required JavaScript files.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="liquo/liquo.min.js"></script>

5. Initialize the gallery like this.

$("#gallery").liquo({
  menu: "#gallery-menu"
});

6. Randomize the category order on page load.

$("#gallery").liquo({
  menu: "#gallery-menu",
  random: true
});

7. Set the starting category.

$("#gallery").liquo({
  menu: "#gallery-menu",
  start: "all"
});

This awesome jQuery plugin is developed by RyanFitzgerald. For more Advanced Usages, please check the demo page or visit the official website.