jQuery fancybox 将图像源附加到 href答案

【问题标题】：jQuery fancybox append image source to hrefjQuery fancybox 将图像源附加到 href
【发布时间】：2013-03-10 07:23:57
【问题描述】：

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

【问题讨论】：

那么问题出在哪里？
这里的问题是，我如何使用jQuery来抓取图像的src并将其添加到“href”中。即 a href="[SRC OF IMAGE]"

标签： jquery fancybox append href

【解决方案1】：

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

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

【讨论】：

这几乎成功了，但是当我点击我的任何图像时，fancybox 只会显示第一张图像。看这里。 www.samskirrow.com/new
你是如何初始化 Fancybox 的？看起来好像您正在为每个图像创建一个精美的框？ fancybox.net/howto 说你应该用 "$("a.item_img").fancybox();" 来初始化它
我只是使用基本命令进行初始化：$('.fancybox').fancybox();刚刚尝试了你的方法，它会在一个新窗口中显示图像

【解决方案2】：

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

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

你可以从here查看.attr API

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

最简单的方法如下：

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

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

【讨论】：