Рамка вокруг изображения в fancyBox 3

Question

Как добавить рамку вокруг слайдов изображений в fancyBox 3?

В настоящее время я пробовал со следующим:

<style>
  .fancybox-placeholder {
     padding: 40px;
     background: #fff;
  }
  .fancybox-image {
     position: static;
  }
</style>
<a href="img.jpg" data-fancybox><img src="thumb.jpg"></a>

Это работает при просмотре слайдов и навигации по ним, но не очень хорошо выглядит при переходе открытия / закрытия fancyBox.

Вы можете увидеть это в действии на этом CodePen.

Есть ли лучший способ создать рамку в fancyBox 3, чтобы она хорошо выглядела при открытии и закрытии слайда / галереи? Я не смог найти никакой информации по этому вопросу в документации.

Answer 1

Попробуйте, как показано ниже. Может быть, это поможет вам.

$("[data-fancybox]").fancybox({
  "onComplete": function() {
    console.log('open');
    $('.fancybox-placeholder').css('padding', '40px');
  },
  "beforeClose": function() {
    console.log('close');
    $('.fancybox-placeholder').css('padding', '');
    // fancybox is closed, run myOtherFunct()
  }
});

.fancybox-placeholder {
  background: #fff;
}

.fancybox-image {
  position: static;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.6/js/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.6/css/jquery.fancybox.min.css" rel="stylesheet" />

<h1>fancyBox with frame around images</h1>
<p>
  <a href="https://c1.staticflickr.com/9/8148/29324593462_abebaddc38_k.jpg" data-fancybox="images">
    <img src="https://c1.staticflickr.com/9/8148/29324593462_f890687b7a_m.jpg" />
  </a>

  <a href="https://c2.staticflickr.com/6/5499/30972532232_051e1dc57e_h.jpg" data-fancybox="images">
    <img src="https://c2.staticflickr.com/6/5499/30972532232_e9a298a0c5_m.jpg" />
  </a>

  <a href="https://c1.staticflickr.com/9/8021/29345513551_0c565462d8_k.jpg" data-fancybox="images">
    <img src="https://c1.staticflickr.com/9/8021/29345513551_16024a89e3_m.jpg" />
  </a>
</p>

<p>Click on one of the images to open the fancyBox. As you can see, the white frame around the image is too wide while the thumbnail is zoomed in. When the zooming is done, the frame suddenly gets its correct width.</p>
<p>How can I add a frame around the image in fancyBox 3 while keeping a nice transition? See the CSS for my current attempt.</p>