我试图幻灯片添加到使用图片库 图库视图插件,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秒带我有:)

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top