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

回答

相關問題