个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
当我检查元素时，它表明 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/
如何让画廊使用缩略图而不是全尺寸图像？
最佳答案
关键点是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>
关于javascript - Galleria 使用全尺寸图像而不是缩略图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24945862/
25
4
0
我的网站使用 AmCharts，我想将其设为全尺寸。例如，我有以下代码: #chartdiv { width : 50%; height : 500px; float : left; } var
您需要使用edge或mozilla打开以下页面。 这是页面:codepen.io 这是我尝试过的: html{ max-height:1900px; max-width:2600px; } 因
我正在尝试通过以下代码使 html5 canvas 变为全尺寸。我知道还有其他使用 javascript 的方法，但是这有什么问题吗？ Canvas_dot #m
如何达到outerPanel的全宽？ private JPanel createLabelPanel() { final JToolTip tt = new JToolTip(
我的页面分为 3 个部分。 , 和 . 固定在顶部，大小为 109px，边框高 6px，因此 到顶部有 109 像素的边距。 我想要 扩展到 下面的整个页面和 那应该，如果没有可用于将其向下推的
我有一个网站需要在浏览器窗口中完全独立，即用户不必上下滚动即可查看网站的不同部分。太长而无法放入内容 Pane 的内容由 overflow:auto 处理，效果很好。 问题是，无论我怎么尝试，我仍然遇
我正在尝试设置一个网页，但由于我的元素的高度，我快疯了。特别是，我想要的布局是: 顶部有一个固定高度(例如 150 像素)和 100% 宽度的标题。 在标题下，我需要两列。左边的列有固定的宽度(例如
如何在 XAML 中将根布局的尺寸设置为 的 100% 宽度和高度？包含 Silverlight 应用程序的标记。 我试过指定 100%，但宽度和高度属性只采用单位文字(精确像素)。有没有办法让 S
ONLINE SAMPLE 我想让第一个 div layer1(红色 block )显示窗口的完整大小，可缩放。Layer2(蓝色 block )假设始终在 layer1 之下。但是，当我将窗口高度变
我不确定如何解释我到底想要什么(这也很难用谷歌搜索)，但我想创建一个表格，每个单元格都有特定的宽度和高度(比如 40x40 像素) . 这个表格将比视口(viewport)大很多，所以它需要一些滚动，
我是一名优秀的程序员,十分优秀！