2

ここで説明されているのとまったく同じことをしようとしています： FancyBoxのタイトルのフォーマット

問題は、他のトピックで説明されているバージョンとは異なるFancyBoxバージョン2.0.6を使用していることです。

/*
 *  Title helper
 */

F.helpers.title = {
    beforeShow: function (opts) {
        var title, text = F.current.title;

        if (text) {
            title = $('<div class="fancybox-title fancybox-title-' + opts.type + '-wrap">' + text + '</div>').appendTo('body');

            if (opts.type === 'float') {
                //This helps for some browsers
                title.width(title.width());

                title.wrapInner('<span class="child"></span>');

                //Increase bottom margin so this title will also fit into viewport
                F.current.margin[2] += Math.abs(parseInt(title.css('margin-bottom'), 10));
            }

            title.appendTo(opts.type === 'over' ? F.inner : (opts.type === 'outside' ? F.wrap : F.skin));
        }
    }
};

手伝って頂けますか..？行temp=title.split（'|'）;を追加しようとしました。if（！temp [1]）{temp [1] = ""}; if（テキスト）の後、しかしそれはすべてを壊しました..：P

4

1 に答える 1

4

Fancybox v2.xを使用すると、次のようにfancyboxをトリガーするアンカーの直後にtitle分離（非表示）に設定できます。<div>

<a class="fancybox"  href="images/01.jpg">open image</a>
<div style="display: none;"><!-- my title for fancybox above-->
 <p>Line 1</p>
 <p>line 2 with <a href="#nogo">link</a></p>
</div>

titleこのようにして、多くの行とhtmlコンテンツを含むより複雑なものにすることができます。次に、はるかに単純なスクリプトを使用できます。

$(document).ready(function() {
 $(".fancybox").fancybox({
  helpers : { 
   title : { type : 'inside' }
  }, // helpers
  /* the following option works fine until version v2.0.5 or below */
  // afterLoad: function(){
  //  this.title = '<div class="myTitle">'+$(this.element).next('div').html()+'</div>';
  // }
  /* the following option should be set for version v2.0.6+ */
      beforeShow: function(){
       this.title = '<div class="myTitle">'+$(this.element).next('div').html()+'</div>';
      }
 }); // fancybox
}); // ready

：に個別のcss宣言を設定することもできますtitle。

.myTitle {background-color: #fff; padding: 5px;}
.myTitle p {line-height: 16px; font-size: 12px; padding: 0; margin: 0;}
/* if you want the title stick to the image in fancybox */
.fancybox-title-inside-wrap  {margin-top: 0 !important;}

この方法を使用すると、fancybox js/cssファイルをいじる必要はありません。また、javascriptが少ないということは、不要な分割、サイズ計算、ラップなどによるCPUオーバーヘッドが少ないことを意味します。

質問：複数の画像（ギャラリー）がある場合はどうなりますか？

回答：次のように、HTMLの各画像に対して同じことを行います。

<a class="fancybox" rel="gallery" href="images/01.jpg">open image 1</a>
<div style="display: none;"><!-- my title for fancybox above-->
 <p>Line 1</p>
 <p>line 2 with <a href="#nogo">link</a></p>
</div>
<a class="fancybox" rel="gallery" href="images/02.jpg">open image 2</a>
<div style="display: none;"><!-- my second title -->
 <p>Line 1 for second image title</p>
 <p>line 2 with <a href="#nogo">link</a></p>
 <p>a third line here, why not?</p>
</div>

など...そして同じスクリプトを使用します。

注：OPはコメントしました：

前または次のボタンをクリックすると、タイトルが消えます。

fancybox v2.0.6の場合、次の行ではなくtitle、オプションを使用してをビルドする必要があります。beforeShowafterLoad

  afterLoad: function(){
   this.title = '<div class="myTitle">'+jQuery(this.element).next('div').html()+'</div>';
  }

（v2.0.6から）である必要があります：

  beforeShow: function(){
   this.title = '<div class="myTitle">'+jQuery(this.element).next('div').html()+'</div>';
  }

v2.0.6を使用した作業デモ

于 2012-04-20T18:18:09.427 に答える