bildergalerie mit rollover und link

[whitestone]

ich möchte folgendes realisieren: bildergalerie mit rollovereffekt -
allerdings sollte beim rollover kein 2. bild geladen werden, sondern das 1. nur "verschoben" werden und ich sollte die bilder verlinken können (keine lightbox sondern auf eine andere seite)

ähnlich wie bei http://www.hackgutlogistik.com/begehen.html
(allerdings habe ich es da mit einer definitionsliste umgesetzt)

https://contao.org/board/topic/7076.html?page=1 habe ich mir angeschaut. soweit ich verstanden habe wird da das bild ausgetauscht!?

hat irgendwer einen tipp für einen ansatz? ideal wäre auch noch eine bildergalerie nicht mit einer tabelle umgesetzt - aber da gibt es ja schon lösungen.

danke im vorhinein

[Andreas]

Dann willst du keine Galerie, sondern ein Menü mit Bildern und Hover- bzw. Rollover-Effekt.

Weise den Menüpunkten Hintergrundbilder per CSS zu und verändere die Position mit dem hover-Selektor.

[savi]

oder du probierst das hier

https://contao.org/erweiterungsliste...ion.19.de.html

ermöglicht Navigation mit Bildern so wie du dir es vorstellst ohne viele in den Code zu müssen.

[whitestone]

danke für die antworten

vielleicht dient das angehängte bild zum besseren verständnis - oder ich sehe vor lauter bäume den wald nicht.

eine solche "galerie" oder solches "menü" sollte für alle bereiche der subnavigation (alle projekte, marke, design, web) umgesetzt werden.
in "allen projekten" kommen natürlich auch die projekte der bereiche "marke", "design" und "web" vor.

ich habe keine idee, wie ich das umsetzen könnte. es sollte natürlich auch einfach im handling sein

danke für tipps

[whitestone]

ich glaub mir ist ein licht aufgegangen, ich bin gerade dabei das ganze zu testen.

danke für die tipps - ich werde dann bescheid geben, ob ich es eschafft habe

andi

[whitestone]

ich habe jetzt das ganze mit der grafischen navigation umgesetzt und funktioniert soweit eigentlich ganz gut

nur habe ich jetzt probleme mit der formatierung der listenelemente. und zwar beinhaltet die ganze navigation in etwa 30 listenelemente und in einer reihe sind 6 listenelemente. zwischen den listenelementen sollte ein abstand von 6px sein.
mit der klasse "first" und "last" habe ich zugriff auf eben das erste und letzte listenelement. gibt es eine möglichkeit - wie in meinem fall - auf das 7. listenelement zuzugreifen und zu formatieren? ansonsten bleibt mir nur die möglichkeit, für jede "reihe" ein eigenes navigations-modul zu erstellen.

danke für die tipps.

[Andreas]

Geht das nicht, das du die LI-Elemente einfach display:inline; formatierst, sodass sie nebeneinander erscheinen und wenn der Platz rechts nicht mehr reicht müssten sie doch in der nächsten Zeile fortgesetzt werden.

[whitestone]

danke für den hinweis - ja, das geht schon - ich habe es mit "float:left" gelöst.
problem ist aber, dass ich dazwischen gerne eine abstand von 6px hätte.

der container hat eine breite von 750px. die listenelemente eien breite von 120px, ergibt mal 6 eine gesamtbreite von 720px. 5 x 6px zwischenraum dann 30px - insgesamt also 750px.

wenn ich jetzt jedem listenelement einen margin von 6px gebe, dann habe ich eine breite von 756px.

eine möglichkeit wäre, für die betreffenden seiten den container eben auf diese 756px breite zu gehen, dass ursprüngliche erscheinungsbild mit einem margin-right von 6px wieder herzustellen.

oder gibt es sonst noch eine idee?

[whitestone]

ich habe gerade einen thread ausgegraben
https://community.contao.org/de/show...t=liste+klasse

könnte das mit der grafischen navigation auch funtkionieren?

danke

[whitestone]

ich habe nun einmal hinbekommen, vielleicht kann es jemand anderer auch brauchen. zu jedem listenpunkt wird eine eigene klasse hinzugefügt mit fortlaufender numerierung, wie im geposteten link im vorigem beitrag

<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>

<?php endif; ?>
<<?php echo $this->tag; ?>>
<?php $i=0; ?>
<?php foreach ($this->items as $item): ?>
    <?php $item['class'].=' counter_'.$i++; ?>
  <li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><?php echo $item['content']; ?></li>
<?php endforeach; ?>
</<?php echo $this->tag; ?>>

</div>