3

こんにちは、これはばかげた質問だと思うかもしれませんが、ファンシー ボックス 2 にタイトルを追加しようとしています。

<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});
</script>

そして、追加しようとすると

$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
    beforeLoad: function() {
        this.title = $(this.element).attr('caption');
}
});

あらゆる種類の構文エラーが発生します。

サイトは: http://bit.ly/Wan5kr

4

2 に答える 2

7

現在のスクリプトは次のとおりです。

 $(document).ready(function() {
  $(".fancybox").fancybox({
   helpers : { 
    title : { type : 'inside' }
   }, // helpers
   afterLoad : function() {
    this.title = (this.title ? '' + this.title + '<br />' : '') + 'Image ' + (this.index + 1) + ' of ' + this.group.length;
   } // afterLoad
  }); // fancybox
 }); // ready

...しかし、そうする必要があります（「6ページ中1ページ」が必要ない場合）：

 $(document).ready(function() {
  $(".fancybox").fancybox({
   helpers : { 
    title : { type : 'inside' }
   } // helpers
  }); // fancybox
 }); // ready

一方、caption属性を使用したい場合 (画像にカーソルを合わせるとツールチップtitleとして表示されるため)、次のように変更しますtitlecaption

<a href="images/Gallery/large/wing-back-chair.jpg" caption="Early 1900'....." rel="Sold" class="fancybox"><img width="304" height="350" alt="Winged back chair and ottoman" src="images/Gallery/tn/wing-back-chair.jpg"></a>

このスクリプトを使用します

 $(document).ready(function() {
  $(".fancybox").fancybox({
   helpers : { 
    title : { type : 'inside' }
   }, // helpers
   beforeLoad: function() {
    this.title = $(this.element).attr('caption');
   }
  }); // fancybox
 }); // ready
于 2012-11-02T19:01:20.887 に答える
0

1 つの (そして最も簡単な) オプションは、親 href のタイトル属性を設定することです。

と同じように：

<a href="./bigimg/image.jpg" title="My custom title here" id="example">
    <img src="./thumbs/image.jpg" alt="thumbnail of image">
</a>

タイトルをライトボックスの真下ではなく、ライトボックス内に配置する場合は、'titlePostion' 属性を変更する必要があります。ちょうどこのような：

$("a.fancybox").fancybox({
    'titlePosition'  : 'inside'
});

「上」の代わりに、「内」または「外」に配置することもできます。外側はデフォルトの fancybox の動作です。ライトボックスのすぐ下 (外側) にタイトルを配置します。「Over」は、タイトルをライトボックス内に配置しますが、背景が暗いアルファ透過の画像の上に配置します。[内側] は、タイトルをライトボックスの内側に配置しますが、画像の下の白いライトボックスの境界線内に配置します。

fancybox.netのフロントページでさまざまな結果を確認できます。以下の 3 つの写真を参照してください: 「さまざまなタイトルの位置 - 「外側」、「内側」、「上」」

于 2012-11-01T12:46:35.197 に答える