Galleria使用全尺寸图像而不是缩略图
Galleria using full size images instead of thumbnails
当我检查元素时,它指示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 demo的链接是http://jsfiddle.net/zain_aligent/EAVtM/4/
如何使画廊使用缩略图图像而不是全尺寸图像?
关键是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>
相关文章:
- 当页面包含指向一个图像的多个链接时,fancyBox会复制缩略图辅助图像
- 用较大的图像交换缩略图
- 不应选择缩略图优先图像
- 为缩略图库和较大图像库添加下一个和上一个按钮
- 缩略图图像滑块
- 图像缩略图库中的“下一个”和“上一个”按钮中的“问题”
- 图像库缩略图滑块
- 缩略图库的XML数据图像绑定
- Jquery循环页面缩略图图像-保留主图像链接标签
- 从缩略图图像显示屏幕范围的版本
- 在网格中显示缩略图图像,并扩展预览
- 如何在缩略图图像的翻转上显示弹出窗口?Javascript、CSS
- 如何将交替类添加到缩略图图像的动态提要
- 当点击不同的2个缩略图图像时,页面跳转
- Jquery/Javascript缩略图图像问题
- 如何使图片库将显示图像更改为缩略图图像?
- Woocommerce缩略图图像交换
- Photowipe缩略图图像大小问题 - 尝试调整缩略图大小以获得统一的外观
- 如何将缩略图图像附加到 DIV 时以特定模式定位它们
- 在chrome浏览器中,它如何显示全尺寸的图像url,当用户在我的网站上拖动缩略图图像