Galleryview Filmstrip Pictures no painel
-
20-09-2019 - |
Pergunta
Estou tentando adicionar tira de filme à galeria de fotos usando GalleryView plug-in, versão 2.0. Eu tenho um problema que as imagens especificadas no filme (figuras de miniatura) são exibidas em um painel em vez da imagem especificada em div (class = "painel").
Como é evidente nos exemplos e documentação, a tira de filme personalizada pode ser adicionada da seguinte maneira:
<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>
Minha galeria se parece com o seguinte:
<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>
O que estou fazendo errado? Eu basicamente tenho colas de cópia total do exemplo e ele não está funcionando. Alguém implementa com sucesso esta seção de filmes na Galleryview?
Como fica:
TEXTO DE ALT HTTP://img692.imageshack.us/img692/852/galleryviewfilmstripima.jpg
Você pode ver claramente que no painel é uma foto de miniatura em vez da imagem original (totalmente diferente da miniatura).
Estou usando o seguinte objeto de configuração:
<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>
Solução
Apenas para o caso de a edição está relacionada a GalleryView 2.0, veja amostras para isso, há mudanças na preparação da lista de imagens: você não precisa mais usar miniaturas ... sua descrição da galeria deve parecer
<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>
De qualquer forma, veja GalleryView 2.0 Amostra
Outras dicas
É possível ter miniaturas personalizadas:
<ul id="gallery">
<li><img class="panel-content" src="path/to/image" /><img src="path/to/thumbnail" /></li>
</ul>
Mas o painel-overlay não funcionará mais. 5 segundos de leitura de código me trouxeram lá :)