Fancyboxはピクチャを繰り返しています

Question

ピクチャボックスを使ってギャラリーを作成しましたが、すべてのアイテム（すべてのプロジェクト）を開くと、各アイテムが図のように3つのピクチャしか表示されないため正しく動作します。この絵 （3つだけのサムネイルを持っている）が、私は特定のカテゴリを開いたとき（ヴィラカテゴリ）全てのヴィラのための画像が が （6サムネイル2つのプロジェクトのために含まれている）、この絵のように示され、私は再び、すべてのプロジェクトを押すと、私は同じ問題を抱え、すべてのアイテムの画像が表示されます（3つのアイテムのサムネイル9個） 問題はJavaスクリプトであると思うので、ここではhtmlコードとJavaスクリプトコード私はプログラミングに新しいですし、私はあなたの助けが必要申し訳ありませんは、私は、あなたの努力

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
    <script src="js/bootstrap.js"></script> 
 
    <script type="text/javascript"> 
 
\t 
 
\t jQuery(function ($) { 
 
    // fancybox 
 
    $(".fancybox").fancybox({ 
 
     modal: false, // enable regular nav and close buttons 
 
     // add buttons helper (requires buttons helper js and css files) 
 
\t \t padding:0, 
 
     helpers: { 
 
      thumbs \t : { 
 
\t \t \t \t width \t : 50, 
 
\t \t \t \t height \t : 50, 
 
\t \t \t }, 
 
     } 
 
    }); 
 
    // filter selector 
 
    $(".filter").on("click", function() { 
 
     var $this = $(this); 
 
     // if we click the active tab, do nothing 
 
     if (!$this.hasClass("active")) { 
 
      $(".filter").removeClass("active"); 
 
      $this.addClass("active"); // set the active tab 
 
      // get the data-rel value from selected tab and set as filter 
 
      var $filter = $this.data("rel"); 
 
      // if we select view all, return to initial settings and show all 
 
      $filter == 'all' ? 
 
       $(".fancybox") 
 
       .attr("data-fancybox-group", "gallery") 
 
       .not(":visible") 
 
       .fadeIn() 
 
      : // otherwise 
 
       $(".fancybox") 
 
       .fadeOut(0) 
 
       .filter(function() { 
 
        // set data-filter value as the data-rel value of selected tab 
 
        return $(this).data("filter") == $filter; 
 
       }) 
 
       // set data-fancybox-group and show filtered elements 
 
       .attr("data-fancybox-group", $filter) 
 
       .fadeIn(1000); 
 
     } // if 
 
    }); // on 
 
}); // ready 
 
\t 
 
\t 
 
\t 
 
    
 
\t 
 
</script>

<div id="galleryTab"> 
 
    <a data-rel="all" href="javascript:;" class="filter active">All Projects</a> 
 
    <a data-rel="vil" href="javascript:;" class="filter">Villas</a> 
 
    <a data-rel="res" href="javascript:;" class="filter">Residential and Commercial</a> 
 
    <a data-rel="mix" href="javascript:;" class="filter">Mixed Used</a> 
 
</div> 
 
<div class="row"> </div> \t 
 
    <div class="col"> 
 
     <div class="galleryWrap"> 
 
     <ul id="projects"> 
 
      <li id="liproject" data-tags="Villas"><a title="Mr.Omran Villa (G+1+R)" class="fancybox villa" data-filter="vil" rel="villa1" href="images/Projects/1.jpg"><img src="images/Projects/1s.jpg" alt="omran" width="240" height="160" class="img-responsive" id="img1"></a></li> 
 
      <div class="hidden"> <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa1" href="images/Projects/1h.jpg"><img src="images/Projects/1h.jpg" alt="omran"></a> <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa1" href="images/Projects/12h.jpg"><img src="images/Projects/12h.jpg" alt="omran"></a> </div> 
 
      
 
      <div> <li data-tags="Villas"><a title="Mr.saif Villa (G+1+R)" data-tags="Villas" class="fancybox" data-filter="vil" rel="villa2" href="images/Projects/2.jpg"><img src="images/Projects/2s.jpg" alt="saif" class="img-responsive" id="img2"></a></li> 
 
      <div class="hidden"> <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa2" href="images/Projects/21h.jpg"><img src="images/Projects/21h.jpg" alt="saif"></a> <a class="fancybox" data-tags="Villas" data-filter="vil" rel="villa2" href="images/Projects/22h.jpg"><img src="images/Projects/22h.jpg" alt="saif"></a> </div> 
 
      
 
      <div id="res"> <li data-tags="bldg"><a title="Ajman Tower (G+8Podium+26 Typical+R)" class="fancybox" data-tags="Residential and Commercial" data-filter="res" rel="bldg1" href="images/Projects/4.jpg"><img src="images/Projects/4s.jpg" alt="ajman" width="240" height="160" class="img-responsive" id="img3" border="0"></a></li> 
 
       <div class="hidden"> <a class="fancybox" data-filter="res" rel="bldg1" href="images/Projects/41h.jpg"><img src="images/Projects/41h.jpg" alt="ajman"></a> <a class="fancybox" data-filter="res" rel="bldg1" href="images/Projects/42h.jpg"><img src="images/Projects/42h.jpg" alt="ajman"></a> </div> 
 
      </div> 
 
      </div> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <footer>&copy;Copyright Qyas Engineering Consultancy All Rights Reserved. </footer> 
 
    </div>

Answer 1

私はあなたが同位体+のfancyboxの組み合わせを使用することをお勧め感謝しますこの例を参照してください。 http://codepen.io/fancyapps/pen/EZKYPN

あなたのコードは次のように単純化できます：

// Custom click event - open fancyBox manually 
$('.fancybox').on('click', function() { 
    var visibleLinks = $('.fancybox:visible'); 

    $.fancybox.open(visibleLinks, {}, visibleLinks.index(this)); 

    return false; 
});