Question

我有jquery轮播（cycle2）和弹出窗口（lightgallery），你会看到我的旋转木马示例，这个例子效果很好，正如我所期待的那样

$(document).ready(function(){
  
  function generateSlider(){
    $('.mySlideShow').cycle({
    next: "#single-right",
    pauseOnHover: true,
    log: false,
    pager: "#single-pager",
    pagerTemplate: "<a href='#'><img src='{{src}}' width=48 height=48></a>",
    prev: "#single-left",
    slides: "img[data-hidden='false']"
  });
  }
  
  generateSlider();

  
  $(".filter li").on("click",function(){ 
     var activeId = $(this).attr("id");
     if(activeId == "show-all"){
       $("img[data-id]").attr("data-hidden", "false");
     } else {
      $("img[data-id]").attr("data-hidden", "true"); 
      $("img[data-id = '" + activeId + "']").attr("data-hidden", "false");   
     }
      $('.mySlideShow').cycle('destroy');
      generateSlider();
  });
});

.single-gallery{
  width:800px;
  overflow:hidden;
  position:relative;
}
.cycle-slideshow img {
  width:100%;
  height:494px;
  max-width:100%;
}

#single-pager a img {
  width: 49.3px !important;
  height:49.3px !important;
  border: 1px solid #fff;
}

#single-pager a.cycle-pager-active img {
  opacity: 0.4;
}

#single-left,
#single-right {
  position: absolute;
  top: 50%;
  z-index: 1000;
  background: rgba(255, 255, 255, .8);
  padding: 12px;
  cursor: pointer;
}

#single-left {
  left: 0;
}

#single-right {
  right: 0;
}

.filter {
  position: absolute;
  z-index: 1000;
  right: 0;
  top:0;
  padding: 0;
  color: #FFF;
  background: rgba(255, 255, 255, 0.6);
  padding: 10px 30px;
}

.filter li {
  list-style-type:none;
  cursor: pointer;
  display: inline-block;
  background: rgba(0, 0, 0, .6);
  padding: 5px;
}

img[data-hidden="true"]{
  display: none;
}

<link href="https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css" rel="stylesheet"/>

<div class="single-gallery">
  <div class="mySlideShow">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" data-id="sports" data-hidden="false">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sunny-day-lightbox.jpg" data-id="naturel" data-hidden="false">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-id="animals" data-hidden="false">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sakura%20trees-lightbox.jpg" data-id="animals" data-hidden="false"/>
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-id="animals" data-hidden="false"/>
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-id="animals" data-hidden="false"/>
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-id="sports" data-hidden="false"/>
  <div id="single-pager" class="center external"></div>
    
  <div id="single-next-prev">
    <span id="single-left">Prev</span>
    <span id="single-right">Next</span>
  </div>
  </div>

  <ul class="filter">
    <li id="sports">Sports</li>
    <li id="naturel">Naturel</li>
    <li id="animals">Animals</li>
    <li id="show-all">All</li>
  </ul>
</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://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.9/js/lightgallery.min.js"></script>

但如果我用a包裹我的èach图像，而不是我的过滤效果不如你所见 - please click to see example

我想知道我的代码有什么问题？

Answer 1

好的，传呼机搞砸了，但这就是我得到的：

将only proceed if (limit is true){ onclick function a; onclick function b; }更改为slides:
将"a[data-hidden='false']"函数中的img的每个实例替换为a。
.click到`a [data-hidden =“true”] {display：none;到}
将img[data-hidden="true"]{ display: none; to }替换为pagerTemplate: "<a href='#'><img src='{{src}}' width=48 height=48></a>"

pagerTemplate: "<a href='#'><img src='{{children.0.src}}' width=48 height=48></a>"

$(document).ready(function() {
  function generateSlider() {
    $(".mySlideShow").cycle({
      next: "#single-right",
      log: false,
      fx: "fade",
      caption: ".cycle-caption",
      captionTemplate: "{{title}}",
      pauseOnHover: true,
      pager: "#single-pager",
      pagerTemplate: "<a href='#'><img src='{{children.0.src}}' width=60 height=60></a>",
      prev: "#single-left",
      slides: "a[data-hidden='false']"
    });
  }

  generateSlider();

  $(".filter li").on("click", function() {
    var activeId = $(this).attr("id");
    if (activeId == "show-all") {
      $("a").attr("data-hidden", "false");
    } else {
      $("a").attr("data-hidden", "true");
      $("a[data-id = '" + activeId + "']").attr("data-hidden", "false");
    }
    $(".mySlideShow").cycle("destroy");
    generateSlider();
  });

  $(" .mySlideShow").lightGallery({
    exThumbImage: "data-exthumbimage",
    download: false,
    thumbnail: true,
    loadYoutubeThumbnail: true,
    youtubeThumbSize: "default",
    loadVimeoThumbnail: true,
    vimeoThumbSize: "thumbnail_medium"
  });
});

.single-gallery {
  width: 800px;
  overflow: hidden;
  position: relative;
}

.cycle-slideshow img {
  width: 100%;
  height: 494px;
  max-width: 100%;
}

#single-pager a img {
  width: 49.3px !important;
  height: 49.3px !important;
  border: 1px solid #fff;
}

#single-pager a.cycle-pager-active img {
  opacity: 0.4;
}

#single-left,
#single-right {
  position: absolute;
  top: 50%;
  z-index: 1000;
  background: rgba(255, 255, 255, .8);
  padding: 12px;
  cursor: pointer;
}

#single-left {
  left: 0;
}

#single-right {
  right: 0;
}

.filter {
  position: absolute;
  z-index: 1000;
  right: 0;
  top: 0;
  padding: 0;
  color: #FFF;
  background: rgba(255, 255, 255, 0.6);
  padding: 10px 30px;
}

.filter li {
  list-style-type: none;
  cursor: pointer;
  display: inline-block;
  background: rgba(0, 0, 0, .6);
  padding: 5px;
}

a[data-hidden="true"] {
  display: none;
}

CodePen

如何使用jquery创建图库

1 个答案: