Question

我有一个使用jQuery Isotope过滤的Fancybox图库。我的问题是即使在过滤后，Fancybox仍会循环遍历所有图像。我知道这个问题在这里有一些讨论，并且在这些页面上尝试了所有解决方案但没有成功。

我想知道是否有人可以发现冲突，可能是在我的过滤器脚本中。我正在使用Isotope v1.5.25。

HTML

<div class="row">
<div class="span12">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="type-work">Type of Work</li>
<li><a href="#" data-filter="*" class="selected">All Projects</a></li>
<li><a href="#" data-filter=".branding">Branding</a></li>
<li><a href="#" data-filter=".brochure">Brochure</a></li>
</ul>
</nav>
<!-- End Filter -->
</div>

<div class="span12">
<div class="row">
<section id="projects">
<ul id="thumbs">

<li class="item-thumbs span3 branding">
<a class="hover-wrap fancybox1" data-fancybox-group="gallery" title="Image Title" href="bigImage.jpg ">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-search"></span>
</a>
<img src="thumb.jpg" alt="">

ISOTOPE SCRIPT

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

$container.imagesLoaded(function() {
$container.isotope({

// options

animationEngine: 'best-available',
itemSelector : '.item-thumbs',
layoutMode : 'fitRows'
});
});

// open filtered items only

$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$('#projects').isotope({ filter: selector }, function(){
if(selector == "*"){
$(".fancybox1").attr("data-fancybox-group", "gallery");
} else{ 
$(selector).find(".fancybox1").attr("data-fancybox-group", selector);
}
});
return false;
});

// 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;
});
}
}

更新：我设法让过滤正常工作并更新了上面的脚本。问题是使用data-option-value属性而不是data-filter属性并引用$('#isotopegallery').isotope({ filter: selector }, function(){而不是$('#projects').isotope({ filter: selector }, function(){。

现在的问题是当我点击第一个过滤的项目时，在这种情况下'品牌'没有任何反应。然后，只有在我第二次点击页面时，缩略图才会过滤。

任何人都可以对此有所了解吗????

同位素过滤与Fancybox之间的冲突

0 个答案: