- Home
- Primus
- Secundus
- Tertius
- Quartus
- Quintus
- Sextus

Cakes & Coffee
Ein Responsive Template

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

- Impressum
- Datenschutz
- Disclaimer

© 2040 Cakes And Coffee