Question

我正在网站上工作，这是我第一次使用Fancybox。

我有一个名为Portfolio的页面，我有两个过滤器，一个叫做照片，另一个叫做视频。当我第一次进入页面时，即使我只选择了照片，我也会获得所有缩略图。我必须在视频过滤器中使用clicK，然后在Photo上获取仅用于照片的缩略图。我该如何改变？

这是我的过滤器HTML代码：

<div class="row">
        <div class="span3">
            <!-- Filter -->
            <nav id="options" class="work-nav">
                <ul id="filters" class="option-set" data-option-key="filter">
                    <li class="type-work">Tipos de trabajo</li>

                    <li><a href="#filter" data-option-value=".foto" class="selected">Fotografía</a></li>
                    <li><a href="#filter" data-option-value=".activaciones">&nbsp;&nbsp;&nbsp;&nbsp;Activaciones</a></li>
                    <li><a href="#filter" data-option-value=".bodas">&nbsp;&nbsp;&nbsp;&nbsp;Bodas</a></li>

                    <li><a href="#filter" data-option-value=".eventos">&nbsp;&nbsp;&nbsp;&nbsp;Eventos Sociales</a></li>
                    <li><a href="#filter" data-option-value=".ninos">&nbsp;&nbsp;&nbsp;&nbsp;Niños</a></li>
                    <li><a href="#filter" data-option-value=".productos">&nbsp;&nbsp;&nbsp;&nbsp;Productos</a></li>
                    <li><a href="#filter" data-option-value=".registros">&nbsp;&nbsp;&nbsp;&nbsp;Registros</a></li>

                   <li><a href="#filter" data-option-value=".video">Videos</a></li>
                </ul>

            </nav>

        </div>

这是我的js文件：

ELPORTAL.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' ) {

          changeLayoutMode( $this, options )
        } else {
          // otherwise, apply new options
          $container.isotope( options );
        }

        return false;
    });
}
}

/ * ============================================= ===== 的fancybox ================================================== * /

ELPORTAL.fancyBox = function(){
if($('.fancybox').length > 0 || $('.fancybox-media').length > 0 || 
$('.fancybox-  various').length > 0){

    $(".fancybox").fancybox({               
            padding : 0,
            beforeShow: function () {
                this.title = $(this.element).attr('title');
                this.title = '<h4>' + this.title + '</h4>' + '<p>' + $(this.element).parent().find('img').attr('alt') + '</p>';
            },
            helpers : {
                title : { type: 'inside' },
            }
        });

    $('.fancybox-media').fancybox({
        openEffect  : 'none',
        closeEffect : 'none',
        helpers : {
            media : {}
        }
    });
}
}

任何帮助都会非常感激。

在过滤Fancybox之前无法隐藏所有项目

0 个答案: