1

我正在尝试使用GalleryView插件 2.0 版将幻灯片添加到图片库。我有一个问题，幻灯片中的指定图片（缩略图）显示在面板中，而不是div中的指定图片（class="panel"）。

从示例和文档中可以明显看出，可以通过以下方式添加自定义幻灯片：

<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>

我做错了什么？我基本上从示例中完全复制粘贴，但它不起作用。有没有人在 GalleryView 中成功实现了这个幻灯片部分？

它的外观：

替代文字 http://img692.imageshack.us/img692/852/galleryviewfilmstripima.jpg

您可以清楚地看到面板中是缩略图图片而不是原始图片（与缩略图完全不同的图片）。

我正在使用以下设置对象：

<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>
4

2 回答 2

2

以防万一问题与GalleryView 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>

无论如何，请参阅GalleryView 2.0 示例

于 2010-02-23T11:29:12.370 回答
0

可以有自定义缩略图：

<ul id="gallery">
   <li><img class="panel-content" src="path/to/image" /><img src="path/to/thumbnail" /></li>
</ul>

但面板覆盖将不再起作用。5 秒的代码阅读把我带到了那里:)

于 2010-03-09T08:58:37.787 回答