在{display：none;}圖片上停止Lightbox2圖庫

我目前使用Lokesh Dakhar的Lightbox2在在線目錄網站上顯示產品圖片庫。在{display：none;}圖片上停止Lightbox2圖庫

實施例：

[Yellow Banana] [Red Apple] [Yellow Lemon]  ← Image Gallary

我也使用一個客戶端搜索過濾器（以縮小結果的特定信息），其通過如果數據輸入不附着的CSS規則display: none隱藏產品圖像匹配產品的名稱。

例子：

Search: Yellow

結果：

[Yellow Banana] [Yellow Lemon]

我問題是，Lightbox2 GALLARY仍呈現在這兩個產品上的燈箱的「下一個圖像之間的[Red Apple] 」。

有沒有方法將if語句附加到Lightbox腳本中，使其忽略當前附加到display: none的產品？

轉載問題在：JSFiddle與文檔。

來源

2016-01-07 Ghost

您的示例是javascript而不是jquery – Zl3n

@ Zl3n Lightbox是一個jQuery插件，實際上使用jQuery。標籤是相關的，imo。 – CronosS

@CronosS確切。抱歉。但我無法幫助他，我不知道純粹的Javascript ... – Zl3n

以下是您的input事件處理程序的一個版本，它將執行此操作。

document.getElementById("search").addEventListener("input", function() { 
    var filter = this.value, 
    pictures = $(".searchable"); 

    pictures.each(function() { 
    if (this.dataset.index.toLowerCase().indexOf(filter.toLowerCase()) !== -1) { 
     $(this).show().find("a").attr("data-lightbox", "roadtrip"); 
    } else { 
     $(this).hide().find("a").attr("data-lightbox", "ignore"); 
    } 
    }); 
});

此代碼使用jQuery隱藏/顯示過濾元素，而不是設置頁內樣式標記。

燈箱將圖像作爲一組處理，當它們具有相同的data-lightbox屬性時。要從組中排除圖像，只需更改此屬性（在我的示例中，忽略）。

來源

2016-01-07 22:58:53 CronosS

工作！謝謝，但是它似乎又增加了一個小錯誤。在搜索該項目時，如果您發生意外錯字「16FF」並刪除錯字（本例中爲附加「F」），則除非您清除輸入框並重新正確輸入「16F」，否則不會顯示這些項目。這不是一個巨大的問題，但如果你知道一個修復，將不勝感激！更新[JSFiddle]（https://jsfiddle.net/BobaMilkTease/21orz43n/5/） – Ghost

@Ghost感謝您的反饋。用新的js代碼編輯回答。 – CronosS

在{display：none;}圖片上停止Lightbox2圖庫

回答

相關問題