使用多个过滤器时，同位素fancybox图库浏览错误。

Question

我目前正试图弄清楚如何使用jQuery正确过滤同位素fancybox。基本上，我需要独立于主库浏览浏览每个过滤器中的图像。我的主画廊有“所有工作”，当点击第一张图片时，它会浏览整个画廊（很好）。

当选择我的其他过滤器列表，即客户端工作时，它会正确地删除未分配给该过滤器的任何图像。但是当浏览到我的客户端工作过滤器中的下一个图像时，它会显示并继续浏览图像，就像它是主图库一样。我希望能够只浏览该过滤器中的图像。

除了我无休止的研究时间之外，我还是设法得到了一些很好的信息，但我还是不太明白jQuery要改变什么，因为这对我来说都是新鲜的。我很感激对我的问题的任何见解，因为这是我的网站完成的最后一个障碍。

我附加了一个链接到一个图库，该图库具有过滤功能，并且完全按照我的需要进行浏览。 （我从该网站上读到了这些信息，但是对于从现有代码中保留的内容以及不能保留的内容感到迷茫。

http://www.picssel.com/demos/fboxfilteredgallery.html

先谢谢

以下是我的html的一部分：

<!-- Portfolio Projects -->
    <div class="row">       
            <div class="span3">             
             <!-- Filter -->
            <nav id="options" class="work-nav">
                <ul id="filters" class="option-set" data-option-key="filter">
                    <li><a href="#filter" data-option-value="*" class="selected">ALL WORK</a></li>
                    <li><a href="#filter" data-option-value=".client">Client</a></li>                   
                    <li><a href="#filter" data-option-value=".personal">Personal</a></li>
                    <li><a href="#filter" data-option-value=".video">Video</a></li>

                 </ul>
            </nav>             

                            

                            <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                          <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="JB Homes" href="_include/img/work/full/logo_full.jpg">
                                <span class="overlay-img"></span>
                                <span class="overlay-img-thumb font-icon-plus"></span>
                            </a>
                            <!-- Thumb Image and Description -->
                          <img src="_include/img/work/thumbs/logo_thumb.jpg" alt=“Lorem Ipsum”>
                        </li>
                        <!-- End Item Project -->

                        <!-- Item Project and Filter Name -->
                        <li class="item-thumbs span3 client">
                            <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                            <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="March of Dimes-Latin Fusion" href="_include/img/work/full/mod_full.jpg">
                                <span class="overlay-img"></span>
                                <span class="overlay-img-thumb font-icon-plus"></span>
                            </a>

                            <!-- Thumb Image and Description -->
                            <img src="_include/img/work/thumbs/mod_thumb.jpg" alt=“Lorem Ipsum">
                        </li>
                        <!-- End Item Project -->                       


                        <!-- Item Project and Filter Name -->
                        <li class="item-thumbs span3 personal">
                            <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                            <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Go Green" href="_include/img/work/full/green_full.jpg">
                                <span class="overlay-img"></span>
                                <span class="overlay-img-thumb font-icon-plus"></span>
                            </a>
                            <!-- Thumb Image and Description -->
                            <img src="_include/img/work/thumbs/green_thumb.jpg" alt=“Lorem Ipsum”>
                        </li>
                        <!-- End Item Project -->


                        <!-- Item Project and Filter Name -->
                        <li class="item-thumbs span3 client">
                            <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                            <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="March of Dimes-Princeton" href="_include/img/work/full/mod2_full.jpg">
                                <span class="overlay-img"></span>
                                <span class="overlay-img-thumb font-icon-plus"></span>
                            </a>
                            <!-- Thumb Image and Description -->
                            <img src="_include/img/work/thumbs/mod2_thumb.jpg" alt=“Lorem Ipsum”>
                        </li>
                        <!-- End Item Project -->                              

                        <!-- Item Project and Filter Name -->
                        <li class="item-thumbs span3 personal">
                            <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                            <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Apple 3D" href="_include/img/work/full/apple_full.jpg">
                                <span class="overlay-img"></span>
                                <span class="overlay-img-thumb font-icon-plus"></span>
                            </a>
                            <!-- Thumb Image and Description -->
                            <img src="_include/img/work/thumbs/apple_thumb.jpg" alt=“Lorem Ipsum”>
                        </li>
                        <!-- End Item Project -->

这是我的JQuery：

BRUSHED.filter = function (){
if($('#projects').length > 0){      
    var $container = $('#projects');

    $container.imagesLoaded(function() {
        $container.isotope({
          // options
          animationEngine: 'best-available',
          itemSelector : '.item-thumbs',
          layoutMode : 'fitRows'
        });
    });



// filter items when filter link is clicked
    var $optionSets = $('#options .option-set'),
        $optionLinks = $optionSets.find('a');

      $optionLinks.click(function(){
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
          return false;
        }
        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');

        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
          // changes in layout modes need extra logic
          changeLayoutMode( $this, options )
        } else {
          // otherwise, apply new options
          $container.isotope( options );
        }

        return false;
    });
}

}