使用帶有或不帶縮略圖的Fancybox 3圖庫？

Question

我對Fancybox 3有疑問。我有許多（10-15）圖像畫廊的網頁，每個畫廊都有大約50幅圖像。每個畫廊在主頁上都有一個圖片鏈接。 什麼的fancybox使用更好/更有效？：

1. 使用沒有縮略圖 - 從大尺寸圖像生成>縮略圖格 - >作用：打開一個畫廊，當所有大照片將被加載。

   <p> 
       <a href="big.jpg" data-fancybox="images">  
       <img src="small_thumbnail.jpg" /> 
       </a> 
   </p> 
   
   <div style="display: none;"> 
       <a href="big_1.jpg" data-fancybox="images"></a> 
       <a href="big_2.jpg" data-fancybox="images"></a> 
   </div> 
   

2. 與縮略圖使用 - 從縮略圖小尺寸圖像生成>縮略圖格 - >效果：打開主頁時的所有縮略圖被加載而沒有任何畫廊開通。

   <p> 
       <a href="big.jpg" data-fancybox="images"> 
       <img src="small_thumbnail.jpg" /> 
       </a> 
   </p> 
   
   <div style="display: none;"> 
       <a href="big_1.jpg" data-fancybox="images"> <img src="small_1_thumbnail.jpg"> </a> 
       <a href="big_2.jpg" data-fancybox="images"> <img src="small_2_thumbnail.jpg"></a> 
   </div> 
   

Answer 1

你有另一種選擇 - 使用data-thumb屬性來存儲自定義縮略圖。例如：

<a href="big-image.jpg" data-fancybox="images" 
    data-thumb="small-image.jpg"></a> 

硒這個演示 - http://codepen.io/fancyapps/pen/yMxzvE?editors=1010