Fancybox mit TYPO3 4.5

04.02.2011

Fancybox mit TYPO3 4.5

Da mein Artikel "Fancybox in TYPO3 integrieren" doch immer wieder einige Besucher hat, möchte ich auf eine kleine Aktualisierung beim Update auf TYPO3 4.5.0 aufmerksam machen.

Das in meinem Artikel erwähnte TypoScript muss um zwei Zeilen ergänzt werden, ansonsten funktionieren Links auf Bilder (auch ohne Fancybox) unter TYPO3 4.5.0 nicht mehr. Der aktualisierte Code sieht nun wie folgt aus:


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
    enable.ifEmpty.typolink.parameter.listNum.splitChar = 10

    # 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
      parameter.override.listNum.splitChar = 10

      # 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
    }
  }
}

Fancybox unter TYPO3 4.5

Neu hinzugekommen sind die Zeilen 12 und 28. Fügt man diese ein, funktioniert wieder alles ohne Probleme. Kurz noch den TYPO3-Cache löschen und es kann schon weiter gehen.

7 Kommentare

Jacob

(am
22.06.2011
um
09:33
)

Danke für das praktische TS Schnipsel! Ein Nachtrag noch für Captions pro Bild:

ATagParams.postCObject = TEXT

ATagParams.postCObject{

field = imagecaption

stripHtml = 1

split.token.char = 10

split.token.if.isTrue = {$styles.content.imgtext.imageTextSplit}

split.returnKey.data = register : IMAGE_NUM_CURRENT

noTrimWrap = | title="|" |

}

Doris Ihlefeld

(am
01.09.2011
um
09:46
)

unter TYPO3.4.5kann man class und rel attribut der a Tags für Bilder bequem im Constant Editor konfigurieren.

TS Constants:

styles.content.imgtext.linkWrap.lightboxEnabled = 1

styles.content.imgtext.linkWrap.lightboxRelAttribute = gallery{field:uid}

styles.content.imgtext.linkWrap.lightboxCssClass = lightbox

Aufwändiges umbasteln des Linkwraps entfällt somit seit 4.5

Simon

(am
14.10.2011
um
11:05
)

Hallo,

gibt's auch eine Möglichkeit mit fancybox "inline content" in typo3 anzuzeigen?

Denn eigentlich müsste dazu ja dastehen:

Inhalt1

aber Typo3 macht automatisch daraus:

Inhalt1

Habt ihr eine Ahnung, wie man den Pfad wegkriegt? Hab schon einige Stunden im Netz gesucht, aber leider nichts gefunden.

Vielen Dank und liebe Grüße

Simon

Christoph Batik

(am
14.10.2011
um
18:38
)

Hallo Simon!

Um Inhalte als Inline Content anzeigen zu können, muss Du ja nur eine bestimmte CSS-Klasse für einen Link hinterlegen. Im JavaScript machst Du dann den Rest (siehe Fancybox Doku).

Christoph

Patrick Fiedorowicz

(am
12.12.2011
um
14:30
)

Hallo und vielen Dank für das Snippet, kann ich prima verwenden. FancyBox ist und bleibt für mich die schönste und performanteste Lightbox überhaupt...

Noch ein kleiner Hinweis zu den Bild-Captions: typolink hat ein eigenes Attribut namens "title", so kann man sich die cObjecte sparen. Folgende 2 Zeilen Code reichen dazu aus:

1: title.field = imagecaption // imagetitletext
2: title.split.token.char = 10

Schöne Grüße Patrick"

Andreas

(am
27.02.2012
um
12:09
)

Hallo, komme einfach nicht weiter, die Lightbox funktioniert prima, aber ich möchte auf klick ein ANDERES Bild in der Lightbox angezeigt haben wie das kleine im Text. Ich hab dazu die Bilder in der Linkbox verlinkt. Wie bekomme ich denn diese Links in die Lightbox?

jafederer

(am
19.11.2012
um
19:39
)

@fiedomedia hallo www.keynet.at/blog/story/fancybox-mit-typo3-4-5/

habe ich einen post gelesen zum thema fancybox und imagecaptioin -wo werden diese zeutlen eingefügt?

1: title.field = imagecaption // imagetitletext

2: title.split.token.char = 10

danke für den Hinweis. Jakob