16

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

4

2 に答える 2

36

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

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

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

次に、カスタム fancybox スクリプトを設定し、次のようなコールバックdata-captionを使用して取得しますbeforeShow

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

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

一方、この HTML では、属性を保持し、ファンシーボックスの両方を組み合わせてtitle属性を構築することもできます。titletitledata-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 要素を持つことができるcaption/titleドキュメント内の別の HTML 要素 (<div>たとえば) から を取得することもできます。コード例については、https://stackoverflow.com/a/9611664/1055987 および https://stackoverflow.com/a/8425900/1055987 の投稿を確認してください。

注：これはfancybox v2.0.6+用です

于 2012-09-10T18:29:05.933 に答える
10

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

于 2014-11-19T22:23:22.983 に答える