0
我想用同位素过滤我的画廊到类别,然后打开FancyBox,只有在Fancybox中呈现过滤的类别。使用jquery同位素过滤Fancybox画廊
这里是我的代码:
HTML
<div class="filters">
<div class="ui-group">
<div class="button-group js-radio-button-group" data-filter-group="color">
<button class="button" data-filter="*">ALL</button>|
<button class="button" data-filter=".wedding">WEDDINGS</button>|
<button class="button" data-filter=".concert">CONCERT/SHOWS</button>|
<button class="button" data-filter=".corporate">CORPORATE EVENTS</button>|
<button class="button" data-filter=".church">CHURCH EVENTS</button>|
<button class="button" data-filter=".political">POLITICAL EVENTS</button>|
<button class="button" data-filter=".parties">PARTIES</button>
</div>
</div>
</div>
</div>
<!-- /.container -->
<div class="grid">
<div class="gutter-sizer"></div>
<a class='fancybox' href='../images/picture-1' data-fancybox="gallery" data-fancybox-group='gallery' data-filter='church'>
<div class="grid-item church"><img src="../images/picture-1"></div>
</a>
<a class='fancybox' href='../images/picture-2' data-fancybox="gallery" data-fancybox-group='gallery' data-filter='wedding'>
<div class="grid-item wedding"><img src="../images/picture-2"></div>
</a>
<a class='fancybox' href='../images/picture-' data-fancybox="gallery" data-fancybox-group='gallery' data-filter='church'>
<div class="grid-item church"><img src="../images/picture-3"></div>
</a>
</div>
JS
$(".fancybox").fancybox({
});
$('#filters a').click(function(){
var selector = $(this).attr('data-filter');
$('#gallery').isotope({ filter: selector }, function(){
if(selector == "*"){
$(".fancybox").attr("data-fancybox-group", "gallery");
} else{
$(selector).find(".fancybox").attr("data-fancybox-group", selector);
}
});
return false;
});
}); // ready
检查https://groups.google.com/d/msg/fancybox/ncVsViD2v9o/JE0DHYPuEOgJ是否有帮助 – JFK
@JFK谢谢回复。我怎样才能使这个代码与多个过滤器? – Capwiz