Fancybox wiederholt Bilder

Question

Ich habe eine Galerie mit Fancy-Box erstellt, aber ich habe ein Problem, dass, wenn ich alle Elemente (alle Projekte) öffnen, es ordnungsgemäß funktioniert, da jedes Element seine eigenen Bilder (nur drei Bilder) wie gezeigt zeigt dieses Bild (nur drei Thumbnails), aber wenn ich eine bestimmte Kategorie (Villen Kategorie) Bilder für alle Villen öffnen wird, da dieses Bild (6 Thumbnails enthalten für zwei Projekte) und wenn ich drücken alle Projekt erneut gezeigt Ich werde das gleiche Problem haben und das Bild für alle Artikel wird angezeigt (9 Thumbnails für 3 Artikel) so denke ich, das Problem ist mit dem Java-Skript und hier unten ist der HTML-Code und Java Script Code sorry ich bin neu in die Programmierung und ich brauche Ihre Hilfe, ich schätze Ihre Bemühungen

<!-- 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

Ich würde vorschlagen, Sie Isotop + fancybox Kombination zu verwenden, siehe dieses Beispiel: http://codepen.io/fancyapps/pen/EZKYPN

Da könnte dann Ihr Code zu etwas wie diesem vereinfacht werden:

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

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

    return false; 
});