在面板幻灯片图库视图图片
-
20-09-2019 - |
题
我试图幻灯片添加到使用图片库 图库视图插件,2.0版。我有在胶片指定的图像(缩略图)被显示在面板的的问题,而不是指定的画面强>在DIV(类=“面板”)。
如从例子和文档明显,定制胶卷可通过以下方式添加:
<ul class="filmstrip">
<li><img src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
<li><img src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></li>
</ul>
我的展厅看起来是这样的:
<div id="gallery_wrap">
<div id="photos" class="galleryview">
<div class="panel">
<img src="/upload/pic/IMG_02740_orig.jpg" />
</div>
<div class="panel">
<img src="/upload/pic/IMG_02740_orig.jpg" />
</div>
<ul class="filmstrip">
<li>
<img src="/upload/pic/IMG_02739_thumb.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
<li>
<img src="/upload/pic/IMG_02739_thumb.jpg" alt="Eden" title="Eden" /></li>
</ul>
</div>
</div>
我做错了吗?我从例如基本上总复制,粘贴和它不工作。有谁成功地实现这个幻灯片节图库视图?
它的外观:
替代文字http://img692.imageshack.us/img692/852/galleryviewfilmstripima .JPG
可以清楚地看到,在面板的缩略图PIC代替原有的(完全不同的画面比缩略图)。
我使用以下设置对象:
<script type="text/javascript">
$(function() {
$('#photos').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 38,
transition_speed: 1200,
background_color: '#222',
border: 'none',
easing: 'easeInOutBack',
pause_on_hover: true,
nav_theme: 'custom',
overlay_height: 52,
filmstrip_position: 'top',
overlay_position: 'top'
});
});
</script>
解决方案
万一问题涉及到 2.0图库视图时,看样品它有在图像列表制作的变化:你不需要再使用缩略图... 站立着画廊描述应该像
<div id="gallery_wrap">
<ul id="gallery">
<li>
<span class="panel-overlay">Effet du soleil</span>
<img src="/upload/pic/IMG_02740_orig.jpg" />
</li>
<li>
<span class="panel-overlay">Eden</span>
<img src="/upload/pic/IMG_02740_orig.jpg" />
</li>
</ul>
</div>
反正看到 2.0图库视图样品
其他提示
有可能具有自定义缩略图:
<ul id="gallery">
<li><img class="panel-content" src="path/to/image" /><img src="path/to/thumbnail" /></li>
</ul>
但面板的覆盖将不再有效。的代码读取5秒带我有:)
不隶属于 StackOverflow