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>
&l开发者_JS百科t;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>
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
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 :)
精彩评论