如何防止Fancybox显示某些图像?我有一个选择按钮,用户可以在其中选择数据颜色属性,fancybox库中的每个"a"标签都有该属性。
http://jsfiddle.net/brq5b/1/
$('.fancybox').fancybox({
beforeShow: function() {
var selectedColor = $("#colorForm").val();
if(selectedColor != 'all') {
formData = $(this.element).parent().data('color');
formData = formData.split(' ');
for (var i in formData) {
if (formData[i] == selectedColor) {
alert("ok");
}
}
}
},
afterLoad : function() {
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
}
});
目前,它只是提醒"ok"。
如果您选择"黄色",它会显示数据颜色属性为黄色的缩略图,但随后它会打开图库,显示第3张图片,共3张。我希望它只显示一个。
感谢
好吧,过了很长时间我想出了一个解决方案。每次更改选择按钮时,我都会从每个a标签中删除fancybox类,该类与选择按钮中选择的颜色不对应。
http://jsfiddle.net/brq5b/2/
类似这样的东西:
$(document).ready(function() {
$('#colorForm').on('change', function () {
var selectedColor = this.value;
if(selectedColor != 'all') {
hrefItems = $('#fancybox-thumbs a');
hrefItems.each(function() {
if(!$(this).hasClass('fancybox')) {
$(this).addClass('fancybox');
}
formData = $(this).parent().data('color');
if(formData.indexOf(selectedColor) == -1) {
$(this).removeClass('fancybox');
}
});
}
else {
hrefItems = $('#fancybox-thumbs a');
hrefItems.each(function() {
if(!$(this).hasClass('fancybox')) {
$(this).addClass('fancybox');
}
});
}
}).trigger('change');
});