防止Fancybox显示图像

Question

如何防止Fancybox显示某些图像？我有一个选择按钮，用户在其中选择一个data-color属性，其中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.我希望它只显示一个。

谢谢

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'); 

}）;