web-dev-qa-db-ja.com

ファンシーボックス：キャプションなどを追加する

ファンシーボックスにタイトル（キャプションやリンクなど）を追加する方法を教えてください。 title = "Bla"を追加すると、ボックスに表示されることを認識しています。しかし、画像リンクにcaption = "Blabla"のようなものを追加した場合、そのキャプションタグを取得するためにjquery.fancybox.jsにどのコードが必要ですか？

jqueryfancybox
16
Jean

オリジナルのjquery.fancybox.jsファイルをいじる必要はありません。独自のカスタマイズされたfancyboxスクリプト内にこのオプションを追加できるからです。

HTML5 DOCTYPEを使用している場合は、キャプションにdata-*属性を使用して、次のHTMLを作成できます。

<a class="fancybox" href="images/01.jpg" data-caption="This is the caption" >Open fancybox</a>

次に、カスタムファンシーボックススクリプトを設定し、beforeShowコールバックを使用してdata-captionを取得します。

$(document).ready(function() {
 $('.fancybox').fancybox({
  beforeShow : function(){
   this.title =  $(this.element).data("caption");
  }
 });
}); // ready

これはtitleをオーバーライドし、代わりにdata-captionを使用します。

一方、title属性を保持し、ファンシーボックスのtitleを構築して、このHTMLに対してtitleとdata-caption属性の両方を組み合わせることもできます。

<a class="fancybox" href="images/01.jpg" title="This is the title" data-caption="This is the caption">Open fancybox</a>

このスクリプトを使用

$(document).ready(function() {
 $('.fancybox').fancybox({
  beforeShow : function(){
   this.title =  this.title + " - " + $(this.element).data("caption");
  }
 });
}); // ready

さらに、リンクまたは他のHTML要素を持つことができるドキュメント内の別のHTML要素（たとえば、caption/title）から<div>を取得することもできます。コード例については、これらの投稿を確認してください： https://stackoverflow.com/a/9611664/1055987 および https://stackoverflow.com/a/8425900/1055987

[〜＃〜]注[〜＃〜]：これはfancybox v2.0.6 +向けです

32
JFK

古い質問ですが、JFKの回答のおかげで、fancyboxの最新バージョンでは、title=""属性に値を入力するだけでキャプションを追加できることがわかりました（デフォルト）。 fancyboxクラスの<a>要素に含まれていることを確認してください。

9
Brad Adams