Gallery filtering

Beginners
#1

I’m trying to figure out how to set up gallery image filtering. And whether to use foundation or bootstrap. Help please

#2

if ur interested in doing it without javascript, and just using CSS… here’s an idea.

#3

Hey @kat,
@droidgoo is correct about having to use JS for either Bootstrap or Foundation. It comes down to your choice between the two frameworks because the set-up is the same for both.

  1. Put together your filtering buttons, each should have a data attribute like data-filter that corresponds to the particular images you want displayed, as well as a common class like filter-button.
  2. 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-item and one for the filter term, like animals.
  3. Then you need to add JavaScript, either to the page or with a separate file. The script should target each button through the filter-button class and add a click listener. The click listener function should read the data-filter attribute 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.
#4

This looks great. Thanks. Now lets see if I can do it ; ).

#5

This post was flagged by the community and is temporarily hidden.

#6

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

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/js/foundation.min.js"></script>

before the initialization script

<script> $(document).foundation(); </script>

and delete

<script src="js/foundation.min.js"></script>
Then switch the order of the jQuery load

<script src="js/vendor/jquery.js"></script>

and your script

<script type="text/javascript" src="js/img-filter.js"></script>
Let me know if it works or if you need more help.
Bob

#7

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.

Onward.

Thanks so much for your help.

Kat

#8

Change your data filter for the all button to “all”. Looks great!

#9

All now works!

I want use bottom images with captions. Tried 2 musicians but doesn’t after adding “…filter-item music"

Weber
#10

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.

#11

Loading order below correct?