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鏈接到最高分辨率圖像，而不是包裹了整個事情的，但至少你的想法在那裏到組和得到花式框內的參考