Last active
August 24, 2020 08:29
-
-
Save akshaynagpal/0dd98b2abc3a8c68e251309db32daa0d to your computer and use it in GitHub Desktop.
Filter Gallery using HTML5, JavaScript, JQuery & Bootstrap Demo: https://jsbin.com/jeyadac
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Author: Akshay Nagpal (github.com/akshaynagpal) | |
| License: MIT | |
| */ | |
| $(document).ready(function(){ | |
| // clicking button with class "category-button" | |
| $(".category-button").click(function(){ | |
| // get the data-filter value of the button | |
| var filterValue = $(this).attr('data-filter'); | |
| // show all items | |
| if(filterValue == "all") | |
| { | |
| $(".all").show("slow"); | |
| } | |
| else | |
| { | |
| // hide all items | |
| $(".all").not('.'+filterValue).hide("slow"); | |
| // and then, show only items with selected data-filter value | |
| $(".all").filter('.'+filterValue).show("slow"); | |
| } | |
| }); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta name="author" content="Akshay Nagpal | akshaynagpal.me"/> | |
| <!-- Latest compiled and minified CSS --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
| <!-- jQuery library --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
| <!-- Latest compiled JavaScript --> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | |
| <script src="filter-gallery.js"></script> | |
| <title>Filter Gallery using HTML5, JavaScript, JQuery & Bootstrap</title> | |
| </head> | |
| <body> | |
| <div id="items" class="container-fluid"> | |
| <h1>Filter Gallery using HTML5, JavaScript, JQuery & Bootstrap</h1> | |
| <!-- BUTTON GROUP FOR CATEGORIES --> | |
| <div class="btn-group"> | |
| <button type="button" class="btn btn-primary category-button" data-filter = "all"> All </button> | |
| <button type="button" class="btn btn-primary category-button" data-filter = "category1"> Category 1 </button> | |
| <button type="button" class="btn btn-primary category-button" data-filter = "category2"> Category 2 </button> | |
| <button type="button" class="btn btn-primary category-button" data-filter = "category3"> Category 3 </button> | |
| <button type="button" class="btn btn-primary category-button" data-filter = "category4"> Category 4 </button> | |
| </div> | |
| <!-- END BUTTON GROUP FOR CATEGORIES --> | |
| <hr> | |
| <div class="col-sm-3 all category1 well"> | |
| <h1>ONE</h1> | |
| </div> | |
| <div class="col-sm-3 all category2 well"> | |
| <h1>TWO</h1> | |
| </div> | |
| <div class="col-sm-3 all category3 well"> | |
| <h1>THREE</h1> | |
| </div> | |
| <div class="col-sm-3 all category4 well"> | |
| <h1>FOUR</h1> | |
| </div> | |
| <div class="col-sm-3 all category2 well"> | |
| <h1>TWO</h1> | |
| </div> | |
| <div class="col-sm-3 all category1 well"> | |
| <h1>ONE</h1> | |
| </div> | |
| <div class="col-sm-3 all category4 well"> | |
| <h1>FOUR</h1> | |
| </div> | |
| <div class="col-sm-3 all category3 well"> | |
| <h1>THREE</h1> | |
| </div> | |
| <div class="col-sm-3 all category1 well"> | |
| <h1>ONE</h1> | |
| </div> | |
| <div class="col-sm-3 all category2 well"> | |
| <h1>TWO</h1> | |
| </div> | |
| <div class="col-sm-3 all category3 well"> | |
| <h1>THREE</h1> | |
| </div> | |
| <div class="col-sm-3 all category4 well"> | |
| <h1>FOUR</h1> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
I try to remove data-filter = "all" and that place set default data-filter = "category1" in bootstrap 4 but at the problem is loading time data-filter = "all" display.
i want to set loading time data-filter = "category1".
is this possible ?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi @akshaynagpal,
Is it possible to use the filter in a link? (eg. site.com/gallery?category=4)