Question

我正在使用twitter bootstrap 3.3.6创建一个网站。我之前正在使用fancybox 2.1.5，并且考虑切换到fancybox 3，因为它有移动滑动，缩略图看起来比前一个好得多。正如JFK在帖子的早期提到的关于标题，完全有效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);
    }
  },
});

它的解决方案是什么？此外，如何控制vimeo链接的iframe高度以适合移动设备。提前感谢您为我糟糕的英语做出解决方案和道歉。

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添加标题

1 个答案: