Galeriefilmstreifen Bilder in das Panel
-
20-09-2019 - |
Frage
Ich versuche, die Gemäldegalerie hinzuzufügen Filmstreifen mit Galerie Plug-in Version 2.0. Ich habe ein Problem, dass die angegebenen Bilder in Filmstreifen (Miniaturbilder) in einem Fenster angezeigt werden anstelle des angegebenen Bild in div (class = "Panel").
Wie aus Beispielen und Dokumentation, individuelle Filmstreifen können auf folgende Weise hinzugefügt werden:
<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>
Meine Galerie sieht wie folgt aus:
<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>
Was mache ich falsch? Ich habe im Grunde total Copy-Paste aus Beispiel und es funktioniert nicht. Hat jemand erfolgreich diesen Filmstreifen Abschnitt in Galerie implementieren?
Wie es aussieht:
alt text http://img692.imageshack.us/img692/852/galleryviewfilmstripima .jpg
Sie können deutlich sehen, dass in der Platte ist eine Miniatur pic anstelle des Originals (ganz anderes Bild als Thumbnail).
Ich verwende die folgende Einstellung Objekt:
<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>
Lösung
Für den Fall, Ausgabe bezieht sich auf Galerie 2.0 finden Proben für es gibt es Änderungen in Bildern Liste Vorbereitung: Sie müssen nicht mehr zu verwenden Thumbnails benötigen ... Your'e Galerie Beschreibung sollte wie folgt aussehen
<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>
Wie auch immer, finden Sie unter Galerie 2.0 Probe
Andere Tipps
können benutzerdefinierte Thumbnails haben:
<ul id="gallery">
<li><img class="panel-content" src="path/to/image" /><img src="path/to/thumbnail" /></li>
</ul>
aber Panel-Overlay funktioniert nicht mehr. 5 Sekunden von Code-Lese brachte mich dort:)