Question

我的理解是，这将确保带有视网膜显示器的设备尽可能显示图像：

<img src="image_400x300.jpg" width="200" height="150" />

...这是一些FancyBox演示代码

<a id="fb_image" href="image_800x600.jpg" title="The Title">
    <img src="image_400x300.jpg" width="200" height="150" />
</a>

...主网页中的缩略图将支持视网膜显示，但我看不到用FancyBox打开图像时如何编程支持视网膜。

有什么想法吗？

Answer 1

我刚刚在fancyBox中添加了视网膜支持的拉取请求，看看： https://github.com/fancyapps/fancyBox/pull/420

Answer 2

您可能需要使用beforeShow回拨来破解它，例如：

$(document).ready(function() {
 $("#fb_image").fancybox({
  beforeShow: function(){
   var retinaWidth = this.width / 2; // set new image retina display width
   $(".fancybox-image").css({"width":retinaWidth,"height":"auto"}); // apply new retina display size to img
   // set new values for parent container
   this.width = retinaWidth;
   this.height = $(".fancybox-image").innerHeight();
  }
 }); // fancybox
}); // ready

如果您将此代码用于多个图片，请改用class

<a class="fb_image" href...

和

$(".fb_image").fancybox()

FancyBox图像查看器和视网膜显示

2 个答案: