Bild- und Video-Lightbox-Anzeige
Mit dem Fancybox-Plugin lassen sich Bilder, Videos, Maps und andere iFrames in einem Pop-Up-Rahmen anzeigen und im Galerie-Modus nacheinander durchklicken.
Die Scripte für Fancybox sind bereits im Portal-Template 2017 integriert und sofort mit den untenstehenden Code-Schnipseln nutzbar.
So nutzen Sie die Bildanzeige
Legen Sie einfach einen Link mit der Bild-URL an und fügen das Attribut data-fancybox="galerie1" hinzu (der Wert "galerie1" ist optional und beliebig wählbar).
Alle Bilder, die den gleichen Wert bei data-fancybox hinterlegt haben, können in der Lightbox nacheinander durchgeklickt werden.
<a href="/images/template_2017/kopfbilder/schmaler/bau.jpg" data-fancybox="galerie1">
<img src="/images/template_2017/kopfbilder/schmaler/bau.jpg" alt="Beschreibender Bildtext" width="484" /></a>
So nutzen Sie die Videoanzeige
Die Videoanzeige funktioniert im Grunde genau wie die Bildanzeige, nur dass Sie einen zusätzlichen DIV-Container mit der Klasse "video" anlegen müssen.
Da es nicht möglich ist automatisch ein Vorschaubild aus dem YouTube-Video zu ziehen, müssen Sie selbst ein Vorschaubild erstellen und in Ihrer Roxen-Struktur abspeichern.
<div class="video">
<a href="https://www.youtube-nocookie.com/embed/C2H1pNerMrU" data-fancybox="galerie1">
<img src="/kommunikation/internet/cd/images/in-der-unihalle.jpg" alt="Beschreibender Bildtext" width="484" />
<div class="copyright float-right">YouTube-Video</div>
</a>
</div>
Anlegen einer Playlist
Auf diese Weise ist es ebenfalls möglich eine Playlist (Video-Galerie) anzulegen, ohne dass es lange Ladezeiten gibt.
Weitere Informationen dazu und eine Anleitung mit Popup-Beispielen finden Sie auf den Webseiten des Internet Service:
→ Bild- und Video-Popup-Anzeige mit Fancybox
Kontakt
Webredaktion- Dagmar da Silveira Macedo
Redakteurin Webredaktion - Uwe Matull
Mitarbeiter Webredaktion