Fotoshows verbinden - Index7

Jquery Elastislide + Jquery Lightbox

Sie können die beiden genannten Fotoshows miteinander kombinieren. Nachfolgendes Beispiel zeigt es:
Sie sehen den Bild-Schuber (Elastislide) und bei Klick auf die Fotos öffnet sich die Lighbox-Gallery. Vergleichen Sie dazu die Bildschuber auf der Startseite 'index.html'

So funktioniert es

Diese Zusammenlegung machen Sie unkompliziert in der HTML-Datei.

So sieht der Code für den Elastislide-Part aus. Hinweis: Der Übersichtlichkeit wegen nur mit einem Listenpunkt (li) für ein Foto. Zur Erinnerung, der Befehl target="_blank" öffnet das Foto in einem neuen Browserfenster.

HTML
<div class="wrapper-box demo-1">
<ul id="carousel" class="elastislide-list">
<li><a href="images/picture07.jpg" target="_blank">
<img src="images/small-picture07.gif" width="150" height="160"  alt="">
</a></li>
</ul>
</div>

Und hier nachstehend die Änderungen, die Sie tätigen müssen:
Löschen Sie den 'target-Befehl' und fügen Sie die fett dargestellten Befehle hinzu. Das ist alles.

HTML
<div class="wrapper-box demo-1">
<ul id="carousel" class="elastislide-list">
<li><a href="images/picture07.jpg"  data-lightbox="gruppe1"
data-title="Ihre Bildunterschrift">
<img src="images/small-picture07.gif" width="150" height="160" alt="">
</a></li>
</ul>
</div>

Noch ein Hinweis: 'data-title' für eine Bildunterschrift ist optional und sollten Sie eine zweite Gallerie innerhalb der selben HTML-Datei aufmachen, so schreiben Sie bei der zweiten Gallerie dann bei 'data-lightbox' gruppe2 statt gruppe1.