🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

categoryGallery is a jQuery filter plugin that allows you to perform a DOM filter manipulation using CSS classes and fadeIn and fadeOut elements via jQuery animate() method.

Filter

Documentation

categorygallery

Enables gallery + nav to indicate images based on selected category by making non-selected category images (& non-active links) semi-transparent

Copyright 2016, Kelly Meyers http://merexcursion.com

Released under the GPL v3 License http://www.gnu.org/licenses/gpl.html This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

VIEW EXAMPLE HERE: http://goodmonsterdesign.com/github-examples/categorygallery.php

Instructions:

  1. Wrap gallery images and category nav list in containing element with id="your-gallery-name"

  2. Give each gallery link class "category", and each gallery image or img container class "gallery-item"

  3. To each .gallery-item, add a class name for the category(s) it belongs to (ex: web, illustration, animation...)

  4. Add to each gallery link data-filter=".category-name" to select the category(s) added to gallery items when clicked

  5. Add a script link to the categorygallery plugin file in the document head after jQuery lib and activate plugin on element in jQuery doc ready fn: $('#your-gallery-name').categorygallery();

You may override class names .category & .gallery-item with options: $('#your-gallery-name').categorygallery( { 'navLink':'.your-link-class', 'galleryItem':'.your-gallery-item-class' } ); You can use the '*' for the data-filter to show all


You May Also Like