© Universität Bielefeld

Internet Service

Bild- und Video-Lightbox-Anzeige

Veröffentlicht am 17. Juli 2018, 14:43 Uhr
Titelbild mit Text: Video-Lightbox

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

Gesendet von Manuela Ewers in How-to
Kommentare:

Senden Sie einen Kommentar:
  • HTML Syntax: Eingeschaltet

Kontakt

Webredaktion
  • Dagmar da Silvera Macedo
    Redakteurin Webredaktion
  • Uwe Matull
    Mitarbeiter Webredaktion
Web-Entwicklung
  • Dr. Markus Paulußen
    Leitung Web-Entwicklung
  • Manuela Ewers
    Web-Entwicklerin
internet@uni-bielefeld.de