Question

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

Answer 1

如果您的容器中有多个<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

Answer 2

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

  var imgSrc = $('.item > img').attr('src');
  $('<a class="fancybox" href="'+imgSrc+'"></a>').appendTo('.item');

Answer 3

也许你可以试试这样的东西

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

您可以查看here

中的.attr API

Answer 4

最简单的方法如下：

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

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

jQuery fancybox将图像源追加到href

4 个答案: