Bild in Lightbox wird nicht gleich angezeigt

[wolle1975]

Hallo Community,

ich habe eben etwas bemerkt, dass mich wundert. Ich habe ein Bild mit Photoshop designt. Dieses Composing aus verschiedenen Bildelementen hat auch Text dabei. Es wir als transparentes PNG exportiert. Wenn man es in Contao auf der Seite einbindet, erscheint es auch so wie es soll. Man sieht auch den Text (schwarz). Klicke ich aber das Bild an, wird es in der Lightbox mit weißem Hintergrund angezeigt. Das ist auch ok so, aber die Schrift ist verschwunden. Wieso sieht man denn hier
die Schrift nicht mehr? Diese ist doch nach wie vor vorhanden als schwarze Pixel.

Kennt jemand das Phänomen?

Gruß Wolfgang

[Kahmoon]

Ich denke das die Transparenz das Problem ist im Kombination mit der Hintergrundfarbe der Lightbox. Muss es denn ein PNG mit Transparenz sein?

[wolle1975]

Hallo,

ja leider! Denn alles andere hätte einen Hintergrund und würde sich somit im Layout komplett beißen. Komisch ist nur, dass die Textebene eigentlich genau das gleiche ist, als die anderen Ebenen in Photoshop. Könnte mal hin gehen und die Textebenen rastern, bevor ich als PNG exportiere. Es ist ein PNG 24 Bit File. Könnte ggf. die 24 Bit die Ursache sein. Ich versuche mal, ob auch ein PNG 8 Bit gehen würde von der Transparenz her...

[wolle1975]

PNG 8 Bit geht leider auch nicht....

[mlweb]

Hast Du einen Link zu Seite?

[Kahmoon]

Transparenz ist Transparenz...egal ob 8 oder 16 Bit

Ich würde vermutlich einfach per CSS die hintergrundfarbe der Lightbox anpassen oder halt ein JPG verwenden.

[tab]

Probier doch mal, ob man mit einer anderen Schriftfarbe was sieht. Dann weiss man schon mal, ob es an der Farbe in Kombination mit den Transparenzen hängt oder ob ein anderes Problem vorliegt.

[mlweb]

Ich hab es gerade mal bei mir getestet.
Test in Contao 3.5.15 mit j_colorbox und j_tosrus
In beiden Lightboxen wird transparenter Text im png angezeigt.
Die j_colorbox blendet den Bildschirm transparent ab und legt eine weisse Fläche hinter das Bild.
j_tosrus blendet nur ab. Je nach Farbe der "Abblendung" und der eingesetzten Transparenz des Hintergrundes, gibt es bei diese Lightbox natürlich Unterschiede zum normalen Bild innerhalb des Textes. Das kann man dann nur eliminieren, wenn man die Lightbox ohne transparenten Hintergrund styled.
Welche Lightbox verwendest Du?

Nachtrag: Test mit unterschiedlichen Textfarben und Transparenzen des Textes in Kombination mit unterschiedlichen Farben und Transparenzen des Hintergrundes im png

[wolle1975]

ich benutze die ganz normale Lightbox, die bei 2.9.5 dabei war. Sind die beiden Erweiterungen auch noch zu 2.9.5 kompatibel?

[Kahmoon]

Ich glaube nichts ist mehr zu 2.9 kompatibel

[mlweb]

Damals war standardmäßig nur mootools dabei. Ich weiss allerdings nicht welche Lightbox damals dabei war moo-slimbox oder moo-mediabox oder so wie jetzt beide oder eventuell noch eine andere.
Ich habe meinen Test mal erweitert. Die moo-slimbox verhält sich standardmäßig wie die j-coolorbox (Ablenden des Bildschirms und weisse Fläche hinter dem png). Die moo-mediabox blendet ab und legt einen schwarzen Hintergrund hinter das Bild. Damit ist dann natürlich schwarze Schrift (egal ob transparent oder nicht) auf schwarzen transparenten Hintergrund nicht sichtbar. Den Hintergrund dieser Box kann man aber auch anpassen.
Stell uns doch mal einen Link zu Seite rein.

[mlweb]

ich benutze die ganz normale Lightbox, die bei 2.9.5 dabei war. Sind die beiden Erweiterungen auch noch zu 2.9.5 kompatibel?

j-tosrus ist eine Erweiterung. Da wird aber eigentlich nur das javascript elegant zur Verfügung gestellt. Könnte theoretisch vielleicht gehen, aber es ist jquery und man sollte jquery nicht mit mootools mischen.
Die j-colorbox ist inzwischen im core enthalten.
Ich glaube auch nicht, dass es an der Llightbox an sich liegt, sondern an dem für das png generierten Hintergrund.
Mal davon abgesehen, schon mal über ein Update nachgedacht? Ist ja doch schon ein recht betagtes Schätzchen.

[wolle1975]

ich habe die moo_mediabox.

Link kann ich leider nicht schicken.

[mlweb]

Vorrausgesetzt dort haben sich keine Klassen/IDs verändert.

#mbImage{
background-color: #fff;
color: #000;
}

Wenn Du damit schon mal Deine schwarze transparente Schrift siehst, musst Du nur noch #mbBottom und die diverse Farbe für die Beschriftungen anpassen.

[Andreas]

Ich vermute, dass Photoshop die Ebenen behält, wenn du als PNG exportierst. Benutze die Funktion "Für Web und Geräte speichern..." (CS3), damit bekommst du ein anständiges PNG mit einer Ebene, auch wenn deine PSD Ebenen enthält.

ps Zusätzlich kann es noch sein, dass die PNG- und damit auch die Transparenzunterstützung in 2.9 noch nicht so ausgereift war wie in 3.5.

[mlweb]

Ich vermute, dass Photoshop die Ebenen behält, wenn du als PNG exportierst.

Nein, Photoshop hat bei png m.E. nie Ebenen behalten, das hat nur Fireworks gemacht. In der aktuellen Version habe ich es auch noch mal getestet - ganz egal ob ich "speichern unter", "für Web speichern" oder das nur in neueren Versionen vorhandene "exportieren als" (ergänzt "für Web speichern") verwende - da gibt es keine Ebenen.

[Andreas]

Ok, dann müsste man dieses PNG mal sehen. Mach mal bitte eins, welches diese Probleme bereitet und zeige es uns.

[mlweb]

Ich denke es hängt mit dem Hintergrund zusammen den die Lightbox verwendet (siehe meine vorherigen Beiträge). Die moo-mediabox, die nach seinen Angaben verwendet wird, blendet ab und legt einen schwarzen Hintergrund hinter das Bild. Normal auf der Seite wo die Schrift im png nach seinen Angaben korrekt angezeigt wird, ist der Hintergrund weiss. Schwarz mit unterschiedlichen Transparenzen ist da sichtbar. Auf schwarzem Hintergrund ist dann aber alles schwarz, egal wie transparent es ist.