/    Sign up×
Community /Pin to ProfileBookmark

Images filters by check boxes

Copy linkTweet thisAlerts:
Feb 07.2018

Hello!

I want to make a page like in example below.

[URL=”https://vestride.github.io/Shuffle/compound-filters”]https://vestride.github.io/Shuffle/compound-filters[/URL]

I want to use only check boxes, like in Shapes section on right.
Can you make this easier?

Thank you!

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@deplasare1authorFeb 07.2018 — Instead of shapes i want to put images.

I want to be able to filter using one or multiple check boxes.
Copy linkTweet thisAlerts:
@rootFeb 07.2018 — Then replace them with images and use a method of virtual checking and unchecking or store a value in a data- type attribute.
Copy linkTweet thisAlerts:
@deplasare1authorFeb 07.2018 — I dont know how to do that.

In this example are used images but check boxes are not.

https://vestride.github.io/Shuffle/
Copy linkTweet thisAlerts:
@rootFeb 08.2018 — You replace the check box with an image, set an onclick trigger to call the same processes that resulted in checking or unchecking that box.

You can do similar with web form buttons, either have a button or an image to click.

Several ways of doing this and its up to you to decide on what way you want to go.

You haven't shown any code you wrote so we have no idea if you're on the right track.

When you do, use the forum BB Code tags (see my signature) and post in the forum, not a link to a git or bin hub.
Copy linkTweet thisAlerts:
@deplasare1authorFeb 09.2018 — This website is way more complicate that i want. It use a separate list of attributes for images. http://hearthstonelabs.com/cards#lang=enUS

JS code: http://hearthstonelabs.com/lib/js/cardBrowser.js?v=3.5.1

I just want an example with 3 buttons: cats, dogs and birds. If one ore more buttons are active to filter my images:

cat1.png, cat2.png, dog1.png, dog2.png, bird1.png, bird2.png.

If someone can provide the code I will be grateful.
Copy linkTweet thisAlerts:
@SempervivumFeb 09.2018 — I've made a simple demo for this task. Check if it meats your needs:
<div id="gallery1">
<input type="checkbox"value="dia">dia
<input type="checkbox"value="cat">cat
<input type="checkbox"value="button">button
<img src="images/dia0.jpg">
<img src="images/dia1.jpg">
<img src="images/dia2.jpg">
<img src="images/catimage11.png">
<img src="images/catimage12.png">
<img src="images/catimage13.png">
<img src="images/buttondownload.png">
<img src="images/buttonpause.png">
<img src="images/buttonplay.png">
</div>
<script>
$("#gallery1 input").on("change", function() {
$("#gallery1 img").css("display", "none");
$("#gallery1 input:checked").each(function(idx, item) {
$("#gallery1 img[src*='" + item.value + "']").css("display", "inline");
})
})
</script>This code uses jQuery, don't forget to include it.
Copy linkTweet thisAlerts:
@deplasare1authorFeb 09.2018 — I've made a simple demo for this task. Check if it meats your needs:
<div id="gallery1">
<input type="checkbox"value="dia">dia
<input type="checkbox"value="cat">cat
<input type="checkbox"value="button">button
<img src="images/dia0.jpg">
<img src="images/dia1.jpg">
<img src="images/dia2.jpg">
<img src="images/catimage11.png">
<img src="images/catimage12.png">
<img src="images/catimage13.png">
<img src="images/buttondownload.png">
<img src="images/buttonpause.png">
<img src="images/buttonplay.png">
</div>
<script>
$("#gallery1 input").on("change", function() {
$("#gallery1 img").css("display", "none");
$("#gallery1 input:checked").each(function(idx, item) {
$("#gallery1 img[src*='" + item.value + "']").css("display", "inline");
})
})
</script>This code uses jQuery, don't forget to include it.[/QUOTE]

Thank you, but it didnt work

Please modify it in this link

https://jsfiddle.net/ur0jcLbf/6/
Copy linkTweet thisAlerts:
@SempervivumFeb 09.2018 — 
  • 1. jQuery needs to be included

  • 2. My code depended on the keyword (e. g. "cat") being part of the filename. I fixed this by adding a data attribute, e. g. data-tag="cat" to the images. This tag has to be equal to the value of the corresponding checkbox.

    https://jsfiddle.net/Sempervivum/56pj4m3y/2/
    • Copy linkTweet thisAlerts:
    @deplasare1authorFeb 09.2018 — Thank you Sempervivum!

    My final code is https://jsfiddle.net/ur0jcLbf/25/

    [CODE]<!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="gallery1">
    <input type="checkbox" value="dog" checked>Dog
    <input type="checkbox" value="cat" checked>Cat
    <input type="checkbox" value="bird" checked>Bird
    <input type="checkbox" value="cute" checked>Cute
    <br>
    <!-- DOG -->
    <img class="dog" src="https://image.ibb.co/ev36Dx/1.jpg">
    <img class="cute dog" src="https://image.ibb.co/cyXNmH/2.jpg">
    <!-- CAT -->
    <img class="cat" src="https://image.ibb.co/d3Rttx/3.jpg">
    <img class="cat" src="https://image.ibb.co/npueYx/4.jpg">
    <!-- Bird -->
    <img class="bird" src="https://image.ibb.co/mZE2mH/5.jpg">
    <img class="cute bird" src="https://image.ibb.co/iWaWfc/6.jpg">
    </div>
    <script>
    $("#gallery1 input").on("change", function() {
    $("#gallery1 input").each(function (i, cb) {
    if (!cb.checked)
    $("#gallery1").find("." + this.value).css("display", "none");
    });
    $("#gallery1 input").each(function (i, cb) {
    if (cb.checked)
    $("#gallery1").find("." + this.value).css("display", "inline");
    });
    })
    </script>

    </body>
    </html>[/CODE]
    Copy linkTweet thisAlerts:
    @rootFeb 09.2018 — As this is not a JavaScript question but a JQuery question...

    *moved*
    ×

    Success!

    Help @deplasare1 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.16,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...