Fancybox 3 add caption

Question

I am creating a website using twitter bootstrap 3.3.6. I was using fancybox 2.1.5 earlier and thought of switching to fancybox 3 as it has the mobile swipe and the thumbnail looks are much better than the previous 1. As JFK had mentioned in early of the post regarding the caption, is perfectly working in 2.1.5 but after changing it to 3, it doesn't even work.

<div>
  <div class="post-thumb">
    <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_b.jpg" data-title-id="option1-title">
      <div class="hover-state">
        <p class="cont"><i class="fa fa-search"></i></p>
      </div>
      <img src="http://farm8.staticflickr.com/7140/7061825385_0ccedf2a8e_b.jpg" alt="15" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"> </a>
  </div>
  <h4><a>Option 1</a></h4>
  <ul>
    <li><i class="fa fa-angle-right"></i><span class="cat-name"></span></li>
  </ul>
</div>
<div>
  <div class="post-thumb">
    <a class="fancybox-thumb" rel="fancybox-thumb" href="http://fancyapps.com/fancybox/demo/2_b.jpg" data-title-id="option2-title">
      <div class="hover-state">
        <p class="cont"><i class="fa fa-search"></i></p>
      </div>
      <img src="http://fancyapps.com/fancybox/demo/2_b.jpg" alt="15" sizes="(max-width: 249px) 100vw, 249px" height="187" width="249"> </a>
  </div>
  <h4><a>Option 2</a></h4>
  <ul>
    <li><i class="fa fa-angle-right"></i><span class="cat-name"></span></li>
  </ul>
</div>


<div id="#open1-title" class="hidden">
  <p>
    This is open 1 image
  </p>
</div>
<div id="#open2-title" class="hidden">
  <p>
    This is open 2 image
  </p>
</div>

JS

$(".fancybox-thumb").fancybox({
  mouseWheel: true,
  scrolling: 'no',
  autoCenter: true,
  maxWidth: "100%",
  maxHeight: "100%",
  fitToView: false,
  width: '80%',
  height: '80%',
  autoSize: false,
  closeClick: false,
  openEffect: 'elastic',
  closeEffect: 'elastic',
  next: {
    39: 'left'
  },
  prev: {
    37: 'right'
  },

  close: [27],
  helpers: {
    overlay: {
      locked: true,
    },
    thumbs: {
      width: 50,
      height: 50
    },
    title: {
      type: 'inside'
    }
  },
  beforeShow: function() {
    var el, id = $(this.element).data('title-id');
    if (id) {
      el = $('#' + id);

      if (el.length) {
        this.title = el.html();
      }
    }
  },
  afterLoad: function() {
    var caption = $('#fbCaption');
    if (this.title) {
      this.title += caption;
      console.log(this.title);
    }
  },
});

What is the solution for it? Also, how to control the height for iframe for vimeo links to properly fit in mobile devices. Thank you in advance for the solution and apologies for my bad english.

Answer 1

Solved:

changed from:

beforeShow: function() {
var el, id = $(this.element).data('title-id');
if (id) {
  el = $('#' + id);

  if (el.length) {
    this.title = el.html();
  }
}
},

to

afterLoad: function() {
var el, id = $(this.element).data('title-id');
if (id) {
  el = $('#' + id);

  if (el.length) {
    this.title = el.html();
  }
}
},