Question

如何防止Fancybox显示某些图像？我有一个选择按钮，用户可以在其中选择数据颜色属性，每个属性都有一个＆＃34; a＆＃34; fancybox画廊中的标签有。

$('.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 : '');
    }
});

现在它只是警告＆＃34; ok＆＃34;。

如果您选择＆＃34;黄色＆＃34;，它会显示数据颜色属性为黄色的缩略图，但随后它会打开图库并显示图像3的3.我希望它只显示一个。< / p>

谢谢

Answer 1

好久好久以后我想出了一个解决方案。在每次更改选择按钮时，我会从每个标签中删除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');

}）;

防止Fancybox显示图像

1 个答案: