同位素圖像onclick揭示頂部div的新內容WordPress的

我已經能夠獲得同位素篩選post_thumbnails顯示他們，它動畫很大，但我卡住的是當點擊圖像或鏈接該職位/投資組合的內容顯示在一個新的div。理想的情況下，推箱子的方式，所以如果你在手機上，你不必滾動到頂部。

任何指針讓我開始將是巨大的，只是找不到像這樣的事情在任何地方，並認爲這將是非常有用的人:)

感謝

2012-12-14 cmdv

其實是可以很容易地實現。基本上，你只需要添加一個點擊處理程序到所有同位素項目。處理程序必須找出哪個元素已被點擊（例如，通過檢查點擊項目的類名稱，但當然有很多方法），然後將相應的內容添加到您的元素中。

如果必須顯示內容，則更容易。您可以簡單地添加在預覽和完整內容相同的同位素項目，但默認隱藏的全部內容：

<div class="item"> 
    <div class="preview">...</div> 
    <div class="full">...</div> <!-- hidden with CSS --> 
</div>

一個單擊處理程序然後添加到所有同位素項目：

$(".item").click(function(){ 
    $(this).toggleClass("big"); 
    $("#container").isotope("reLayout"); 
});

通過調用.isotope("reLayout")其他項目在被點擊的項目展開時被推開。

最後，你需要一些基本的CSS規則使得div元素與.big更大，藏匿.full默認，但顯示它時.big父div設置。在這種情況下，.preview必須被隱藏;這可以用CSS完成，不需要JavaScript/jQuery。

好吧，這是一個有點麻煩解釋 - 我想一個例子說，超過一千字：JSFiddle

當然，這只是一個很簡單的例子，但是希望它說明了我的意思。 ;）

2012-12-15 02:50:07 Aletheios

非常感謝，這是完美的，我玩onclick事件，但無法得到它的工作，最後一件事情，你會設置一個if語句來獲得一個活動廣場，以最小化一旦一個新的被點擊？我很享受學習JavaScript只是一直想擴展我的HTML/CSS技能:) – cmdv

應該添加也許有一個關閉按鈕在新開放的div做同樣的行動，只是不知道同位素如何在這些方式工作。再次感謝您的幫助 – cmdv

添加關閉按鈕也不是什麼大事。你只需要一些HTML + CSS和一個jQuery點擊處理程序。下面是一個例子的小提琴：http://jsfiddle.net/Aletheios/h3zgL/1/ – Aletheios

回答