的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