Filter images gallery with iQuery


The plugin can filter the images with data-tag and filter buttons generated automatically by data-tag attributes.

Idea Github here

Step1:
jQuery neccessary
filter-tages.js
<script src="js/jquery.min.js"></script>
<script src="js/filter-tags.js"></script>

Step2:
html
html

The button sections put filter button which will add automatically with jQuery.
And each image flitered with "data-tags".

CSS
Basic styling for buttons and images.



Step3:
JS
Select every buttons,images and create the tagged object.
Go through every tags and if the tag have nothing,just make the tagged object empty, or push the tags of images to the tagged objects.

Build buttons named show All actives with slideDown animations.


This part is a samble when clicked the filtered buttons, give it tag name and filter it with fadeIn animation.




Popular posts from this blog

Fancyapps — easily build overlay windows with carousel

Meet Tippy.js: The Complete Tooltip Popover Plugin

Meet Mantine: A TS-Based Open-Source React Components Library