Добавление кнопки / изображения под изображением

Question

В настоящее время я использую fancybox3 для увеличения изображений.

В настоящее время это выглядит так:

Я хотел бы добавитькнопка / изображение под изображением, подобное этому:

Есть ли в 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;
}