Dies ist eine alte Version des Dokuments!
Um zu funktionieren, benötigt der Link zur Großansicht die CSS-Klasse und das rel-Attribut fancybox. Wenn beim rel-Attribut zusätzlich die UID des Inhaltselements ausgegeben wird, kann bei mehreren Bildern innerhalb deselben navigiert werden.
Constants:
# Inhaltselemente: rel und class für Fancybox styles.content.imgtext.linkWrap { lightboxEnabled = 1 lightboxCssClass = fancybox lightboxRelAttribute = fancybox{field:uid} }
Setup:
# Anpassung sk_fancybox - page.1000 ist von Powermail belegt: page { 1001 < plugin.tx_skfancybox includeJSFooterlibs.powermailJQuery > includeJSFooterlibs.powermailJQueryUi > }
Um FancyBox auch innerhalb der News zu verwenden, muss die Klasse im Fluid-Partial (FalMediaImage.html) hinzugefügt werden. Das rel-Attribut kann entweder manuell dort oder aber über TypoScript gesetzt werden.
TypoScript:
plugin.tx_news.settings.detail.media.image.lightbox = fancybox
Fluid Partial (FalMediaImage.html):
<div class="mediaelement mediaelement-image"> <f:if condition="{settings.detail.media.image.lightbox}"> <f:then> <a class="fancybox" rel="{settings.detail.media.image.lightbox}" title="{mediaElement.caption}" href="{f:uri.image(src:'{mediaElement.uid}' treatIdAsReference:1 maxWidth:'800')}"> <f:image src="{mediaElement.uid}" treatIdAsReference="1" title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}" maxWidth="{settings.detail.media.image.maxWidth}" maxHeight="{settings.detail.media.image.maxHeight}" /> </a> [...]
