时间戳

首页 > 解决方案 > Shuffle.js - 在页面加载时过滤图像

javascript - Shuffle.js - 在页面加载时过滤图像

问题描述

有 2 个选项卡（数据组）- 图形和徽标，带有图像，每个有 3 个图像，总共 6 个图像。过滤器效果很好，当您单击第一个选项卡时，它会变为活动状态并显示 3 个已过滤并属于第一个数据组（图形）的图像。但是当您刷新页面时，您也会看到第一个活动选项卡（数据组图形），但显示所有 6 张图像，这是错误的。过滤器仅在您单击选项卡时才开始工作。它应该只显示与数据组匹配的 3 个。我已经尝试了这篇文章中的几个脚本和解决方案。没有任何效果。有什么解决办法吗？

function portfolio_init() {
  var portfolio_grid = $('#portfolio_grid'),
    portfolio_filter = $('#portfolio_filters');

  if (portfolio_grid) {

    portfolio_grid.shuffle({
      speed: 450,
      itemSelector: 'figure'
    });

    $('.site-main-menu').on("click", "a", function(e) {
      portfolio_grid.shuffle('update');
    });


    portfolio_filter.on("click", ".filter", function(e) {
      portfolio_grid.shuffle('update');
      e.preventDefault();
      $('#portfolio_filters .filter').parent().removeClass('active');
      $(this).parent().addClass('active');
      portfolio_grid.shuffle('shuffle', $(this).attr('data-group'));
    });

  }
}
<!-- Portfolio Subpage -->
<section class="pt-page pt-page-4" data-id="portfolio">
  <div class="border-block-top-110"></div>
  <div class="section-inner">
    <div class="section-title-block">
      <div class="section-title-wrapper">
        <h2 class="section-title">Portfolio</h2>
        <h5 class="section-description">Works</h5>
      </div>
    </div>

    <!-- Portfolio Content -->
    <div class="portfolio-content">

      <!-- Portfolio filter -->
      <ul id="portfolio_filters" class="portfolio-filters">
        <li class="active">
          <a class="filter btn btn-sm btn-link active" data-group="graphics">Graphics</a>
        </li>
        <li>
          <a class="filter btn btn-sm btn-link" data-group="logo">Logo</a>
        </li>
        <li>
          <a class="filter btn btn-sm btn-link" data-group="print">Print</a>
        </li>
        <li>
          <a class="filter btn btn-sm btn-link" data-group="billboards">Billboards</a>
        </li>
        <li>
          <a class="filter btn btn-sm btn-link" data-group="misc">Misc</a>
        </li>
        <li>
          <a class="filter btn btn-sm btn-link" data-group="photo">Photo</a>
        </li>
      </ul>
      <!-- End of Portfolio filter -->

      <!-- Portfolio Grid -->
      <div id="portfolio_grid" class="portfolio-grid portfolio-masonry masonry-grid-3">

        <!-- Portfolio 1 - Graphics -->
        <figure class="item gallery" data-groups='["graphics"]'>
          <a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="bnr 1">
            <img src="images/portfolio/3.jpg" alt="">
            <div>
              <h5 class="name">bnr 1</h5>
              <small>Graphics</small>
              <i class="pe-7s-icon pe-7s-photo"></i>
            </div>
          </a>
          <a href="images/portfolio/full/4.jpg" title="bnr 1"></a>
          <a href="images/portfolio/full/5.jpg" title="bnr 2"></a>
        </figure>

        <figure class="item gallery" data-groups='["graphics"]'>
          <a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="bnr 2">
            <img src="images/portfolio/3.jpg" alt="">
            <div>
              <h5 class="name">bnr 2</h5>
              <small>Graphics</small>
              <i class="pe-7s-icon pe-7s-photo"></i>
            </div>
          </a>
          <a href="images/portfolio/full/4.jpg" title="Some text"></a>
          <a href="images/portfolio/full/5.jpg" title="Some text"></a>
        </figure>

        <figure class="item gallery" data-groups='["graphics"]'>
          <a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="bnr 3">
            <img src="images/portfolio/3.jpg" alt="">
            <div>
              <h5 class="name">bnr 3</h5>
              <small>Graphics</small>
              <i class="pe-7s-icon pe-7s-photo"></i>
            </div>
          </a>
          <a href="images/portfolio/full/4.jpg" title="Some text"></a>
          <a href="images/portfolio/full/5.jpg" title="Some text"></a>
        </figure>
        <!-- /Portfolio 1 - Graphics -->


        <!-- Portfolio 2 - Logo -->
        <figure class="item gallery" data-groups='["logo"]'>
          <a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="logo 1">
            <img src="images/portfolio/3.jpg" alt="">
            <div>
              <h5 class="name">logo 1</h5>
              <small>Logo</small>
              <i class="pe-7s-icon pe-7s-photo"></i>
            </div>
          </a>
          <a href="images/portfolio/full/4.jpg" title="bnr 1"></a>
          <a href="images/portfolio/full/5.jpg" title="bnr 2"></a>
        </figure>

        <figure class="item gallery" data-groups='["logo"]'>
          <a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="logo 2">
            <img src="images/portfolio/3.jpg" alt="">
            <div>
              <h5 class="name">logo 2</h5>
              <small>Logo</small>
              <i class="pe-7s-icon pe-7s-photo"></i>
            </div>
          </a>
          <a href="images/portfolio/full/4.jpg" title="Some text"></a>
          <a href="images/portfolio/full/5.jpg" title="Some text"></a>
        </figure>

        <figure class="item gallery" data-groups='["logo"]'>
          <a href="images/portfolio/full/3.jpg" class="lightbox f-gallery" title="logo 3">
            <img src="images/portfolio/3.jpg" alt="">
            <div>
              <h5 class="name">logo 3</h5>
              <small>Logo</small>
              <i class="pe-7s-icon pe-7s-photo"></i>
            </div>
          </a>
          <a href="images/portfolio/full/4.jpg" title="Some text"></a>
          <a href="images/portfolio/full/5.jpg" title="Some text"></a>
        </figure>
        <!-- /Portfolio 2 - Logo -->


      </div>
      <!-- /Portfolio Grid -->

    </div>
    <!-- /Portfolio Content -->
  </div>

</section>
<!-- /Portfolio Subpage -->

标签： javascriptjqueryhtml

解决方案

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

function shuffleInit (id){
	$(document).ready(function() {
		$('#grid').hide();
        jQuery('#'+id)[0].click();
        $('#grid').show();
		$('#'+id).trigger('click');
	});
<body onload="shuffleInit('graphics');">

请记住将 ID 添加到过滤器 div，以便它们可以被 shuffleInit() 函数定位。请注意，#grid 是图像的默认 shuffle.js 容器 - 我添加了 hide 和 show 命令以在页面加载时隐藏可见的重新随机播放动画。最后一次点击触发线只是一个突出按钮的装饰性添加，因此用户可以看到已应用了哪个过滤器选项。

这适用于 Bootstrap 3。希望它对某人有所帮助！

推荐阅读