Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
TYPO3: Eigene Lightbox benutzen, anstelle des Javascript Popups
Hat man für ein Bild die Checkbox "Bei Klick vergrößern" gesetzt, so rendert TYPO3 standardmäßig ein Javascript an den Link zum Bild und öffnet dieses in einen Popup. Da das nicht so schön ist und in meinen Augen auch nicht mehr zeitgemäß zeige ich jetzt, wie man dieses Verhalten ändert.
Dafür müsst ihr, je nachdem ob ihr css_styled_content oder fluid_styled_content nutzt folgende Einstellungen im TypoScript einfügen:
# css_styled_content
tt_content.image.20.1.imageLinkWrap {
JSwindow = 0
crop >
height >
width >
directImageLink = 1
linkParams.ATagParams.dataWrap = class="lightbox-img" rel="lightbox[lb{field:uid}]"
}
# fluid_styled_content
lib.contentElement.settings.media.popup {
JSwindow = 0
crop >
height >
width >
directImageLink = 1
linkParams.ATagParams.dataWrap = class="lightbox-img" rel="lightbox[lb{field:uid}]"
}Habt ihr das TypoScript eingefügt, so wird jetzt ein direkter Link zum Bild generiert und die Klasse "lightbox-img" an den Link gerendert. Nun kann man seine Lightbox einbinden und das Javascript entsprechend anpassen.
Möchte man beispielsweise meine simpleLightbox verwenden, so fügt man einfach folgende Dinge hinzu:
page.includeCSS.sl = typo3conf/ext/ar_siteext/Resources/Public/Css/simplelightbox.min.css
page.includeJSFooter.sl = typo3conf/ext/ar_siteext/Resources/Public/Js/simplelightbox/dist/simple-lightbox.min.jsEin eurem Javascript dann noch folgendes hinzufügen:
// initialize lightbox with class
$('.lightbox-img').simpleLightbox();Das wars auch schon und ihr habt eine Javascript Lightbox eingebaut.
Kommentare
Es gibt noch keine Kommentare. Sei der Erste!
Hinterlasse einen Kommentar