顯示ID內的第一個圖像

Question

有興趣知道我是否可以使用jQuery在頁面上查找第一個圖像並將其顯示在調整後的縮略圖內，單擊放大。例如，在這個特定的博客中，當客戶端向圖像添加圖像時，jQuery將查找第一個圖像，並將其顯示爲特定位置中的可點擊縮略圖。如果詳細圖片可以在thickbox，facebox或其他jQuery覆蓋窗口中顯示，那將是理想的。

在此先感謝您的想法。 傑克遜

Answer 1

您可以使用:first選擇器來查找第一個圖像，然後使用克隆，您可以將圖像複製到任何其他位置，並從那裏修改它。

$(document).ready(function() { 

    var firstImage = $('img:first'); 
    var link = $('<a />') 
        .attr('href', '#') 
        .append($('img:first').clone().css({ width:100, height:100 })) 
        .append($('<div />').text('Click to Enlarge')) 
        .click(function(e) { 
         e.preventDefault(); 
         // showDialog(); 
        }); 
    $('.imageThumbnail').append(link); 

    $('.imageDialog').append(firstImage.clone()); 

}); 

Answer 2

要找到你的頁面的第一形象，你可以使用:first選擇。

$("img:first")將選擇第一個img元素。

如果你想限制父元素內的搜索，那麼你可以

$("#parentElemId").find("img:first") 

如果你可以把這些圖像元素類名，那麼你可以做

$("img.classname:first") 

Answer 3

同其他成員一樣有提到你可以通過使用img：first獲得第一張圖片。以顯示爲縮略圖的最簡單的方法是：

$(document).append("<img src='" + $("img:first").attr("src") + "' alt='' class='thickbox' style='width: 50px; height: 50px;' />"); 

的class='thickbox'的部分是爲了thickbox插件

這是基於您的評論更具體的例子：

如果原始數據的外觀是這樣的：

<div id="thumbs"></div> 
<div id="article"> 
    <img src="..." alt="" /> 
    Some text.. 
</div> 

您可以使用這樣的事情：

var images = ""; 

$("#article img:first").each(function() { 
    images += "<img src='" + $(this).attr('src') + "' width='45' class='thickbox' alt='Click to enlarge' /> "; 
}); 

$("#thumbs").append(images);