imgのsrcをjQueryのコンテンツソースとして使用するFancyBox 3

Question

私はFancyBox 3 jQueryプラグインを使用しています。私のウェブサイトでは完全に動作しますが、ウェブページ上の画像をラップするアンカーリンクには、イメージではなく別のサイトまたはウェブページへのリンクを指すhrefがあるため、FancyBox 3が開きますそれはアンカーの内部の画像の代わりに。

私のHTMLは、私は（data-testは、そのアンカーのために存在する場合）私はFancyBoxは、ソースURLとしてその中にURLをフェッチするために得ることができるかどうかを確認するために、データ属性data-testを追加したこの

<a target="_blank" href="http://www.example.com" data-test="//3.bp.blogspot.com/-j6n4gYgWNvo/Vak3aiAi-zI/AAAAAAAAFtI/nIYEfDY74kEd97Gdkc6elifEOSz1yhBTQCPcB/s250/photo-1423683249427-8ca22bd873e0%2B%2528Medium%2529.jpg"> 
    <img src="//3.bp.blogspot.com/-j6n4gYgWNvo/Vak3aiAi-zI/AAAAAAAAFtI/nIYEfDY74kEd97Gdkc6elifEOSz1yhBTQCPcB/s250/photo-1423683249427-8ca22bd873e0%2B%2528Medium%2529.jpg"> 
    </a> 

のように見えます

私のJSコードは、私は特別な何もしなかった

$(document).ready(function(){ 
    $('body img').parent("a").fancybox({ 
    opts: { 
      prevEffect : 'none', 
      nextEffect : 'none' 
    } 
    }); 
}); 

です。私が試したことは、この

$(document).ready(function(){ 
    $('body img').parent("a").fancybox({ 
    href: $(this).find("img").attr('data-test'), 
    opts: { 
      prevEffect : 'none', 
      nextEffect : 'none' 
    } 
    }); 
}); 

ようbeforeLoadコールバックを使用してソースを設定することでした。しかし仕事に$(this).find("img").attr('data-test')表示されません。

私はここで間違っていると思いますか、もっと標準的な方法があれば他にもありますか？

Answer 1

data-src属性を使用してカスタムソースを設定できます。

しかし、スクリプトのポイントは、実際のものを指し示すアンカーの中にイメージ（サムネイル）の小さなバージョンを置くことです。