Jehu's kleine Welt

Lightbox-Effekte für die Klickvergrößerung bei Bildern sind schick und mittlerweile gelebte Praxis. Für TYPO3 gibt es einige Extensions, mit denen man Lightbox-Effekte nachrüsten kann. Jedoch muss man nicht unbedingt auf eine Extension zurückgreifen. Manchmal ist es auch gut, wenn man das per TypoScript löst, weil man dann die volle Kontrolle über das Rendering behält. Natürlich soll bei tt_news der gleiche Effekt bei Klickvergrößerung genutzt werden. Ich setze gerne Fancybox ein. So kann man das für normale Content-Elemente einbinden:

tt_content.image.20.1 {
    # Den Standard imageLinkWrap entfernen und einen eigenen basteln
    imageLinkWrap >
    imageLinkWrap = 1
    imageLinkWrap {

        # Linkwrapping bei aktivierter Klickvergrößerung oder einem gesetzten Link
        enable.field = image_zoom
        enable.ifEmpty.typolink.parameter.field = image_link
        enable.ifEmpty.typolink.parameter.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
        enable.ifEmpty.typolink.returnLast = url

        # Neuer wrapping Code
        typolink {
            target = {$styles.content.links.target}
            extTarget = {$styles.content.links.extTarget}

            # Link mit Pfad und Name zum Originalbild oder
            # Pfad und Name des umgerechneten lightbox Bild (wen maxH oder maxH erreicht ist)
            parameter.cObject = IMG_RESOURCE
            parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile
    
            # Ausnahme: wenn das linkfield nicht leer ist
            parameter.override.field = image_link
            parameter.override.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
            parameter.override.if.isTrue.field = image_link

            # rel-Attribut hinzufügen, für Galerie-Funktion (durchblättern)
            ATagParams = rel="gallery" title="{field:header}" class="lightbox"
            ATagParams.override = rel="gallery{field:uid}" title="{field:header}" class="lightbox"
            ATagParams.insertData = 1
            ATagParams.if.isTrue.field = image_zoom
        }
    }
}

Jetzt braucht man das auch noch für tt_news:

plugin.tt_news
[...]
    displaySingle { 
[...]
        image {
            file >
            file {
                height = 152
                width = 230c
            }
            imageLinkWrap {
                typolink{
                    parameter.data = TSFE:lastImageInfo|origFile
                    ATagParams = class="lightbox"  rel="fancyLightbox" 
                }
            }
        }
    }
 }  

Natürlich muss der JavScript Code und dass CSS der Lightbox auch eingebunden werden:

page {
    includeCSS {
[...]
        fancy = fileadmin/templates/styles/jquery.fancybox.css
        fancy.media = screen
    }
    includeJS {
        jquery = fileadmin/templates/js/jquery.js
        fancy = fileadmin/templates/js/jquery.fancybox-1.2.1.pack.js
        main = fileadmin/templates/js/main.js
    }
[...]
}

Abschließend muss z. B. in der Datei main.js noch das fancybox Plugin abgefeuert werden.

 
$(document).ready(function() {
      $("a.lightbox").fancybox(
      {
             'zoomSpeedIn': 300,
             'zoomSpeedOut': 300,
             'overlayShow': true
         }
     );
} 

In den meisten Fällen muss man noch die Pfade zu den den Grafiken der Lightbox im CSS anpassen. TYPO3 Cache löschen, und über den Lightbox Effekt freuen!