Question

I am trying to add filmstrip to the picture gallery using GalleryView plug-in, version 2.0. I have a problem that the specified pictures in filmstrip (thumbnail pictures) are displayed in a panel instead of the specified picture in div (class="panel").

As is evident from examples and documentation, custom filmstrip can be added in the following way:

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

My gallery looks like this:

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

What I am doing wrong? I have basically total copy-paste from example and it is not working. Does anyone successfully implement this filmstrip section in GalleryView?

How it looks:

alt text http://img692.imageshack.us/img692/852/galleryviewfilmstripima.jpg

You can clearly see that in panel is a thumbnail pic instead of the original (totally different picture than thumbnail).

I am using the following setting object:

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

Answer 1

Just in case issue is related to GalleryView 2.0, see samples for it, there are changes in images list preparation: you don t need to use thumbnails anymore... Your e gallery description should look like

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

anyway, see GalleryView 2.0 sample

Answer 2

it IS possible to have custom thumbnails:

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

but panel-overlay won t work anymore. 5 Seconds of code reading brought me there :)

友情链接