Universität Bielefeld

© Universität Bielefeld

Bild- und Video-Popup-Anzeige mit Fancybox

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

Beschreibender Bildtext
Beispiel: Klicken Sie auf das Bild


Code-Schnipsel

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


Code-Schnipsel

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.

Pop-Up-Link mit Vorschaubild

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


Pop-Up-Link ohne Vorschaubild

<div class="video">
  <a href="https://www.youtube-nocookie.com/embed/ViS4TfT3MlM" data-fancybox="galerie1" class="big-link">
    <i class="font-icon pfeil-rechts3 orange"></i> Video-Titel (YouTube)
  </a>
</div>


Playlist

Mit der Klasse "screenreader" können Sie Inhalte Ihrer Seiten für die Desktop- und Mobilversion verbergen lassen. Für Screenreader sind diese Inhalte weiterhin verfügbar.
Auf diese Art und Weise können Sie Playlisten erstellen, ohne dass die Videos auf der eigentlichen Webseite geladen und angezeigt werden müssen. Erst nach Klick auf den sichtbaren Video-Link wird die Playlist in der Lightbox-Galerie komplett angezeigt.

<div class="video">
  <a href="https://www.youtube-nocookie.com/embed/C2H1pNerMrU" data-fancybox="playlist1">
    <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>

<div class="video screenreader">
  <a href="https://www.youtube-nocookie.com/watch?v=QuSDW1QPyJc" data-fancybox="playlist1">
    Video-Titel
  </a>
</div>
<div class="video screenreader">
  <a href="https://www.youtube-nocookie.com/watch?v=or0nfuQrGuw" data-fancybox="playlist1">
    Video-Titel
  </a>
</div>
<div class="video screenreader">
  <a href="https://www.youtube-nocookie.com/embed/ViS4TfT3MlM" data-fancybox="playlist1">
    Video-Titel
  </a>
</div>