在图像下方添加按钮/图像

【问题标题】：Adding a button/image below the image在图像下方添加按钮/图像
【发布时间】：2018-05-18 22:04:47
【问题描述】：

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

目前看起来像这样：

我希望能够在图像下方添加一个按钮/图像，如下所示：

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

谢谢！

【问题讨论】：

我建议在工具栏中创建自定义按钮。文档中有一个示例演示了如何执行此操作。

标签： jquery fancybox fancybox-3

【解决方案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;
}

【讨论】：