显示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);