как разместить заголовок / заголовок прямо под контентом на fancybox? - PullRequest
Новая
       21

как разместить заголовок / заголовок прямо под контентом на fancybox?

0 голосов
/ 18 июня 2019

Текущая версия Fancybox помещает заголовок внизу окна, а не прямо под нижней стороной изображения. Я тоже пытаюсь спросить разработчика, но думаю, я не получу быстрых ответов.

Здесь также есть несколько вопросов для этой проблемы, но кажется, что найденные предложения больше не работают, например, с помощью usign title или data-fancybox-title.

Я также пытался изменить шаблон (для этого есть вариант экземпляра), но он не работает.

Итак, есть ли скрытые способы сделать это?

1 Ответ

0 голосов
/ 18 июня 2019

Для заголовка: удалите заголовок из шаблона, затем извлеките его вручную после загрузки: 

$('[data-fancybox]').fancybox({
  baseTpl:
    '<div class="fancybox-container" role="dialog" tabindex="-1">' +
    '<div class="fancybox-bg"></div>' +
    '<div class="fancybox-inner">' +
    '<div class="fancybox-infobar"><span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span></div>' +
    '<div class="fancybox-toolbar">{{buttons}}</div>' +
    '<div class="fancybox-navigation">{{arrows}}</div>' +
    '<div class="fancybox-stage"></div>' +
    '</div>' +
    '</div>'

  ,afterLoad : function(fb, item){
    item.$content.remove('.fb-caption').append('<div class="fb-caption">' + $(item.$thumb.context).data('caption') + '</div>');
  }
}

CSS: 

.fb-caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
  z-index: 99996;
  pointer-events: none;
  text-align: center;
  transition: opacity 200ms;
  background: none;
}
...