FancyBox 2.0.6的多行标题 [英] Title in more than 1 line for FancyBox 2.0.6

问题描述

我正在尝试执行此处说明的完全相同的操作: 格式化FancyBox的标题

I'm trying to do the exact same thing explained here: Formatting a title for FancyBox

问题是我使用的FancyBox版本2.0.6与另一个主题中解释的版本不同

The problem is that I'm using FancyBox version 2.0.6 that it's different from the versione explained in the other topic

/*
 *  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

Can you help me..? I tried to add the line temp=title.split('|'); if(!temp[1]){temp[1]=""}; after if (text) but it broke everything.. :P

推荐答案

使用 Fancybox v2.x ，您可以在锚点之后立即将title设置为单独的(隐藏)<div>像这样触发fancybox:

With Fancybox v2.x you could set your title in a separated (hidden) <div> just right after the anchor that triggers fancybox like:

<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内容.然后，您可以使用更简单的脚本:

In that way, you can have a more complex title with many lines and html content. Then you could use a much simpler script:

$(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

您还可以为title设置单独的css声明:

You can also set separated css declarations for your 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开销以及不必要的拆分，大小计算，换行等.

With this method you don't have to mess with the fancybox js/css files. Also less javascript means less CPU overhead with unnecessary splits, size calculation, wraps, etc.

问题:如果我只有一张图像(画廊)怎么办?

QUESTION: what if I have more then one image (a gallery)?

答案:对html中的每个图像执行相同的操作，例如:

Answer: do the same for each image in the html like:

<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>

等...并使用相同的脚本.

etc. ... and use the same script.

注释:OP对此进行了评论:

NOTES: the OP commented:

如果我单击上一个或下一个按钮，标题将消失.

if I click previous or next button the title disappear.

对于fancybox v2.0.6，我们需要使用选项beforeShow而不是afterLoad构建title，因此此行:

For fancybox v2.0.6, we need to build the title with the option beforeShow, rather than afterLoad so this line:

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

应该是(从v2.0.6起):

should be (from v2.0.6):

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

使用v2.0.6的演示工作

这篇关于FancyBox 2.0.6的多行标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！