javascript - 带过滤器的轮播画廊

Question

我会用我有限的英语向你解释我正在尝试做的事情

1. 我的页面上有一个图片库，我创建了这个图片库 与 cycle2和 lightGallery
2. 我的轮播上有一个过滤器链接(动物、运动、自然、所有)

那我想做什么？

例如:如果我点击动物，则只显示[data-id="animal"] div 并隐藏不同于[data-id="animal"] 的另一个div

到目前为止我做了什么？

我已经正确地创建了我的画廊。到目前为止，它运行良好，正如我所期望的那样。cycle2 正在运行，当您单击任何图像时，它会在弹出窗口(lightgallery)上打开

到目前为止我还没有做什么？

在您单击任何类别之前一切正常。当您选择任何类别时，cycle2 或 lightgallery 都不起作用..

然后，在此过滤之后，lightgallery 必须工作或再次生成(我猜)。

更简单地说我想要什么？

可过滤的照片/图片库只有这个我想要的东西

您可以向我们展示任何示例吗？

例如this - 仅作为逻辑 - 但这是唯一的示例，我只想使用 cycle2 和 jquery 我需要改进自己并在 jquery 上看到一些东西。

如果您检查我的类别 ID、名称和 .item 数据 ID 名称，我相信您会明白我要做什么。

$(document).ready(function() {
  function generateSlider() {
    $('#myCarousel').cycle({
      next: "#single-right",
      log: false,
      fx: 'fade',
      caption: '.cycle-caption',
      captionTemplate: "{{title}}",
      pauseOnHover: true,
      pager: "#single-pager",
      pagerTemplate: "<img class='lazyload' data-src='{{exthumbimage}}'' width='60' height='60'>",
      prev: "#single-left",
      slides: "div[data-hidden='false']"
    });
  }
  generateSlider();

  $('#myCarousel').lightGallery({
    selector: "div[data-hidden='false']",
    exThumbImage: "data-exthumbimage",
    loadYoutubeThumbnail: true,
    youtubeThumbSize: 'default',
    loadVimeoThumbnail: true,
    vimeoThumbSize: 'thumbnail_medium',
  });



  $("#filter li").on("click", function() {
    var activeId = $(this).attr("id");
    if (activeId == "show-all") {
      $("div").attr("data-hidden", "false");
    } else {
      $("div").attr("data-hidden", "true");
      $("div[data-id = '" + activeId + "']").attr("data-hidden", "false");
    }
    $("#myCarousel").cycle("destroy");
    generateSlider();
    return false;
  });

});

.mySlideShow {
  width: 700px;
  position: relative;
}

.item img {
  cursor: pointer;
}

#single-pager img {
  margin: 3px;
  cursor: pointer;
  width: 60px;
  height: 60px;
}

#filter {
  position: absolute;
  top: 0;
  right: 10%;
  z-index: 100;
}

#filter li {
  display: inline-block;
  background: rgba(0, 0, 0, .7);
  color: #FFF;
  cursor: pointer;
  padding: 12px;
}

.cycle-caption {
  position: absolute;
  bottom: 14%;
  left: 0;
  padding: 12px;
  background: rgba(0, 0, 0, .5);
  color: #FFF;
  text-align: center;
  width: 100%;
  z-index: 100;
}

<link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css'>

<div class="mySlideShow">
  <div id="myCarousel">
    <div class="item" data-src="http://images.freeimages.com/images/previews/49a/massive-gear-1255802.jpg" data-exthumbimage="http://images.freeimages.com/images/previews/fa7/my-ride-1552678.jpg" data-id="animals" data-hidden="false" data-title="image 1">
      <img class="lazyload" data-src="http://images.freeimages.com/images/previews/f7a/gear-1462890.jpg" />
    </div>
    <div class="item" data-src="http://images.freeimages.com/images/previews/7ae/autos-1194364.jpg" data-exthumbimage="http://images.freeimages.com/images/previews/5f6/kaputtes-auto-1564173.jpg" data-id="sports" data-hidden="false" data-title="image 2">
      <img class="lazyload" data-src="http://images.freeimages.com/images/previews/20e/some-grill-1450817.jpg" />
    </div>


    <div class="item" data-src="https://vimeo.com/1084537" data-exthumbimage="http://sachinchoolur.github.io/lightGallery/static/img/thumb-v-y-2.jpg" data-id="natural" data-hidden="false" data-title="this is the video">
      <img class="lazyload" data-src="http://images.freeimages.com/images/previews/c23/cat-1396828.jpg" />
    </div>

  </div>
  <div id="single-pager">
  </div>
  <ul id="filter">
    <li id="animals">Animals</li>
    <li id="sports">Sports</li>
    <li id="natural">Natural</li>
    <li id="show-all">All</li>
  </ul>
  <div class="cycle-caption"></div>
</div>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js'></script>
<script src='https://cdn.jsdelivr.net/g/lightgallery@1.3.5,lg-fullscreen@1.0.1,lg-hash@1.0.1,lg-pager@1.0.1,lg-share@1.0.1,lg-thumbnail@1.0.1,lg-video@1.0.1,lg-autoplay@1.0.1'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lazysizes/3.0.0/lazysizes.min.js'></script>
<script src='https://f.vimeocdn.com/js/froogaloop2.min.js'></script>

此外，您可以在 codepen too 上看到我的演示

Answer 1

您必须在 CSS 中指定以使 data-hidden=true 实际隐藏。

div[data-hidden=true] {
    display: none;
}