Galleria 使用全尺寸图像而不是缩略图答案

【问题标题】：Galleria using full size images instead of thumbnailsGalleria 使用全尺寸图像而不是缩略图
【发布时间】：2014-07-24 23:50:57
【问题描述】：

当我检查元素时，它表明 Galleria 使用的是全尺寸图片而不是缩略图。

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/

如何让 Galleria 使用缩略图而不是全尺寸图片？

【问题讨论】：

标签： javascript jquery html css galleria

【解决方案1】：

重点是data-big属性。像这样定义画廊项目。

a href="ThumbImage.jpg" 和 img src="ThumbImage.jpg 和 data-big="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>

【讨论】：

在 Plunker 中试过 plnkr.co/edit/oB5jF1ydxLmJg0J4wQw1?p=preview 在本地也试过。问题是正在使用 css/html 调整图像大小。如果您检查元素，让我们说 Chrome。标签 src 是 upload.wikimedia.org/wikipedia/commons/thumb/2/2f/… 不是 upload.wikimedia.org/wikipedia/commons/thumb/2/2f/…
查看更新版本。使用 data-big 属性，图库使用原始缩略图图像（未调整大小/缩放版本的大图像）。我在 Firefox 中使用 Inspect Element With Firebug 检查了它。