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

在id中显示第1张图片

3 个答案: