Cycle2の画像カテゴリ

Question

私はcycle2 carouselプラグインの助けを借りてギャラリーを作成しました。私はカルーセルにul.li要素を書く理由があります。カテゴリをクリックすると関連する画像が開く必要があります。どのように私はそれを行うことができますか？私はjqueryを書きましたが、うまくいきません。

and click to see on codepen - correctly

ここにあなたが私のコード

$(document).ready(function() { 
 

 

 
    $(".filter li").on("click", function() { 
 
    var activeId = $(this).attr("id"); 
 

 
    $("img[data-id]").hide(); 
 
    $("img[data-id = '" + activeId + "']").show(); 
 
    }); 
 
});

.cycle-slideshow { 
 
    position: relative; 
 
    width: 800px; 
 
    height: 494px; 
 
    overflow: hidden; 
 
} 
 

 
#single-pager a img { 
 
    width: 49.3px; 
 
    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; 
 
    list-style-type: none; 
 
    padding: 0; 
 
    color: #FFF; 
 
    background: rgba(255, 255, 255, 0.6); 
 
    padding: 10px 30px; 
 
} 
 

 
.filter li { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    background: rgba(0, 0, 0, .6); 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script> 
 

 
<div class="cycle-slideshow" data-cycle-pager="#single-pager" data-cycle-pager-template="<a href='#'><img src='{{src}}' width=48 height=48></a>" data-cycle-prev="#single-left" data-cycle-next="#single-right" data-cycle-pause-on-hover="true" data-cycle-auto-height="true"> 
 
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" data-id="sports"> 
 
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sunny-day-lightbox.jpg" data-id="naturel"> 
 
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-id="animals"> 
 
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sakura%20trees-lightbox.jpg" data-id="animals" /> 
 
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-id="animals" /> 
 
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-id="animals" /> 
 
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-id="sports" /> 
 
    <ul class="filter"> 
 
    <li id="sports">Sports</li> 
 
    <li id="naturel">Naturel</li> 
 
    <li id="animals">Animals</li> 
 
    </ul> 
 
    <div id="single-next-prev"> 
 
    <span id="single-left">Prev</span> 
 
    <span id="single-right">Next</span> 
 
    </div> 
 

 
</div> 
 

 
<div id="single-pager" class="center external"></div>

Answer 1

ている私は、これは遅れて少しかもしれませんが、知っているあなたは、「フィルタを使用する場合、スライダーを再初期化PA必要"-関数。

私はまた、コード内を制御できるように、すべての画像を配列に入れました。

ストアアレイ内のすべての画像を解決するために、以下の

var images = [ 
 
    { 
 
     cat: "sports", 
 
     src: "https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" 
 
    }, 
 
    { 
 
     cat: "naturel", 
 
     src: "https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sunny-day-lightbox.jpg" 
 
    }, 
 
    { 
 
     cat: "animals", 
 
     src: "https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" 
 
    }, 
 
    { 
 
     cat: "animals", 
 
     src: "https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sakura%20trees-lightbox.jpg" 
 
    }, 
 
    { 
 
     cat: "animals", 
 
     src: "https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" 
 
    }, 
 
    { 
 
     cat: "animals", 
 
     src: "https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" 
 
    }, 
 
    { 
 
     cat: "sports", 
 
     src: "https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" 
 
    } 
 
] 
 

 
$(document).ready(function() { 
 
    for (var i in images) { 
 
     $("#mySlideshow").append("<img src='" + images[i].src + "'/>"); 
 
    } 
 

 
    init() 
 

 
    $(".filter li").on("click", 
 
     function() { 
 
      $("#mySlideshow").cycle('destroy'); 
 
      $("#mySlideshow img").remove(); 
 

 
      var activeId = $(this).attr("id"); 
 

 
      buildCycleSlideshow(activeId); 
 
     }) 
 
}) 
 

 
function init() { 
 
    $("#mySlideshow").cycle({ 
 
     log: false, 
 
     pauseOnHover: true, 
 
     next: "#single-right", 
 
     prev: "#single-left", 
 
     autoHeight: true, 
 
     pager: "#single-pager", 
 
     pagerTemplate: "<a href='#'><img src='{{src}}' width=48 height=48></a>" 
 
    }); 
 
} 
 

 
function buildCycleSlideshow(id) { 
 
    var showAllImages = false; 
 

 
    if (id == "allImages") { 
 
     showAllImages = true; 
 
    } 
 
    
 

 
    for (var i in images) { 
 
     if (images[i].cat == id || showAllImages) { 
 
      $("#mySlideshow").append("<img src='" + images[i].src + "'/>"); 
 
     } 
 
    } 
 
    init(); 
 
}

#mySlideshow { 
 
    position: relative; 
 
    width: 800px; 
 
    height: 494px; 
 
    overflow: hidden; 
 
} 
 

 
#single-pager a img { 
 
    width: 49.3px; 
 
    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; 
 
    list-style-type: none; 
 
    padding: 0; 
 
    color: #FFF; 
 
    background: rgba(255, 255, 255, 0.6); 
 
    padding: 10px 30px; 
 
} 
 

 
.filter li { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    background: rgba(0, 0, 0, .6); 
 
    padding: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script> 
 

 
<div id="mySlideshow"> 
 
    <ul class="filter"> 
 
    <li id="sports">Sports</li> 
 
    <li id="naturel">Naturel</li> 
 
    <li id="animals">Animals</li> 
 
    <li id="allImages">Show all images</li> 
 
    </ul> 
 
    <div id="single-next-prev"> 
 
    <span id="single-left">Prev</span> 
 
    <span id="single-right">Next</span> 
 
    </div> 
 
</div> 
 

 
<div id="single-pager" class="center external"></div>