Title In More Than 1 Line For Fancybox 2.0.6

I'm trying to do the exact same thing explained here: Formatting a title for FancyBox The problem is that I'm using FancyBox version 2.0.6 that it's different from the versione exp

Solution 1:

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

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

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

You can also set separated css declarations for your title:

.myTitle {background-color: #fff; padding: 5px;}
.myTitlep {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;}

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

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

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

etc. ... and use the same script.

NOTES: the OP commented:

if I click previous or next button the title disappear.

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

should be (from v2.0.6):

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

Working demo using v2.0.6