標題超過1線的fancybox 2.0.6

Question

我試圖做同樣的事情在這裏解釋： Formatting a title for 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（'|'）;如果{臨時[1] = 「」}（溫度[1]！）;如果之後（文本），但它打破了一切...：P

Answer 1

隨着的fancybox V2.X你可以設置你的一個分離（隱藏）title<div>恰到好處觸發的fancybox像錨後：

<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與選項beforeShow，而不是afterLoad所以這行：

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>'; 
    } 

Working demo using v2.0.6