在页面加载时使用按钮过滤图像

问题描述 投票：0回答：3

我正在努力弄清楚如何在页面加载时过滤图像，而不仅仅是当用户使用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="[&quot;nature&quot;]">
          <div class="aspect aspect--16x9">
            <div class="aspect__inner"><img src="https://images.unsplash.com/uploads/141310026617203b5980d/c86b8baa?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=600&amp;h=338&amp;fit=crop&amp;s=882e851a008e83b7a80d05bdc96aa817" obj.alt="obj.alt" /></div>
          </div>
        </figure>
        <figure class="image-item col-3" data-groups="[&quot;architecture&quot;]">
          <div class="aspect aspect--16x9">
            <div class="aspect__inner"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=600&amp;h=338&amp;fit=crop&amp;s=7ab1744fe016fb39feb2972244246359" obj.alt="obj.alt" /></div>
          </div>
        </figure>
        <figure class="image-item col-3" data-groups="[&quot;nature&quot;,&quot;architecture&quot;]">
          <div class="aspect aspect--9x80">
            <div class="aspect__inner"><img src="https://images.unsplash.com/photo-1416184008836-5486f3e2cf58?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=601&amp;h=676&amp;fit=crop&amp;s=5f1f1ffba05979d4248cc16d8eb82f0a" obj.alt="obj.alt" /></div>
          </div>
        </figure>
        <figure class="image-item col-3" data-groups="[&quot;fruit&quot;]">
          <div class="aspect aspect--16x9">
            <div class="aspect__inner"><img src="https://images.unsplash.com/photo-1464454709131-ffd692591ee5?ixlib=rb-0.3.5&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=600&amp;h=338&amp;fit=crop&amp;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

javascript twitter-bootstrap
3个回答
0
投票
$(document).ready(function() { 
    myShuffle.filter('fruit');
});

这应该在您的文档准备好加载时选择水果。在javascript文件的开头添加这段代码。

0
投票

您可以尝试在水果单选按钮元素上添加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

希望能帮助到你。

0
投票

我来到这里寻找同样问题的答案，但无法使任何解决方案起作用，但是贡献者成功地指出了我正确的方向，最终通过创建一个在页面加载时执行的函数来解决它：

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.希望它可以帮助某人！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.