使用全尺寸圖像代替縮略圖的環球免稅店

當我檢查該元素時，它表示環球免稅店使用全尺寸圖像代替縮略圖。距離Galleria文檔使用全尺寸圖像代替縮略圖的環球免稅店

例子是http://galleria.io/docs/getting_started/quick_start/

<div class="galleria"> 
    <a href="/img/large1.jpg"><img src="/img/thumb1.jpg" data-title="My title" data-description="My description"></a> 
    <a href="/img/large2.jpg"><img src="/img/thumb2.jpg" data-title="Another title" data-description="My <em>HTML</em> description"></a> 
</div>

我的代碼是

<div class="galleria"> 
    <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/3D_Schildersdoek.JPG/812px-3D_Schildersdoek.JPG"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/3D_Schildersdoek.JPG/220px-3D_Schildersdoek.JPG" alt=""/></a> 
    <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG/800px-Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG/300px-Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG" alt=""/></a> 
</div>

到的jsfiddle用於演示的鏈接http://jsfiddle.net/zain_aligent/EAVtM/4/

我怎樣才能讓廣場使用縮略圖，而不是完整大小的圖像？

來源

2014-07-24 zainengineer

關鍵點是data-big屬性。定義像這樣的圖庫項目。

A HREF = 「ThumbImage.jpg」和IMG SRC = 「ThumbImage.jpg和數據大=」 LARGEIMAGE.jpg」

<div class="galleria"> 
    <a href="ThumbImage.jpg"> 
     <img src="ThumbImage.jpg" 
      data-big="LargeImage.jpg" 
      data-title="My title" 
      data-description="My description"/> 
    </a> 
    <a href="ThumbImage.jpg"> 
     <img src="ThumbImage.jpg" 
      data-big="LargeImage.jpg" 
      data-title="My title" 
      data-description="My description"/> 
    </a> 
</div>

嘗試下面的更新版本。

<!DOCTYPE html> 
<html> 

<head> 
    <link type="text/css" href="galleria/themes/classic/galleria.classic.css" media="screen" rel="stylesheet" /> 
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
    <script src="galleria/galleria-1.3.6.min.js"></script> 
</head> 

<body> 


<div class="galleria"> 
    <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/3D_Schildersdoek.JPG/220px-3D_Schildersdoek.JPG"> 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/3D_Schildersdoek.JPG/220px-3D_Schildersdoek.JPG" 
      data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/3D_Schildersdoek.JPG/812px-3D_Schildersdoek.JPG" 
      data-title="My title" 
      data-description="My description" 
      /> 
    </a> 
    <a href="http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG/300px-Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG"> 
     <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG/300px-Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG" 
      data-big="http://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG/800px-Bitwa_pod_Grunwaldem_Muzeum_Narodowe_05.JPG" 
      data-title="Another title" 
      data-description="My <em>HTML</em> description" 
     /> 
    </a> 
</div>  



    <script type="text/javascript"> 
     $(document).ready(function() { 
      Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js'); 

      $('.galleria').galleria({ 
      width: 350, 
      height: 315, 
      thumbCrop: "height", 
      lightbox: true 
      }); 
      Galleria.run('.galleria'); 
     }); 
    </script> 

</body> 
</html>

來源

2014-07-25 01:35:13 khan

在Plunker http://plnkr.co/edit/oB5jF1ydxLmJg0J4wQw1?p=preview試圖也試過在本地，但問題是圖像正在resiz編輯使用CSS/HTML。如果你檢查元素，讓我們說鉻。標籤src是http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/3D_Schildersdoek.JPG/812px-3D_Schildersdoek.JPG不是http://upload.wikimedia.org/wikipedia/commons/thumb/ 2/2f/3D_Schildersdoek.JPG/220px-3D_Schildersdoek.JPG – zainengineer

查看更新版本。具有** data-big **屬性，圖庫使用原始縮略圖圖像（未調整大小/縮放版本的大圖像）。我用**在Firefox中檢查元素與Firebug **進行了檢查。 – khan

使用全尺寸圖像代替縮略圖的環球免稅店

回答

相關問題