在id中显示第1张图片

时间:2010-01-06 04:37:55

标签: javascript jquery

有兴趣知道我是否可以使用jQuery在页面上找到第一个图像并将其显示在调整大小的缩略图中,点击放大。例如,在此特定博客上,当客户端向帖子添加图像时,jQuery将找到第一个图像,将其显示为特定位置的可点击缩略图。如果详细图像可以显示在thickbox,facebox或其他jQuery叠加窗口中,那将是理想的。

提前感谢您的想法。 杰克逊

3 个答案:

答案 0 :(得分:2)

您可以使用: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());

});

答案 1 :(得分:1)

要在页面中找到第一张图片,您可以使用 :first 选择器。

$("img:first")将选择第一个img元素。

如果您想在父元素中限制搜索,那么您可以

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

如果您可以为这些图像元素指定一个类名,那么您可以

$("img.classname:first")

答案 2 :(得分:1)

与其他成员一样,您可以使用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);