Как сделать fancybox-заголовок по ширине изображения? - PullRequest
Новая
       50

Как сделать fancybox-заголовок по ширине изображения?

0 голосов
/ 13 июня 2018

Теперь ширина fancybox-caption равна 100%

Как сделать fancybox-caption по ширине изображения?

enter image description here

Код - Codepen 

$('[data-fancybox="images"]').fancybox({
  idleTime: false,
  baseClass: 'fancybox-custom-layout',
  margin: 0,
  gutter: 0,
  infobar: false,
  thumbs: {
    hideOnClose: false,
    parentEl: '.fancybox-outer'
  },
  touch: {
    vertical: false
  },
  buttons: [
    'close',
    'thumbs',
    'share'
  ],
  animationEffect: "fade",
  animationDuration: 300,
  onInit: function(instance) {
    // Create new wrapping element, it is useful for styling
    // and makes easier to position thumbnails
    instance.$refs.inner.wrap('<div class="fancybox-outer"></div>');
  },
  caption: function(instance, item) {
    return '<h3>Caption</h3>';
  }
});
.fancybox-custom-layout .fancybox-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: #f7f7f7;
  color: #000;
  padding: 15px;
}

.fancybox-custom-layout .fancybox-caption h3 {
  margin: 0;
}

.fancybox-custom-layout .fancybox-caption:before,
.fancybox-custom-layout .fancybox-caption:after {
  background: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" rel="stylesheet" />


<a href="https://source.unsplash.com/ndjyaOp0fOc/1600x900" data-fancybox="images" data-type="image">
  <img src="https://source.unsplash.com/ndjyaOp0fOc/240x160" />
</a>

Спасибо.Буду рад любой помощи

1 Ответ

0 голосов
/ 13 июня 2018

Просто так не работает.И зачем тебе это?1) Это будет выглядеть странно при перелистывании или масштабировании;2) Что, если содержание заголовка будет очень длинным, а изображение будет вертикальным?Это выглядело бы странно;3) Думал ли ты, как это будет выглядеть на модибе (маленьком экране) устройств?Опять же это выглядело бы странно.

...