在图片下方添加一个button/image

Question

我目前正在使用 fancybox3 来放大图像。

目前看起来是这样的：

我希望能够在图片下方添加一个 button/image，如下所示：

fancybox3 中是否有一个选项可以执行此操作，或者我是否必须修改源代码。你可以在 canescollector.com.

看到它

谢谢！

Answer 1

可以使用回调。唯一的问题是标题可以在图像之上，一种解决方案是将内容向上推。演示 - https://codepen.io/anon/pen/mKbwJK

JS:

$('[data-fancybox]').fancybox({
  idleTime: 0,
  afterShow: function(instance, current) {
    current.$content.append('<p class="fancybox-extra"><button>Click me</button></p>');
  }
});

CSS:

.fancybox-extra {
  position: absolute;
  top: 100%;
  width: 100%;
  text-align: center;
  padding: 10px;
}

/* Hide while zooming */
.fancybox-is-scaling .fancybox-extra {
  display: none;
}

/* Push content up */
.fancybox-slide--image {
  padding-bottom: 120px;
}

在图片下方添加一个button/image

Adding a button/image below the image

jquery

fancybox

fancybox-3