Fancybox 3 添加标题

Question

我正在使用 Twitter 创建网站 bootstrap 3.3.6。我之前使用的是 fancybox 2.1.5，并考虑切换到 fancybox 3，因为它具有移动滑动功能，缩略图看起来比以前的 1 好得多。正如 JFK 在 post 早期提到的关于标题，在 2.1.5 中完美运行，但将其更改为 3 后，它甚至无法运行。

<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);
    }
  },
});

有什么解决办法吗？此外，如何控制 iframe for vimeo 链接的高度以正确适合移动设备。预先感谢您的解决方案，并为我糟糕的英语道歉。

Answer 1

已解决：

更改自：

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

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

至

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

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

Fancybox 3 添加标题

Fancybox 3 add caption

html

javascript

jquery

fancybox

twitter-bootstrap