的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

您可能需要使用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() 

Answer 2

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