如何在點擊時顯示包含圖像細節的數組？

如何創建一個包含關於圖像的附加信息並在縮略圖點擊時顯示的數組（我認爲）？非常感謝您的幫助！如何在點擊時顯示包含圖像細節的數組？

例如

thumbnail : 'link/x-thumb.jpg' 
mainimg : 'link/x.jpg' 
description : 'this is an image' 
category : 'Abstract'

上的X拇指點擊，我想顯示在一定DIV的信息。另外，我如何添加第二個細節區域？有人可以幫助我或將我鏈接到教程嗎？非常感謝你！

來源

2011-07-25 Grozav Alex Ioan

從哪裏得到這些細節？請詳細說明。 :) – naveen

我想寫的細節顯示在我的JavaScript文件，而不是在HTML中編寫無盡的代碼。我想添加.click（）函數並切換包含該縮略圖的詳細信息。 –

數據必須來自某處。它可以存儲在一個JavaScript對象中，例如如果您的圖像有一個id，那麼你可以使用它作爲一個重點：

var imageData = { 
    imageId0: { 
    thumbnail : 'link/x-thumb.jpg', 
    mainimg : 'link/x.jpg', 
    description : 'this is an image', 
    category : 'Abstract', 

    imageId1: { 
    thumbnail : 'link/y-thumb.jpg', 
    mainimg : 'link/y.jpg', 
    description : 'this is another image', 
    category : 'Abstract', 

    ... 

    };

然後使用偵聽器來格式化和顯示。但是，您最好將其編碼到服務器的HTML元素中，然後使用偵聽器來顯示它。然後，您可以鍵入顯示元件的ID將圖像（如「image0數據」）的ID，你的聽衆可以簡單：

function showData(el) { 
    showElement(el.id + '-data'); 
}

或類似，其中showElement功能需要一個ID並顯示該元素（有許多方法 - 轉換，修改類，修改顯示或可見性屬性等）。請記住，數據必須發送，無論如何，通過將其作爲腳本而非HTML發送，無需保存任何內容。您可能會在標記上保存一些內容，但服務器在生成時會更有效率，並且如果它是原始文檔的一部分，客戶端將會更快地解析它。

最後，如果你做得對，它會給你一個很大的回退。非腳本化的瀏覽器無論如何都可以顯示數據，腳本化的瀏覽器可以隱藏它，然後點擊顯示。

來源

2011-07-25 07:16:20 RobG

非常感謝您的信息！我遇到的問題是圖像無需切換就加載到文檔中。由於它是一個畫廊，它佔用了很多帶寬，並導致大量加載時間，所以我認爲通過JavaScript添加它們可能會節省一些工作量。有沒有什麼辦法讓圖像只在包含它的div被顯示時加載？ –

@Grozav這是一個棘手的功能。如果你有一個垂直頁面（比如Facebook的feed），你可以垂直放置多個div，並在文檔（或任何包含div/iframe等）上附加一個滾動事件，並在該處理程序中，循環遍歷所有可能有圖片的div並檢查它們的頂部偏移量是否大於或小於容器的scrollTop + height屬性。如果是這樣，你可以加載相應的圖片或忽略div是否在視圖中。如果你有一個更復雜的佈局，找出是否應該看到圖片更難。 – zatatatata

我看到了這個網站，並將其作爲示例：http://www.julienpons.co.uk如果您點擊縮略圖，則會在之後加載圖像。我嘗試了這個，但失敗了。 –

如何在點擊時顯示包含圖像細節的數組？

回答

相關問題