0

我在我的网站上使用了 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]"

4

4 回答 4

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

于 2013-03-20T23:45:06.827 回答
1

在启动fancybox之前选择图像源：

  var imgSrc = $('.item > img').attr('src');
  $('<a class="fancybox" href="'+imgSrc+'"></a>').appendTo('.item');
于 2013-03-20T23:19:22.237 回答
0

也许你可以尝试这样的事情

$('.fancybox').attr('href',$('.item_img').attr('src'));

你可以从这里检查.attrAPI

于 2013-03-20T23:20:22.930 回答
0

最简单的方法如下：

$(".item").find("img").each( function() {
     $(this).attr("href",$(this).attr("src"));
};

如果这对您有用，请将其标记为答案！

于 2013-03-20T23:54:17.513 回答