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

}）;