Perfectlightbox in Verbindung mit ImageCarousel ohne Funktion

  • X.S X.S
    Typ im Roten Hemd
    0 x
    2 Beiträge
    0 Hilfreiche Beiträge
    08. 05. 2012, 12:34

    Hallo Zusammen,

    wahrscheinlich ist es nur eine Kleinigkeit die ich übersehe, aber da mich probieren und googlen bisher nicht weiter gebracht haben, hoffe ich Ihr könnt mir helfen.

    Ich nutze Typo 3 Version 4.5.10 (da der Server bisher noch kein php 5.3 bietet) mit PerfectLightbox 3.1.4 und ImageCarousel 1.9.4.

    Als erstes habe ich ImageCarousel installiert und das Template angepasst. Das läuft auch wunderbar.

    Dann habe ich PerfectLightbox installiert.

    Wenn ich nun im ImageCarousel "Klick vergrößern" aktiviere, und im Frontend auf ein Bild innerhalb des Carousels klicke, wird das Bild zwar vergrößert, allerdings ein einem neuen Fenster, und nicht wie gewünscht als lightbox.
    Auf der gleichen Seite habe ich auch Bild/Text elemente. Wenn ich dort "Klick vergrößern" aktiviere, funtkioniert die lightbox einwandfrei.

    Ich hoffe Ihr könnte mir helfen.

    Vielen Dank schonmal...

    XS

    P.S. Ich habe schon alle Javascript Librarys probiert.


  • 1
  • Julian.Hofmann Julian.Ho...
    Flash Gordon
    0 x
    2236 Beiträge
    17 Hilfreiche Beiträge
    08. 05. 2012, 17:47

    Hallo.

    Was hast Du bisher konfiguriert/eingestellt, dass das ImageCarousel auch irgendetwas von der Lightbox weiß? Laut Doku ist die Extension out-of-the-box mit nichts für eine Lightbox ausgestattet. Normalerweise hast Du für Lightboxes um die Thumbnails herum in Links oder als Parameter des IMG-Tags entsprechende Klassen, IDs odgl.

    Eine Suche brachte mir einen recht zielführend wirkenden Treffer auf Platz 1: http://typo3.cms-jack.ch/de/erweiterungen/imagecarousel/
    (Solltest Deinen Suchalgorithmus mal optimieren ;-) )

    Viele Grüße
    Julian

  • Julian.Hofmann Julian.Ho...
    Flash Gordon
    0 x
    2236 Beiträge
    17 Hilfreiche Beiträge
    08. 05. 2012, 17:59

    Ich leg nochmal nach, nachdem ich in Deinem anderen Posting gesehen habe, dass Du die Seite schon kennst:

    Befasse Dich einmal mit der Perfectlightbox, die Du in das Carousel integrieren möchtest. Dann wirst Du feststellen, dass
    - die Perfectlightbox im Gegensatz zur rzcolorbox die Konstanten rel[/i] bzw. [i]class nicht kennt => einfaches Ersetzen des Extension-Keys bringt nichts
    - Deine Änderung kein passendes HTML produziert

    Wie müsste denn ein Bild samt Link in HTML aussehen, damit er für die Perfectlightbox taugt? Und was müsstest Du folglich bei der Bild-/Linkgenerierung des Carousels ändern/einbauen?

  • X.S X.S
    Typ im Roten Hemd
    0 x
    2 Beiträge
    0 Hilfreiche Beiträge
    16. 05. 2012, 07:21

    Hallo Julian,

    vielen Dank für die fragende Antwort! Ich habe mich nochmal daran versucht, bin allerdings immer noch nicht am Ziel. Muß allerdings auch dazu sagen, dass ich ein typo3 newbee bin.

    Wenn ich es richtig sehe, muß für die PerfectLightbox im a-tag rel="lightbox" eingetragen sein.

    Ich habe also das snipplet folgender Maßen angepasst und in mein typo script kopiert:

    1. plugin.tx_imagecarousel_pi1 {
    2. carousel.normal.image {
    3. title.data = register:caption
    4. parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
    5. parameter.override.cObject.file.maxW = 800
    6. parameter.override.cObject.file.maxH = 600
    7. # ATagParams = class="{$plugin.rzcolorbox.rel}" rel="{$plugin.rzcolorbox.rel}"
    8. ATagParams = rel="lightbox"
    9. ATagParams.insertData = 1
    10. }
    11. }
    12. }
    13. }
    14.  
    15.  
    16. plugin.tx_imagecarousel_pi2 {
    17. carousel.normal.image {
    18. title.data = register:caption
    19. parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
    20. parameter.override.cObject.file.maxW = 800
    21. parameter.override.cObject.file.maxH = 600
    22. parameter.wrap = " | "
    23. # ATagParams = class="{$plugin.rzcolorbox.rel}" rel="{$plugin.rzcolorbox.rel}"
    24. ATagParams = rel="lightbox"
    25. ATagParams.insertData = 1
    26. }
    27. }
    28. }
    29. }

    Leider ohne Erfolg.

    Wenn ich mir den Quelltext der Seite ansehe, sieht die Integration des Image Carousels wie folgt aus:

    1. <div class="tx-imagecarousel-pi1">
    2. <div id="imagecarousel_c64-outer"><div id="imagecarousel_c64" class="jcarousel-skin-xs"><ul><li><a href="index.php?eID=tx_cms_showpic&amp;file=uploads%2Ftx_imagecarousel%2F3492_02.jpg&amp;md5=b68d748dce8fba44bc068f1c1242b718bb0c05cd&amp;parameters[0]=YTo0OntzOjU6IndpZHRoIjtzOjQ6IjgwMG0iO3M6NjoiaGVpZ2h0IjtzOjQ6IjYw&amp;parameters[1]=MG0iO3M6NzoiYm9keVRhZyI7czo0MToiPGJvZHkgc3R5bGU9Im1hcmdpbjowOyBi&amp;parameters[2]=YWNrZ3JvdW5kOiNmZmY7Ij4iO3M6NDoid3JhcCI7czozNzoiPGEgaHJlZj0iamF2&amp;parameters[3]=YXNjcmlwdDpjbG9zZSgpOyI%2BIHwgPC9hPiI7fQ%3D%3D" onclick="openPic('index.php?eID=tx_cms_showpic&amp;file=uploads%2Ftx_imagecarousel%2F3492_02.jpg&amp;md5=b68d748dce8fba44bc068f1c1242b718bb0c05cd&amp;parameters[0]=YTo0OntzOjU6IndpZHRoIjtzOjQ6IjgwMG0iO3M6NjoiaGVpZ2h0IjtzOjQ6IjYw&amp;parameters[1]=MG0iO3M6NzoiYm9keVRhZyI7czo0MToiPGJvZHkgc3R5bGU9Im1hcmdpbjowOyBi&amp;parameters[2]=YWNrZ3JvdW5kOiNmZmY7Ij4iO3M6NDoid3JhcCI7czozNzoiPGEgaHJlZj0iamF2&amp;parameters[3]=YXNjcmlwdDpjbG9zZSgpOyI%2BIHwgPC9hPiI7fQ%3D%3D','thePicture','width=600,height=600,status=0,menubar=0'); return false;" target="thePicture"><img src="typo3temp/pics/089038540d.jpg" width="150" height="80" border="0" class="captify" alt="" /></a></li></ul></div></div>
    3. </div>

    Da hier kein "rel" auftaucht, glaube ich, dass ich eine Fehler im Typoscript habe. Ich weiß allerdings absolut nicht welchen...

    Wäre schön, wenn Ihr mir nochmal helfen würdet

  • Neofine Neofine
    T3PO
    0 x
    15 Beiträge
    0 Hilfreiche Beiträge
    25. 09. 2013, 13:37

    Hallo, ich habe eine Lösung gefunden...
    versucht es mal damit

    1. plugin.tx_imagecarousel_pi1 {
    2. carousel.normal.image {
    3. title.data = register:caption
    4. parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
    5. parameter.override.cObject.file.maxW = 800
    6. parameter.override.cObject.file.maxH = 600
    7. ATagParams = rel="lightbox[lb{field:uid}]"
    8. ATagParams.insertData = 1
    9. }
    10. }
    11. }
    12. }
    13.  
    14. plugin.tx_imagecarousel_pi2 {
    15. carousel.normal.image {
    16. title.data = register:caption
    17. parameter.override.cObject.file.import.data = TSFE:lastImageInfo|origFile
    18. parameter.override.cObject.file.maxW = 800
    19. parameter.override.cObject.file.maxH = 600
    20. parameter.wrap = " | "
    21. ATagParams = rel="lightbox[lb{field:uid}]"
    22. ATagParams.insertData = 1
    23. }
    24. }
    25. }
    26. }

  • 1