jQuery的同位素和馬賽克合併方案

我想創造的東西，看起來像下面website jQuery的同位素和馬賽克合併方案

從本質上講就是我追求的是利用同位素爲了創建一個投資組合，有很多縮略圖。一旦用戶將鼠標懸停在縮略圖上，將出現一個字幕覆蓋圖（淡入），然後當用戶單擊縮略圖時，會出現大圖片。佈局將重新排列。

到目前爲止，我已經設法使用幾個插件來實現單獨的效果......換句話說，我用Mosiac.js來實現懸停效果和Isotope.js來實現佈局。你可以看到我到目前爲止在mosaic.html和isotope.html

雖然我卡住了。我無法弄清楚如何結合這兩種解決方案。我嘗試過使用CSS類來處理jQuery。我是一個jQuery福利局:(

請幫幫忙！

讓我知道如果你需要任何更多的信息或問題不清楚

2012-10-04 Rami Yahya

無需使用mosaic.js簡單的東西，因爲這首先，讓您的網站在功能方面與Isotope一起工作;不要擔心在該階段的設計微調，然後，將一些帶重疊標題的div嵌套在您的Isotope元素中並默認隱藏它們。將懸停事件附加到顯示隱藏div的同位素元素，並在觀察者的鼠標位於同位素元素上時顯示它們。

但要記住，人與移動觸摸屏設備將無法看到你的懸停效果...

HTML

<div class="item"> 
    // content of the Isotope .item 
    <div class="overlay"> 
     // content of the overlay 
    </div> 
</div>

CSS

.overlay { 
    display: none; 
    /* other rules to style the overlay */ 
}

jQuery的

$(".overlay").hover(function(){ 
    $(this).filter(':not(:animated)').animate({ whatever you like to animate }); 
     }, function() { 
    $(this).animate({ whatever you like to animate }); 
});

參見the jQuery fadeToggle()和the jQuery animate()方法以及show（），hide（）等方法的效果你可能喜歡在懸停時執行。

來源

2012-10-04 15:53:54 Systembolaget

感謝您的回覆。 –

我以我想要的方式工作，但仍然有一件小事我希望得到您的幫助......請參閱[link]（jquery.ramiyahya.com）如果您注意到，點擊以顯示大圖像時，黑色覆蓋層從所有照片中消失。我只想讓這個消失在大圖像上。我相信這是與$（this）選擇器有關......不知道該怎麼做。 –

您可能幾乎在末尾刪除了這行代碼「$ overlay.removeClass（）;」但是，因爲您在每個元素的事件處理函數之外定義了鼠標懸停/懸停行爲，所以用鼠標退出放大的圖像仍會使該大圖像變黑。我會把懸停（）邏輯放在條件內，所以你可以定義：只有小/預覽圖像纔有。在懸停時移除疊加層;大圖像的.overlay類切換並移除懸停（）效果，因此將鼠標移出大圖像不會「黑化」它。 – Systembolaget

我完全一樣，不知道爲什麼我不能將它們組合。馬賽克需要高度和同位素具有這種動態。所以我用：

$('.mosaic-block').each(function (index) { 
    $(this).height($(this).find(".mosaic-backdrop").height()); 
});

但同位素仍然有放置它的項目和標題仍然無法正常工作。但是如果你想堅持使用Mosaic，這可能會讓你朝着正確的方向發展。我將把我的代碼轉換爲@Systembolagnet的解決方案。請接受他的回答

來源

2012-12-04 10:58:01

jQuery的同位素和馬賽克合併方案

回答

相關問題