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

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

如果您将此代码用于多个图像，请改用classa

<a class="fb_image" href...

和

$(".fb_image").fancybox()