1

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

我想知道是否有人可以发现冲突，可能在我的过滤器脚本中。我正在使用同位素 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="">

同位素脚本

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(){.

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

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

4

0 回答 0