0

サイトで fancybox プラグインを使用しています。jQuery を使用して画像ソースを検出し、href に配置したいと考えています。

私のhtmlは次のようになります：

<div class="item">
    <img src="img/sam_skirrow_the_moment_3.jpg" class="item_img"/>
</div>

ファンシーボックスコードを追加するためにjqueryを使用しています：

   $('<a class="fancybox" href="[IMAGE SOURCE]"></a>').appendTo('.item');

img src を取得して、href のソースとして追加するには、どのコードが必要ですか?? もしかしてこういうこと？

$('<img>').attr('src').appendTo('.fancybox');

私の質問は次のとおりです。jQuery を使用して画像の src を取得し、それを「href」に追加するにはどうすればよいですか。すなわち a href="[画像のSRC]"

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

それを行う最も簡単な方法は次のとおりです。

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

これでうまくいく場合は、答えとしてマークしてください。

于 2013-03-20T23:54:17.513 に答える
0

多分あなたはこのようなことを試すことができます

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

ここ.attrからAPIを確認できます

于 2013-03-20T23:20:22.930 に答える