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 ; ).
I got this far mcgraphics.us/history
css is in historystyle.css
Could you tell me what goes where?
The bottom half has more images that I’d initially placed.
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.
Loading order below correct?
? Your content didn’t come through. But looking at your demo page it is now in the correct order
Images scattered on page instead of in tidy rows.
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 : )
Thanks so much for your help
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?
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.
That was easy.
How many images should I have on a page? I have hundred of my portraits. Guess using all is too many.
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.
Can add a
data-src attribute to the image link and then set up event listeners on the
If so should I put the js in a separate file or just add to my image filtering img-filter.js?
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.