Web Development
Oliver Thiele

Lightbox ohne Extension in TYPO3 verwenden
In diesem Tutorial geht es um den Einbau einer Lightbox in TYPO3, ohne dabei eine TYPO3-Extension wie z.B. kj_imagelightbox2, perfectlightbox, … zu verwenden.

Wer noch nicht weiß, was eine Lightbox macht, muss nur auf ein Bild in diesem Artikel klicken. Bisher hat TYPO3 eine Klick-Vergrößerungs-Funktion bei den Content-Elementen „Text und Bilder” und „Bilder” über die Funktion showpic.php ermöglicht. Es wurde mit JavaScript aber nur ein neues Browserfenster geöffnet und man hatte nicht die Möglichkeit bei dem vergrößertem Bild zwischen weiteren Bildern des Artikels hin- und her zu wechseln.

Seit der TYPO3 Version 4.5 ist es nun dank neuer Eigenschaften bei dem cObject Image möglich, sowohl dem Link-Tag neue Parameter als auch den Pfad zur Orginaldatei zu übergeben.

Mit der Einstellung directImageLink = 1 wird der Pfad zum Orginalbild direkt verwendet.

Damit die Bilder gezielt über Javascript angesprochen werden können, müssem jedem Link-Tag beispielsweise die zwei Parameter class=”lightbox” und rel="lightbox1" zugewiesen werden. Mit der Eigenschaft linkParams wird genau dieses erreicht. Die CSS-Klasse ermöglicht es dem Lightbox-Script, alle Bilder herauszusuchen, auf die der Lighbox-Effekt angewendet werden soll. Das rel-Attribut wird in diesem Beispiel mit der UID des Inhaltselements versehen, um alle Bilder des Inhaltselements für die Navigation in der Lightbox zu gruppieren.

TypoScript Setup

setup.t3s

TypoScript
tt_content.image.20.1.imageLinkWrap {
	JSwindow = 0
	directImageLink = 1
	linkParams.ATagParams {
		dataWrap = class="fancybox" data-fancybox-group="lightbox{field:uid}"
	}
}

Alternativ zum Eintrag ins TypoScript-Setup können die Werte auch über die folgenden CSS-Styled-Content-Konstanten gesetzt werden. Bei Verwendung des Konstanten-Editors löschen sie bitte die eckigen Klammern, da die hier eingesetze Lightbox „Fancybox” ansonsten JavaScript-Fehler ausgibt und somit nicht funktioniert.

TypoScript Konstanten (alternativ zum TS-Setup)

constants.t3s

TypoScript
styles.content.imgtext.linkWrap {
	lightboxEnabled = 1
	lightboxRelAttribute = lightbox{field:uid}
	lightboxCssClass = lightbox
}

Größe der verlinkten Bilder

Damit TYPO3 kleine Bilder in der Lightbox nicht hochskaliert, können Sie entweder die Orginaldateien mit den folgenden 2 Zeilen verwenden:

tt_content.image.20.1.imageLinkWrap.height =
tt_content.image.20.1.imageLinkWrap.width =

oder im TS-Setup config.noScaleUp = 1 verwenden. Dieser EIntrag kann auch im Install-Tool erfolgen.

Lightbox für die TYPO3-Extension News (tt_news)

Sie können den Lightbox-Effekt auch bei tt_news (und bei anderen Erweiterungen, die imageLinkWrap einsetzen) aktivieren. Am einfachsten findet man die zu verändernden Stellen im TypoScript-Objectbrowser → Setup im Bereich plugin.[extensionkey]. …

TypoScript-Setup für Lightbox in tt_news

plugin.tt_news.displaySingle.image.imageLinkWrap {
	JSwindow = 0
	directImageLink = 1
	linkParams.ATagParams.dataWrap = class = "lightbox" rel="lightbox{field:uid}"
	height =
	width =
}

Einbinden der Lightbox jQuery Fancybox

Bei der Auswahl der Lightbox sollten Sie darauf achten, dass Sie nicht unbedingt mehrere JavaScript-Frameworks einsetzen – größere Downloads und mögliche Konflikte wären die Folge. Als Beispiel soll hier daher das auf jQuery aufbauende Fancybox dienen, dass Sie unter der URL http://fancybox.net/ herunterladen können.
Im entpackten Zip-Archiv finden Sie einen Ordner fancybox, den Sie im Ordner fileadmin/templates/js/ hochladen können. Dieser enthält die CSS-, JavaScript und Bilddateien der Fancybox.

Im head-Bereich der Webseite muss das CSS eingefügt werden:

page.includeCSS {
	fancybox = fileadmin/templates/js/fancybox/jquery.fancybox-1.3.4.css
}

Die JavaScript-Dateien werden für einen schnelleren Seitenaufbau vor dem schließenden body-Tag eingebunden. Sinnvoll ist es, jQuery über die URL http://jquery.com aktuell herunterzuladen. Diese ist im folgenden Beispiel schon eingebunden:

page.includeJSFooter {
	jquery = fileadmin/templates/js/libs/jquery-1.6.2.min.js
	# Optionales Plugin für mehr Effekte als "swing" & "linear"
	jquery_easing = fileadmin/templates/js/fancybox/jquery.easing-1.3.pack.js
	# Fancybox Plugin
	fancybox = fileadmin/templates/js/fancybox/jquery.fancybox-1.3.4.pack.js
	# Initialisierung des Plugins
	enable_fancybox = fileadmin/templates/js/script.js
}

Eigenes JavaScript zur Aktivierung der Fancybox

In der von Ihnen anzulegenden JavaScript-Datei script.js wird der Lightbox-Effekt für alle Links mit der Klasse „lightbox“ aktiviert. Für weitere Konfigurationsmöglichkeiten der Fancybox besuchen Sie bitte die Website http://fancybox.net/api/.

jQuery.noConflict();
jQuery(document).ready(function() {
	jQuery('a.lightbox').fancybox({
		'titlePosition' : 'inside',
		'overlayColor' : '#aaa',
		'overlayOpacity' : '0.5',
		'hideOnContentClick' : 'true',
		'speedIn' : '100',
		'speedOut' : '100',
		'transitionIn' : 'fade',
		'transitionOut' : 'elastic'
	});
});

© Copyright 2003-2016 Web Development Oliver Thiele. All rights reserved. - Diese Seite wurde am 04.09.2014 um 15:48 erstellt.
Letzte Änderung: 27.07.2015 16:34:53
TYPO3, Tutorial, Lightbox, jQuery, Fancybox, directImageLink, linkParams

oliver-thiele.de Trustcheck Seal