3

How can I add a frame around image-slides in fancyBox 3?

Currently, I've tried with the following:

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

This works when looking at and navigating between the slides, but it does not look good during the open/close transition of the fancyBox.

You can see it in action on this CodePen.

Is there a better way to create the frame in fancyBox 3, so it looks good while opening and closing the slide/gallery as well? I was not able to find any information on this in the documentation.

Magnar Myrtveit
  • 2,432
  • 3
  • 30
  • 51
  • I don't know how easy it would be to get good results, as the image is displayed at several sizes. Would you consider adding the white frame in photoshop? – sol Feb 28 '17 at 10:34
  • I don't think photoshop is a good option. Adding the frame to the large image, but not to the thumbnail, would also result in a not-so-nice transition. I do not want to add a frame to the thumbnail. – Magnar Myrtveit Feb 28 '17 at 11:11
  • Sorry, it is not currently possible, because image wrapping element is scaled using CSS transform and any visual element would scale while animating, too. Therefore it would look distorted. – Janis Mar 02 '17 at 18:50
  • Thanks, @Janis. Maybe, if there is an answer to this question: http://stackoverflow.com/questions/42505524/transitions-in-fancybox-3, it wouldn't really be an issue since I could use another transition. Do you know? – Magnar Myrtveit Mar 03 '17 at 08:15

1 Answers1

1

Try as below May be it will help you.

$("[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>
khushi
  • 178
  • 2
  • 10
  • Good suggestion adding the frame via callbacks. Unfortunately, it doesn't help. Since the frame suddenly appears when the image is fully shown, the image suddenly becomes smaller, which ruins the transition. Your example is using fancyBox2, without the zooming transition, and therefore it looks good. – Magnar Myrtveit Feb 28 '17 at 11:35
  • Hi @MagnarMyrtveit you can follow my js code and css for your version of fancy- box – khushi Feb 28 '17 at 11:39
  • I tried it, and it didn't look good because of the zooming transition in fancyBox 3 :/ – Magnar Myrtveit Feb 28 '17 at 14:22