jQuery Plugin For Dynamic Filtering Of Gallery Items - categoryGallery

categoryGallery is a lightweight, easy-to-use jQuery in-page filter plugin that allows you to perform a DOM filter manipulation using CSS classes and fadeIn and fadeOut elements via jQuery animate() method.

How to use it:

1. Categorize your gallery items via CSS classes as these:

<div class="col-lg-12">
  <img class="gallery-item unsplash" src="https://unsplash.it/300/300?image=1061" alt="unsplash">
  <img class="gallery-item unsplash" src="https://unsplash.it/300/300?image=1060" alt="unsplash">
  <img class="gallery-item unsplash" src="https://unsplash.it/300/300?image=1062" alt="unsplash">
  <img class="gallery-item placeimg" src="https://placeimg.com/300/300/animals" alt="placeimg">
  <img class="gallery-item placeimg" src="https://placeimg.com/300/300/arch" alt="placeimg">
  <img class="gallery-item placeimg" src="https://placeimg.com/300/300/nature" alt="placeimg">
  <img class="gallery-item lorempixel" src="http://lorempixel.com/300/300/sports" alt="lorempixel">
  <img class="gallery-item lorempixel" src="http://lorempixel.com/300/300/food" alt="lorempixel">
  <img class="gallery-item lorempixel" src="http://lorempixel.com/300/300/city" alt="lorempixel">
</div>

2. Create a group of buttons to filter the gallery items.

<div id="gallery-nav">
  <a href="#" class="category" data-filter=".unsplash"> Unsplash </a>
  <a href="#" class="category" data-filter=".placeimg"> Placeimg </a>
  <a href="#" class="category" data-filter=".lorempixel"> Lorempixel </a>
</div>

3. Wrap them into a container.

<div id="gallery">
  <!-- Filter Controls -->
  <!-- Gallery Items -->
</div>

4. Put jQuery library and the jquery.categorygallery.js script at the bottom of your html page.

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

5. Enable the filter functionality on the gallery.

$("#gallery").categorygallery();

---

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