有兴趣知道我是否可以使用jQuery在页面上找到第一个图像并将其显示在调整大小的缩略图中,点击放大。例如,在此特定博客上,当客户端向帖子添加图像时,jQuery将找到第一个图像,将其显示为特定位置的可点击缩略图。如果详细图像可以显示在thickbox,facebox或其他jQuery叠加窗口中,那将是理想的。
提前感谢您的想法。 杰克逊
答案 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);