fancybox v3.5 - Retina

fancybox-v3-5-retina.markdown

fancybox v3.5 - Retina

A Pen by Janis Skarnelis on CodePen.

License.

index.html

<h2>fancybox v3.5 - Retina</h2>

<p>
   Resize images to look sharper on retina displays
</p>
  
<hr class="my-5" />

<p class="imglist">
  <a href="https://source.unsplash.com/uPc2yuiu8cY/1500x1000" data-fancybox="images">
    <img src="https://source.unsplash.com/uPc2yuiu8cY/240x160" />
  </a>

  <a href="https://source.unsplash.com/mmYyzczxvdo/1500x1000" data-fancybox="images">
    <img src="https://source.unsplash.com/mmYyzczxvdo/240x160" />
  </a>

  <a href="https://source.unsplash.com/H0_ZaFn2JjU/1500x1000" data-fancybox="images">
    <img src="https://source.unsplash.com/H0_ZaFn2JjU/240x160" />
  </a>
</p>

script.js

$('[data-fancybox="images"]').fancybox({
  afterLoad : function(instance, current) {
    var pixelRatio = window.devicePixelRatio || 1;

    if ( pixelRatio > 1.5 ) {
      current.width  = current.width  / pixelRatio;
      current.height = current.height / pixelRatio;
    }
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>

styles

<link href="https://codepen.io/fancyapps/pen/Kxdwjj" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.css" rel="stylesheet" />