Fancybox 重复图片

Question

我使用花式框创建了一个画廊，但我有一个问题，当我打开所有项目（所有项目）时，它可以正常工作，因为每个项目都会显示自己的图片（只有三张图片），如图所示 （只有三个缩略图）但是当我打开一个特定类别（别墅类别）时，所有别墅的图片都会显示为这张图片 （两个项目包含 6 个缩略图） 如果我再次按下所有项目，我将遇到同样的问题，并且将显示所有项目的图片（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">
	
	jQuery(function ($) {
    // fancybox
    $(".fancybox").fancybox({
        modal: false, // enable regular nav and close buttons
        // add buttons helper (requires buttons helper js and css files)
		padding:0,
        helpers: {
            thumbs	: {
				width	: 50,
				height	: 50,
			},
        } 
    });
    // 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
	
	
	
    
	
</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>	
    <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

我建议你使用 Isotope + 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;
});