I’m trying to figure out how to set up gallery image filtering. And whether to use foundation or bootstrap. Help please
- Put together your filtering buttons, each should have a data attribute like
data-filterthat corresponds to the particular images you want displayed, as well as a common class like
- Next, put together a flexbox grid of your pictures. Each should have two classes, one that is common to all to identify them as a gallery item, like
filter-itemand one for the filter term, like
filter-buttonclass and add a click listener. The click listener function should read the
data-filterattribute of the button and then adjust the visibility of the appropriate images - either hiding them or making them appear.
Here is a CodePen link. It uses Foundation and jQuery.
This looks great. Thanks. Now lets see if I can do it ; ).
This post was flagged by the community and is temporarily hidden.
Everything looks good. The only change that you need to make is to load the jQuery before you load the img-filter.js. Also, you should only load one version of the foundation.js. You are loading in version 5 just after loading in jQuery and then the newer 6.6.3 after the foundation script initialization. If you want to use the newer version, move the CDN
before the initialization script
<script> $(document).foundation(); </script>
Then switch the order of the jQuery load
and your script
Let me know if it works or if you need more help.
It’s working - hooray!
Where do I put your copyright?
I want to switch the buttons from the 3 col images to the 4 col images at the bottom of the page
Top All button isn’t working.
Thanks so much for your help.
Change your data filter for the all button to “all”. Looks great!
All now works!
I want use bottom images with captions. Tried 2 musicians but doesn’t after adding “…filter-item music"
Not sure if you are still having problems from your last post. Can you clarify?
Also, your script loading should reverse the .foundation() and actually loading foundation from the CDN. In order to insure it will work properly you should have Foundation loaded before you invoke one of its functions.