jQuery fancybox将图像源添加到href

我在我的网站上使用fancybox插件。我想使用jQuery来检测图像源并将其放置在href中。jQuery fancybox将图像源添加到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”。

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

来源

2013-03-20 Sam Skirrow

那么问题在哪里？ – 2013-03-20 23:13:57

这里的问题是，我如何使用jQuery抓取图像的src并将其添加到“href”。即一个href =“[SRC的图像]” – 2013-03-20 23:16:53

如果您的容器中有多个<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-20 23:45:06 JFK

完美，谢谢 – 2013-03-20 23:55:13

您发起的fancybox之前选择图像源从here

来源

2013-03-20 23:19:22 Mupps

这几乎工作，但当我点击我的任何图像，fancybox只显示第一个图像。看这里。 www.samskirrow.com/new – 2013-03-20 23:26:56

你是如何初始化Fancybox的？它看起来好像你正在为每个图像创建一个漂亮的盒子？ http://fancybox.net/howto说你应该用“$（”a.item_img“）来初始化它。fancybox（）;” – Mupps 2013-03-20 23:35:20

我刚刚使用基本命令进行初始化：$（'。fancybox'）。fancybox（）;刚刚尝试过你的方法，它会在新窗口中显示图像 – 2013-03-20 23:38:18

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

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

，您可以检查.attr API：即A HREF = “[SRC形象]”

来源

2013-03-20 23:20:22

最简单的方式做这将是如下：

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

如果这对你的作品，请把它标记为答案！

来源

2013-03-20 23:54:17 TJC

jQuery fancybox将图像源添加到href

回答

相关问题