我在我的网站上使用fancybox插件。我想使用jQuery来检测图像源并将其放在href中。
我的HTML看起来像这样:
<div class="item">
<img src="img/sam_skirrow_the_moment_3.jpg" class="item_img"/>
</div>
我正在使用jquery附加fancybox代码:
$('<a class="fancybox" href="[IMAGE SOURCE]"></a>').appendTo('.item');
我需要什么代码才能获取img src并将其添加为href的源代码?这样的事可能呢?
$('<img>').attr('src').appendTo('.fancybox');
所以我的问题是:我如何使用jQuery来获取图像的src并将其添加到“href”。即a href =“[SRC OF IMAGE]”
答案 0 :(得分:3)
如果您的容器中有多个<img>
标记(或不是)
<div class="item">
<img src="images/1_b.jpg" alt="" />
<img src="images/2_b.jpg" alt="" />
</div>
等。然后您可以使用.each()
和.wrap()
方法,例如:
$(".item img").each(function () {
var newHref = $(this).attr("src");
$(this).wrap("<a class='fancybox' rel='gallery' href='" + newHref + "'/>");
});
当然,您仍然需要将fancybox绑定到选择器.fancybox
$(".fancybox").fancybox();
参见 JSFIDDLE
答案 1 :(得分:1)
在启动fancybox之前选择图像源:
var imgSrc = $('.item > img').attr('src');
$('<a class="fancybox" href="'+imgSrc+'"></a>').appendTo('.item');
答案 2 :(得分:0)
答案 3 :(得分:0)
最简单的方法如下:
$(".item").find("img").each( function() {
$(this).attr("href",$(this).attr("src"));
};
如果这对您有用,请将其标记为答案!