Pregunta

Estoy tratando de añadir tira de película a la galería de fotos de usar GalleryView plug-in, versión 2.0. Tengo un problema que las imágenes especificadas en la tira de película (imágenes en miniatura) se muestran en un panel en lugar de la imagen especificada en el div (class = "panel").

Como es evidente a partir de ejemplos y documentación, la tira de película de encargo se puede añadir en la forma siguiente:

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

Mi galería se ve así:

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

Lo que estoy haciendo mal? Tengo copiar y pegar básicamente totales de ejemplo y no está funcionando. ¿Alguien implementar con éxito esta sección tira de película en GalleryView?

¿Cómo se ve:

texto alternativo http://img692.imageshack.us/img692/852/galleryviewfilmstripima .jpg

Se puede ver claramente que en el panel es un pic miniatura en lugar del original (imagen totalmente diferente a la de miniaturas).

Estoy utilizando el siguiente objeto de configuración:

<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>
¿Fue útil?

Solución

Sólo en cuestión caso está relacionado con GalleryView 2,0 , ver muestras para ella, hay cambios en la preparación de la lista de imágenes: no es necesario utilizar miniaturas más ... Your'e Descripción galería debe ser similar

<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 todos modos, ver GalleryView 2.0 muestra

Otros consejos

Es posible tener miniaturas personalizadas:

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

pero panel de superposición no funcionará más. 5 segundos de lectura de códigos me llevó allí:)

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top