Thumbnails mit Schattierung

[oskopik]

hallo zusammen,

wie kann ich bei thumbnails eine schattierung einbauen, die beim full size view nicht sichtbar ist?

danke!

[Sebastian]

HI

wenn die Thumbnails immer gleich groß sind, könntest du per CSS ein Hintergrund-Bild einfügen, dass nur aus einem Schatten für eine weiße Fläche besteht. Das Thumbnail postionierst du dann so, dass es genau auf der weißen Fläche liegt.

Sebastian

[oskopik]

ist leider nicht immer die selbe grösse.

ist es möglich dass ich per lightbox effekt einfach ein anderes bild öffne?

also immer 2 bilder hab. ein kleines mit schatten und ein grosses ohne.

[Sebastian]

HI

das ist schon möglich, aber dann müsstest du die Thumbnails ja immers selbst erzeugen und einen Schatten hinzufügen.

Du kannst auch per CSS Schatten für unterschiedliche Grafiken definieren, untern Umständen musst du aber das Template stark verändern.

Das habe ich im alten Forum gefunden: https://contao.org/board/topic/9907.html (Lies auch Seite 2).

Sebastian

[oskopik]

ja ich werds mal so machen die thumbs mit schatten selber zu machen und dann mit dem grossen bild zu verlinken.

wie mache ich die verlinkung damit das grosse bild es so wie bei lightbox aufgeht?

[Sebastian]

HI

im Prinzip wird das aus dem Code gut ersichtlich, aber hier mal in Kurzform:

<a href="### Pfad zur Großansicht des Bildes###" title="### Bildunterschrift in der Großansicht ###" rel="lightbox[### Name der Lightbox ###]">
 <img src="### Pfad zum Thumbnail ###" alt="…" />
</a>

Sebastian

[aaronl]

Wenn der Schatten nicht zwingend in allen Browsern sichtbar sein soll, sondern dir auch Gecko (Firefox,...) und Webkit basierte Browser (Safari, Chrome, ....) reichen kannst du auch die CSS3 Eigenschaft box-shadow verwenden.
Siehe hier

Für Gecko musst du ein "-moz-" vorne anfügen und für Webkit ein "-webkit-"

[Sebastian]

HI

ich habe dazu auch in dem oben verlinkten Thema einen Beitrag geschrieben (Seite 2), wo auch ein Fallback für Browser ohne CSS3-Unterstützung dargestellt ist.

Sebastian