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

I got this far mcgraphics.us/history
css is in historystyle.css

img-filter.js

Could you tell me what goes where?
I don’t know javascript.

The bottom half has more images that I’d initially placed.

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?

12

? Your content didn’t come through. But looking at your demo page it is now in the correct order

13

Images scattered on page instead of in tidy rows.

14

I relinked to new images with captions which come up scattered on page instead of neat rows when I click a category button.
But clicking works : )

Bizet

Thanks so much for your help

15

It is because you are separating them into individual rows. You need to let flexbox take care of flowing them onto the next rows. Does this make sense?
The JavaScript is hiding any that aren’t selected, but still keeping the row designation. Just put them all into a single row element.

16

Think I understand, just drag the image area boxes out of their rows in the Pinegrow tree.

Also is there a tutorial on how to respond in the forum?
I got spammed when i put up a link to the page you’ve been helping me with.
And I noticed my code disappeared when I put up a small section of html.

17

That was easy.

How many images should I have on a page? I have hundred of my portraits. Guess using all is too many.

18

Not sure why your post was hidden - nothing looked inappropriate to me.
I have no idea of how many would be to many. At some point your page is going to slow way down. You need to either have some lazy loading or maybe a spinner while the images are loading in.

19

Can add a data-src attribute to the image link and then set up event listeners on the scroll , resize and orientationChange?

If so should I put the js in a separate file or just add to my image filtering img-filter.js?

20

You could lazy-load that way. The thing that I’m not sure about is what will happen when you filter them. Depending on how many haven’t been loaded, it might create a slightly delayed load.
You can either choose to put it with the img-filter.js, or in a separate file. It doesn’t matter.