Filter images with a button on page load
Question
I'm struggling to figure out how to have images filtered when the page loads, not just when the user clicks on the buttons in Bootstrap using Shufflejs. I'm wanting the "Fruit" button selected to show only those images when the page loads. Currently all the images show on page load. I've tried using "checked" and using the "active" attribute, but it only checks the button and still shows all of the images.
Am I missing a simple solution to this?
Here's the code:
var Shuffle = window.Shuffle; var myShuffle = new Shuffle(document.querySelector('.my-shuffle'), { itemSelector: '.image-item', sizer: '.my-sizer-element', buffer: 1, }); window.jQuery('input[name="shuffle-filter"]').on('change', function(evt) { var input = evt.currentTarget; if (input.checked) { myShuffle.filter(input.value); } });
/* default styles so shuffle doesn't have to set them (it will if they're missing) */ .my-shuffle { position: relative; overflow: hidden; } /* Make vertical gutters the same as the horizontal ones */ .image-item { margin-bottom: 30px; } /* Ensure images take up the same space when they load */ /* https://vestride.github.io/Shuffle/images */ .aspect { position: relative; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden; } .aspect__inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .aspect--16x9 { padding-bottom: 56.25%; } .aspect--9x80 { padding-bottom: calc(112.5% + 30px); } .aspect--32x9 { padding-bottom: calc(28.125% - 8px); } .image-item img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; }
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="container mt-3"> <div class="row"> <div class="col"> <p class="mb-1">Filters:</p> </div> </div> <div class="row mb-3"> <div class="col"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-outline-primary"> <input type="radio" name="shuffle-filter" value="all" checked="checked"/>All </label> <label class="btn btn-outline-primary"> <input type="radio" name="shuffle-filter" value="nature"/>Nature </label> <label class="btn btn-outline-primary.active"> <input type="radio" name="shuffle-filter" value="fruit" checked/>Fruit </label> <label class="btn btn-outline-primary"> <input type="radio" name="shuffle-filter" value="architecture"/>Architecture </label> </div> </div> </div> <div class="row my-shuffle"> <figure class="image-item col-3" data-groups="["nature"]"> <div class="aspect aspect--16x9"> <div class="aspect__inner"><img src="https://images.unsplash.com/uploads/141310026617203b5980d/c86b8baa?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=882e851a008e83b7a80d05bdc96aa817" obj.alt="obj.alt" /></div> </div> </figure> <figure class="image-item col-3" data-groups="["architecture"]"> <div class="aspect aspect--16x9"> <div class="aspect__inner"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=7ab1744fe016fb39feb2972244246359" obj.alt="obj.alt" /></div> </div> </figure> <figure class="image-item col-3" data-groups="["nature","architecture"]"> <div class="aspect aspect--9x80"> <div class="aspect__inner"><img src="https://images.unsplash.com/photo-1416184008836-5486f3e2cf58?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=601&h=676&fit=crop&s=5f1f1ffba05979d4248cc16d8eb82f0a" obj.alt="obj.alt" /></div> </div> </figure> <figure class="image-item col-3" data-groups="["fruit"]"> <div class="aspect aspect--16x9"> <div class="aspect__inner"><img src="https://images.unsplash.com/photo-1464454709131-ffd692591ee5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&h=338&fit=crop&s=eda14f45e94e9024f854b1e06708c629" obj.alt="obj.alt" /></div> </div> </figure> <div class="col-1 my-sizer-element"></div> </div> </div> </div> </body>
Here's a codepen with the code as well: https://codepen.io/anon/pen/KoZQEN
3 answers
solution1
0 2018-03-29 09:39:22
You can try adding an id on your fruit radio button element, for example foo .
Then, you can trigger a click on that element on document load:
$(document).ready(function() {
$("#foo").trigger("click");
});
If you're using this simple trigger (or even another script way of doing it), I suggest you to modify .image-item CSS like this:
.image-item {
display: none;
margin-bottom: 30px;
}
and add $(".image-item").show(); in our new function to avoid seeing the trick on page load:
$(document).ready(function() {
$("#foo").trigger("click");
$(".image-item").show();
});
You can see it in action here:
https://codepen.io/anon/pen/eMVVxg
Hope it helps.
solution2
0 ACCPTED 2018-03-29 09:45:16
$(document).ready(function() {
myShuffle.filter('fruit');
});
This should select fruits when your document is ready with loading. Add this piece of code at the start of your javascript file.
solution3
0 2019-03-04 11:43:03
I came here looking for an answer to the same problem, but couldn't get any of the solutions to work, however the contributors successfully pointed me in the right direction to finally solving it by creating a function to execute on page load:
function shuffleInit (id){ $(document).ready(function() { $('#grid').hide(); jQuery('#'+id)[0].click(); $('#grid').show(); $('#'+id).trigger('click'); });
<body onload="shuffleInit('fruit');">
Remember to add IDs to the filter divs so they can be targeted by the shuffleInit() function. Note that #grid is the default shuffle.js container for the images - I added the hide and show commands to hide the visible re-shuffle animation on page load. The last click trigger line is just a cosmetic addition highlighting the button so the user can see which filter option has been applied.
This works with Bootstrap 3. Hope it helps someone!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.