Idee zur Umsetzung: Detailanzeige

[Michael]

Hi

ich möchte eine Kaderliste realisieren. Dazu möchte ich auf einer Seite 3 Spalten anlagen und alle Spieler(ca. 25) so auflisten(siehe Bild unten).
Habe dazu den Artikel mit der Erweiterung subcolumns in 3-Spalten unterteilt.

Ich möchte jetzt, dass beim Anklicken eines Fotos die Details(Foto mit einigen Zeilen Text) des Spielers in Form einer Lightbox angezeigt werden.
Hat jemand eine Idee, wie man dies elegant einrichten kann?

Oder: Die Details des Spielers wird in einem Bereich zu oberst auf der Seite angezeigt und beim Klick auf ein anderes Foto, werden dessen Details angezeigt.

Meine bisherigen Ideen:
Mitglieder-Liste: Probleme: Avatar hat keine Lightbox; 3-spaltige Liste?

Besten Dank für einen Tipp!
Michael

[ChrMue]

Ich würde die einfache Mitgliederliste nehmen,
dann würde ich ein Tempolate bauen, das die Liste nicht als Tabelle sondern dreispaltig anzeigt. In der kannst du ganz einfach auch die Avatarbilder einbauen.
Bleibt noch die Detailansicht als Lightbox ...
Gruß ChrMue

[Andreas]

Du kannst auch die Galerie nehmen. Die Bildunterschrift kann HTML enthalten. Verwalten kannst du das mit dem MetaCreator. Wenn du die Bildunterschrift mit HTML-Code in das TITLE-Attribut des Slimbox-Links generierst siehst du die Bildunterschrift dann auch in der Großansicht.

Auch ein BE-Formular mit EFG und einer entsprechend angepassten FE-Auflistung wäre eine schöne Möglichkeit.

Andreas

[Michael]

Hi ChrMue und Andreas

vielen Dank für die Ideen. Werde sie gerade einmal ausprobieren und rückmelden!

Danke & Grüsse
Michael

[Michael]

Toll, die Umsetzung mit einer Bildgallerie und dem Meta-Creator funktioniert wunderbar! Vielen Dank für den Tipp!

Zwei Punkte kriege ich nicht hin:
1. Wenn ich die Maus auf ein Bild der Gallerie bewege erscheint im Titel des Links die Beschreibung im Meta.txt(siehe Anhang)

2. Kann man im MetaCreator keine Einträge duplizieren oder kopieren?

Grüsse
Michael

[Michael]

Habe mein Problem 1 hier: https://community.contao.org/de/show...8605#post18605
gefunden.

Somit bleibt noch Frage 2?

Grüsse Michael

[Andreas]

Zu Frage 2: Ja, das sieht so aus. Kannst mal ein Feature-Request an Felix Pfeiffer im MetaCreator Forum stellen.

Trotzdem nochmal zu Frage 1: Das ist Browserabhängig. Du hattest wahrscheinlich kein TITLE Attribut im IMG Element. FF zeigt den nämlich sonst an und nicht den TITLE vom umschließenden A Element. Da hab ich bei mir "zoom" reingeschrieben.

Andreas

[Michael]

Hi Andreas

wo kann ich das TITLE Attribut im IMG Element zuordnen? Im Metacreator?

Grüsse Michael

[Andreas]

Im Template ce_gallery_fullsize.tpl

[Michael]

In finde dort folgende Zeile:

<td class="<?php echo $col['class']; ?>" style="width:<?php echo $col['colWidth']; ?>;"><div class="image_container"<?php if ($col['margin']): ?> style="<?php echo $col['margin']; ?>"<?php endif; ?>><a href="<?php echo $col['href']; ?>" rel="lightbox[<?php echo $this->lightboxId; ?>]" title="<?php echo $col['alt']; ?>"><img src="<?php echo $col['src']; ?>"<?php echo $col['imgSize']; ?> alt="<?php echo $col['alt']; ?>" /></a><?php if ($col['caption']): ?><div class="caption"><?php echo $col['caption']; ?></div><?php endif; ?></div></td>

Was muss ich jetzt genau anpassen?
Wenn ich bei title=".. Zoom eingebe, hat die Lightbox dann auch keinen Metatext mehr.

Grüsse
Michael

[Andreas]

Ich hab's zur besseren Lesbarkeit mal eingerückt, ich hoffe du findest den TITLE. Ich hab übrigens ein Template für eine tabellenlose Gallery, falls das jemand brauchen kann.

 <td class="<?php echo $col['class']; ?>" style="width:<?php echo $col['colWidth']; ?>;">
  <div class="image_container"<?php if ($col['margin']): ?> style="<?php echo $col['margin']; ?>"<?php endif; ?>>
    <a href="<?php echo $col['href']; ?>" rel="lightbox[<?php echo $this->lightboxId; ?>]" title="<?php echo $col['alt']; ?>">
      <img src="<?php echo $col['src']; ?>"<?php echo $col['imgSize']; ?> title="zoom" alt="<?php echo $col['alt']; ?>" />
    </a><?php if ($col['caption']): ?>
    <div class="caption"><?php echo $col['caption']; ?>
    </div><?php endif; ?>
  </div>
</td>

Andreas

[Michael]

Hallo Andreas

besten Dank für deine genaue Beschreibung! Funktioniert super!
So macht TYPOlight einfach Spass!

Beste Grüsse
Michael

[Michael]

Wer sich noch für das Resultat interessiert:

http://www.fch.ch/index.php/kader.html

Vielen Dank an die Helfer im Forum!
Michael

[Andreas]

Ja, das sieht doch klasse aus. Wenn du möchtest, dass man in der Großansicht alle Bilder durchblättern kann, dann kannst du folgendes Codestück im Template ändern
// -
rel="lightbox-<?php echo $this->lightboxId; ?>"
// +
rel="lightbox-group"

Eigentlich müsstest du die Breitenaufteilung aber noch besser hinbekommen. Wenn du in den Einstellungen "Maximale Frontend-Breite" auf 595 stelltst und der Gallery im BE einen Abstand rechts und links von 10px mitgibst, dann müsste dir die Gallery eigentlich die optimalen Bildgrößen berechnen, so dass du rechts und links 10px Abstand und zwischen den Bildern dann 20px Abstand hast.

Andreas

[Michael]

Hi Andras

vielen Dank für deine Rückmeldung!
Habe deine Verbesserungsvorschläge schon eingebaut!

Beste Grüsse
Michael