www.webdeveloper.com
Results 1 to 11 of 11

Thread: Images filters by check boxes

  1. #1
    Join Date
    Jun 2017
    Posts
    15

    Images filters by check boxes

    Hello!

    I want to make a page like in example below.

    https://vestride.github.io/Shuffle/compound-filters

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


    Thank you!

  2. #2
    Join Date
    Jun 2017
    Posts
    15
    Instead of shapes i want to put images.
    I want to be able to filter using one or multiple check boxes.

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,877
    Then replace them with images and use a method of virtual checking and unchecking or store a value in a data- type attribute.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  4. #4
    Join Date
    Jun 2017
    Posts
    15
    I dont know how to do that.
    In this example are used images but check boxes are not.

    https://vestride.github.io/Shuffle/

  5. #5
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,877
    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.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  6. #6
    Join Date
    Jun 2017
    Posts
    15
    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/ca...ser.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.

  7. #7
    Join Date
    Dec 2012
    Posts
    1,628
    I've made a simple demo for this task. Check if it meats your needs:
    Code:
    	<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.

  8. #8
    Join Date
    Jun 2017
    Posts
    15
    Quote Originally Posted by Sempervivum View Post
    I've made a simple demo for this task. Check if it meats your needs:
    Code:
    	<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.
    Thank you, but it didnt work
    Please modify it in this link
    https://jsfiddle.net/ur0jcLbf/6/

  9. #9
    Join Date
    Dec 2012
    Posts
    1,628
    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/

  10. #10
    Join Date
    Jun 2017
    Posts
    15
    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>

  11. #11
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    5,877
    As this is not a JavaScript question but a JQuery question...

    *moved*
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.13987 seconds
  • Memory Usage 2,961KB
  • Queries Executed 15 (?)
More Information
Template Usage (34):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (3)bbcode_code
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (11)memberaction_dropdown
  • (1)navbar
  • (5)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (11)postbit
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates