Benutzer: Gast
Eintrag: Fluid: Bild mit Link zu Lightbox-Bild

Fluid: Bild mit Link zu Lightbox-Bild

von: marcel
Kreise: Typo3

Erstellt wird ein Bild, welches mit einem Link zum selben Bild umschlossen ist, um es in einer Lightbox zu öffnen. Das Lightbox-Bild wird auf eine maximale Größe berechnet.

Beispiel: Ein Original-Bild besitzt z.B. ein Pixelmaß von 1200 × 800, das Webseiten-Bild wird berechnet auf 100×67 und das Lightbox-Bild besitzt die maximale Größe von 600×400.

Fluid-Template

Code: XML XHTML XSLT HTML
<a href="{image.src -> f:cObject(typoscriptObjectPath:'imgResourceLightbox')}"
  class="photos_{gallery.uid}_lightbox"
  rel="photos_{gallery.uid}"
  target="_blank">
  <f:image src="{image.src}"
    alt="{image.alt}"
    width="100" />
</a>

TypoScript Setup

Code: TypoScript (TS)
# Get the URL to an image with defined max-sizes.
# Call in fluid: {pathToImageSource -> f:cObject(typoscriptObjectPath:'imgResourceLightbox')}
imgResourceLightbox = IMG_RESOURCE
imgResourceLightbox {
  file.import.current = 1
  file.maxW = 600
  file.maxH = 600
}

Anstatt dem TypoScript mit IMG_RESOURCE kann man auch einen ViewHelper nutzen, um das Lightbox-Bild zu erstellen:

Code: XML XHTML XSLT HTML
<a href="{f:uri.image(src:image.src, maxWidth:600, maxHeight:600)}"
  class="photos_{gallery.uid}_lightbox"
  rel="photos_{gallery.uid}"
  target="_blank">
  <f:image src="{image.src}"
    alt="{image.alt}"
    width="100" />
</a>
(1) Hendrik Der schrieb am 5. 6. 2013 um 18:01 Uhr
Whow, sehr guter Tip, habe mir an der lnline-Notation für's f:cObject fast die Zähne ausgebissen!