阻止Fancybox显示图像

Prevent Fancybox from showing images

本文关键字：图像 显示图 显示 Fancybox 阻止      更新时间：2023-09-26

如何防止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');

})；

相关文章：