jquery - Fancybox ダウンロード画像

Question

現在 Fancybox で表示している画像のダウンロードボタンを作成しようとしています。URLはすでにタグに保存されているので簡単にできると思ったので、<img>それをリンクに再利用できると思いました。

私はさらに、ファンシーボックスでを見つけようとし<img>、それからsrcリンク(タグ)を見つけようとしました。それを行うためのjQueryスキルが不足しています。.appendhref<a>

タグをfancybox.js追加しました：<a>

<img class="fancybox-image" src="image.jpeg" alt="" />
<a href="" class="test">Download</a>

などをコピーして貼り付けようとしましimage.jpegたが、うまくいきませんでした：

var href = $('.fancybox-image').attr('href');
$('a.test').attr('href', href );

score 1 · Accepted Answer

jQuery の方法

この回答は、OPが提供したコードを修正して、標準のjQueryメソッドを使用してこれを達成する方法を示しています。Fancybox を使用してこれを行う方法については、Janis の回答も参照してください。

タグhrefに属性がないため、ここに投稿したコードは機能しません。代わりに属性<img>を使用する必要があります。src

var href = $('.fancybox-image').attr('src');
$('a.test').attr('href', href );

ただし、これは class を持つ画像が 1 つしかない場合にのみ機能し.fancybox-imageます。ギャラリーに複数の画像がある場合は、代わりに次の方法を使用してください。

$('.fancybox-image').each(function (){
    var href = $(this).attr('src');
    $(this).next("a").attr("href", href);
});

2 に答える 2