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="">
同位体スクリプト
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(){
問題は、最初のフィルタリングされたアイテムをクリックしたときです。この場合、「ブランディング」は何も起こりません。次に、ページを 2 回目にクリックすると、サムネイルのみがフィルタリングされます。
誰でもこれに光を当てることができますか????