Fancybox 2稍后加载更高分辨率的图像

Question

现在我正在使用Fancybox 2来显示图像库，这是一个非常有用的图库工具。现在我的工作是在页面上有较小的图像被点击以在图库视图中显示更大，更高分辨率的图像版本，但在此之后，我希望在此之后加载更高分辨率的图像。有没有一种快速简单的方法来做到这一点，或者我将不得不自己写一些东西来加载这些图像的“视网膜”版本，因为在观看者中已经显示了高但不是太高的版本？

Answer 1

我会怎么做，是设置在href属性的高分辨率图像，并在（HTML5）的最高分辨率图像data-*像属性：

<a href="image01_hd.jpg" data-hd="image01_retina.jpg" class="fancybox"> 
    <img src="image01_thumb.jpg" alt="" /> 
</a> 

然后，使用beforeShow回调，我们可以换在图像的fancybox用锚与类fancybox和指向最高分辨率的图像，我们可以从data属性一样得到：

jQuery(document).ready(function ($) { 
    $(".fancybox").fancybox({ 
     beforeShow: function() { 
      var hd = $(this.element).data("hd"); 
      if (hd) { 
       $(".fancybox-image").wrap($("<a />", { 
        "href": hd, 
        "class": "fancybox" 
       })) 
      } 
     } 
    }); 
}); 

通知我们验证元素是否具有data属性以避免包装最高分辨率的图像。

见JSFIDDLE

最后一个音符：你可能更愿意设置在图像的title链接到最高分辨率图像，而不是包裹了整个事情的，但至少你的想法在那里到组和得到花式框内的参考