同位素和燈箱像覆蓋：如何做到這一點？

我希望使用isotope.js和一個類似lightbox的疊加層來創建一個很酷的，可過濾的照片庫或信息頁面，您可以在其中單擊某個項目以獲取具有更多信息的彈出窗口。同位素和燈箱像覆蓋：如何做到這一點？

這裏jfiddle是我使用的JS -

$('.box-to-display').click(function() { 
    $(this).siblings('.popup').center(); 
    $(this).siblings('.popup').fadeIn(); 
    $(this).siblings('.overlay').fadeIn(); 
}); 

$('.overlay').click(function() { 
    $(this).siblings('.popup').fadeOut(); 
    $(this).fadeOut(); 
}); 


var $container = $('#isotope-container'); 
     $container.isotope({ 
     animationEngine : 'jquery', 
     layoutMode: 'straightDown', 
     animationOptions: { 
      duration: 250, 
      easing: 'linear', 
      queue: false 
     } });

本質 - 同位素把溢出：隱藏;在它所定位的容器上，這隱藏了定位的彈出式覆蓋圖。理想情況下，我不想做兩件獨立的作品 - 一件用於疊加，一件用於名單。我使用php從數組中生成我的列表，以防知道這一點很重要！

寫完所有這些之後，我意識到我可能需要有兩個單獨的代碼片段 - 一個用於覆蓋，一個用於列表，並將它們與唯一的ID連接 - 但如果沒有，請讓我知道！

謝謝！ Jacob

來源

2013-06-19 Jacob Raccuia

我解決了這個問題，使用了兩個獨立的代碼，一個用於覆蓋，一個用於列表。

希望這可以幫助別人！

來源

2013-07-16 13:44:01

將是巨大的，如果你也可以分享您使用此@Jacob Raccuia – rhand

@rhand誠實，這是很久以前的事，我不記得遠程項目，這是在代碼。否則，我會分享更多！但是將它們拼湊在一起，我複製了頁面上的內容。內容的一部分顯示圖像，並完全分開，我顯示了燈箱圖像，但隱藏。由於內容循環了兩次，它具有相同的ID –

同位素和燈箱像覆蓋：如何做到這一點？

回答

相關問題