ファンシーボックス画像[fancyBox3]にaltタグを挿入するにはどうすればよいですか？

Question

http://fancyapps.com/fancybox/3/を使用しています。そして、このfancyboxは、デフォルトでimg altタグを表示していないことを除いて、うまくいきます。ドキュメントでさえ、正しく記述されていませんhttp://fancyapps.com/fancybox/3/docs/。

これは私たちのhtml構造です。この中で、altタグはaとimgの両方に言及しています。しかし、何も動作していないようです。

<a data-fancybox="gallery" class="img-1" data-caption="First img" href="img.jpg" data-alt="first img" data-options='{"alt" : "First img"}'><img src="img.jpg" alt="First img" class="gallery-fac"></a> 

<a data-fancybox="gallery" class="img-2" data-caption="second img" href="img-2.jpg" data-alt="second img" data-options='{"alt" : "Second img"}'><img src="img-2.jpg" alt="second img" class="gallery-fac"></a> 

$("[data-fancybox]").fancybox({ 
      thumbs : { 
       autoStart : true 
      }, 

}); 

私たちは一つの解決策

beforeShow : function() { 
     var alt = this.element.find('img').attr('alt'); 

     this.inner.find('img').attr('alt', alt); 

     } 

を見つけました。しかし、このソリューションは機能していない、だから我々は解決策を探して、古いいくつかが、を持っています。

誰かがそれを行う方法を知っていれば、解決するのを手伝ってください。

Answer 1

afterLoadコールバックを使用して、クリックされた要素（current.opts.$orig）を取得するだけです。その後alt属性（このサンプルでは、​​私はサムネイル画像から取得しています）の値を取得し、画像に設定された：

$('[data-fancybox="images"]').fancybox({ 
    afterLoad : function(instance, current) { 
    current.$image.attr('alt', current.opts.$orig.find('img').attr('alt')); 
    } 
}); 

デモ - ところでhttps://codepen.io/anon/pen/QOBgqz?editors=1010

が、これはあなたのために本当に重要なのですか？イメージが読み込まれない場合、エラーメッセージが表示され、ユーザはこの代替テキストを表示しません。

Answer 2

これと同じことをする予定でした。単一の画像ではうまく動作しますが、複数の画像のギャラリーではうまく動作しません。どのようにそれを処理する必要がありますか？