TYPO3 Tutorial: Fancybox Bilder für News Beiträge mit tx_news ausgeben


In dieser kurzen Anleitung zeige ich, wie man mit Hilfe von Fancybox für Newsbilder einen Modal öffnet, sodass Bilder in vergrößerter Ansicht angezeigt werden.

News Extension vorbereiten

Wer es noch nicht wusste, hier eine gute Neuigkeit: Die News Extension von Georg Ringer bietet bereits nativen Lightbox/Modal Support für Bilder an. Man muss es nur im Setup aktivieren. Beachtet bitte, dass ich in diesem Beispiel FancyBox nehme. Wenn ihr euch besser mit anderen Modal Libraries auskennt, müsst Ihr das natürlich anpassen:

plugin.tx_news.settings.detail.media {
  image {
    lightbox {
        enabled = 1
        class = fancybox
        rel = fancybox[myImageSet]
    }
  }
}

Dadurch erhalten Bilder jetzt die Klasse „Fancybox“ und den Bezeichner für jeweilige Bilder um verschiedene Bilder auf einer Seite öffnen zu lassen.

Bilder per FancyBox triggern

Zum Schluss benötigen wir (Wenn noch nicht vorhanden) eine JS Funktion, die dann FancyBox triggert, um die Bilder in vergrößerter Ansicht anzeigen zu lassen. In meinem Fall so:

$(document).ready(function () {
    $(".fancybox").fancybox();
});

Und das wars auch schon! Jetzt könnt Ihr in euren Newsbeiträgen Fancybox (o.ä.) nutzen. Wer nicht extra Fancybox, Lightbox, Darkbox und co einrichten will, kann sich auch die Extension [NITSAN] All In One Lightbox installieren


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.