[GELÖST] Typo3 8.7.9 mit Mask 3.0.2 und ns_all_lightbox 2.0.1

[LaKiKat]

Hallo zusammen,

ich bin sehr glücklicher Besitzer der Videotrainings für Typo3 8 LTS und damit nun auch schon fast durch. @Wolfgang: SUPER JOB!

Hierbei bin ich aber leider an einen Punkt gelangt, an dem ich nicht weiterkomme und auch diverse Suchversuche zu den Themen: lightbox, ViewHelper, Fluidtemplates, etc. nicht wirklich weitergeholfen haben. Ich fürchte, es fehlt an Grundkenntnissen.

Ich habe in Mask ein Inhaltselement erstellt (eine Galerie):

Hier werden angezeigt

• Titel
  
• Bodytext
  
• Bilder
  

Nach 'Anhübschung' sieht der Code wie folgt aus:

Code:

<div class="card bg-light mb-3">
    <div class="card-header">
        <f:if condition="{data.header}">
        {data.header}
        </f:if>
    </div>
    <div class="card-body">
        <div class="card-text">
            <f:if condition="{data.bodytext}">
            <f:format.html parseFuncTSPath="lib.parseFunc_RTE">{data.bodytext}</f:format.html>
            </f:if>
        </div>    
    </div>
</div>    
<div class="border border-success">
<f:if condition="{data.image}">
<f:for each="{data.image}" as="file" >
 <f:image class="rounded-circle" image="{file}" alt="{file.alternative}" title="{file.title}" width="100" height="100" />
</f:for>
</f:if>
</div>

So weit genau das was ich mir vorgestellt habe. ABER ... ich benötige hier auch noch die Funktion 'auf das Bild klicken, Lightbox erscheint, man kann in der Lightbox die Bilder durchklicken'.

Tja und daran scheitert es nun.

Was habe ich bereits versucht:

1. rel="lightbox" in f:image einzufügen - Fehlermeldung 'Oops, an error occured'
   
2. dnyLink um f.image zu bauen und da rel=.... einzusetzten - Bilder werde nicht mehr angezeigt, keine Fehlermeldung
   
3. ein<a> Tag mit rel=.... oben einzubauen, um alles im <div> border border-success einzuklammern - Seite leer; ist ja aber auch ein scr und kein href Link, der da produziert wird
   

An dieser Stelle schreie ich nun um Hilfe. Eventuell sehe ich ja den Wald vor lauter Bäumen nicht?!?

Danke für Eure Zeit, das alles zu lesen und Euch damit zu befassen.

P.S. Ach ja, bin auch für Work-arounds zu haben, so es diese denn eventuell gibt.
Anbei die Ansicht der Galerie, nur die Lightbox Funktion ist einfach nicht da.

Kirsten

[chriwo]

Hallo Kirsten,

versuche es mal mit diesem Code für das Bild:

Code:

<f:if condition="{data.image}">
 <f:for each="{data.image}" as="file">
   <a href="{f:uri.image(image:{file})}" alt="{file.alternative}" title="{file.title}" class="KLASSE-LIGHTBOX" rel="REL-LIGHTBOX">
     <f:image class="rounded-circle" image="{file}" alt="{file.alternative}" title="{file.title}" width="100" height="100" />
   </a>
 </f:for>
</f:if>

KLASSE-LIGHTBOX muss du mit der CSS Klasse ersetzen, welche mit der Lightbox verknüpft ist. In den meisten Fällen ist dies "lightbox", aber kannst das im Konstanteneditor prüfen, wenn du nach "Lightbox CSS class" suchst.

REL-LIGHTBOX musst du auch ersetzen. Diese Info findest du auch im Konstanteneditor, wenn du nach "Lightbox rel="" attribute" suchst.

Viele Grüße
Christian

[LaKiKat]

Hallo Christian,

danke für Deine schnelle Antwort. Ich habe also meinen Code angepasst:

Code:

<div>
<f:if condition="{data.image}">
<f:for each="{data.image}" as="file" >
    <a href="{f:uri.image(image:{file})}" alt="{file.alternative}" title="{file.title}" class="lightbox" rel="lightbox[{field:uid}]">
        <f:image class="rounded-circle" image="{file}" alt="{file.alternative}" title="{file.title}" width="100" height="100" />
    </a>    
</f:for>
</f:if>
</div>

 
So sah mein Konstanteneditor aus (die Lightbox selber bietet keine Einstellungsmöglichkeiten ausser das man sich das Lightbox JS aussuchen kann  - gibt auch noch Fancybox, etc.

   

Danach sah des Inhaltselement im Frontend so aus:

   

Die Bilder liegen nun übereinander und wenn ich auf das eine Bild klicke, dann erscheint zwar eine Lightbox, die zegt aber nur eine Anmiation an, dass sie lädt, aber es passiert nichts.

Und nun?

Kirsten

[LaKiKat]

Hallo zusammen,

ich habe mir ein Work-around gebastelt. Title und Bodytext sind noch immer in dem neuen Mask Inhaltselement.
Die Galerie habe ich nun mit dem Standard Inhaltselement 'Nur Bilder' realisiert und diese per CSS an meine Bedürfnisse angepasst.

Trotzdem danke für Euche Unterstützung!

Kirsten

P. S. Hier einmal der aktuelle Zwischenstand angehängt

[chriwo]

Hallo Kirsten,

in meinem Code war ein kleiner Fehler drin, daher hier noch einmal eine Korrektur, dann sollte es bei dir klappen

Code:

<div>
  <f:if condition="{data.image}">
    <f:for each="{data.image}" as="file" >
     <a href="{f:uri.image(image:file)}" alt="{file.alternative}" title="{file.title}" class="lightbox" rel="lightbox[{field:uid}]">
       <f:image class="rounded-circle" image="{file}" alt="{file.alternative}" title="{file.title}" width="100" height="100" />
     </a>    
    </f:for>
  </f:if>
</div>

So sollte es jetzt eigentlich klappen.

Vg Christian

[LaKiKat]

Hallo Christian,

danke für Deine Lösung. Ich habe es nun so eingetragen und nun funktioniert die Lightbox. Allerdings wird nur das letzte Bild angezeigt und nicht alle Thumbnails und auch die Lightbox fängt mit dem letzten Bild an.

Hast Du dafür auch noch eine Idee?

Danke,

Kirsten

   

[chriwo]

Hallo Kirsten,

kannst du bitte einmal den vollständigen Code aus Mask und den daraus generierten HTML posten, vll. finden wir dann die Ursache.

vg Christian