使用页面加载按钮过滤图像
[英]Filter images with a button on page load
问题描述
我正在努力弄清楚如何在加载页面时过滤图像，而不仅仅是在用户使用Shufflejs单击Bootstrap中的按钮时。 我希望选择“水果”按钮，以便在页面加载时仅显示那些图像。 当前，所有图像都在页面加载时显示。 我尝试使用“已检查”和“活动”属性，但它仅检查按钮并仍显示所有图像。
我是否错过了一个简单的解决方案？
这是代码：
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>
这也是一个带有代码的codepen： https ://codepen.io/anon/pen/KoZQEN
3 个解决方案
解决方案1
0 2018-03-29 09:39:22
您可以尝试在水果单选按钮元素上添加一个id ，例如foo 。
然后，您可以在文档加载时触发对该元素的单击：
$(document).ready(function() {
$("#foo").trigger("click");
});
如果您使用此简单触发器（或什至使用另一种脚本方式），建议您像下面这样修改.image-item CSS：
.image-item {
display: none;
margin-bottom: 30px;
}
并添加$(".image-item").show(); 在我们的新函数中，以避免看到页面加载的窍门：
$(document).ready(function() {
$("#foo").trigger("click");
$(".image-item").show();
});
您可以在此处查看它的运行情况：
https://codepen.io/anon/pen/eMVVxg
希望能帮助到你。
解决方案2
0 已采纳 2018-03-29 09:45:16
$(document).ready(function() {
myShuffle.filter('fruit');
});
当文档准备好加载时，这应该选择水果。 在您的javascript文件的开头添加这段代码。
解决方案3
0 2019-03-04 11:43:03
我来这里的目的是寻找相同问题的答案，但无法获得任何解决方案，但是贡献者成功地向我指出了正确的方向，通过创建一个在页面加载时执行的函数最终解决了该问题：
function shuffleInit (id){ $(document).ready(function() { $('#grid').hide(); jQuery('#'+id)[0].click(); $('#grid').show(); $('#'+id).trigger('click'); });
<body onload="shuffleInit('fruit');">
请记住将ID添加到过滤器div，以便shuffleInit（）函数可以将其作为目标。 请注意，＃grid是图像的默认shuffle.js容器-我添加了hide和show命令以隐藏页面加载时可见的重新随机播放动画。 最后一次点击触发线只是突出显示按钮的外观，因此用户可以看到已应用了哪个过滤器选项。
这可与Bootstrap 3配合使用。希望对您有所帮助！
Shuffle.js-在页面加载时过滤图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.