Ein CSS funktioniert nicht beim Einfügen von Bildern

Hallo Norbert, ich verstehe wieder mal nicht so recht was genau du vor hast.

Zitat von Zetahufi

Wenn ich nun die beiden Bilder im Text als Bilder einfüge, sind die zwar da, aber das Hover funktioniert nicht.

Das könntest du mit folgendem Code recht einfach umsetzen. Dieser würde für alle Bilder im Projekt gelten die mit dem Widget Text eingefügt wurden.

<style>
.zpwText img {
transition: transform 0.2s;
}
.zpwText img:hover {
transform: scale(1.1, 1.1);
}
</style>

Möchtest du den Code nicht für alle Text-Widget im Projekt anwenden, hilft folgendes CSS.

Hierbei muss das entsprechende Widget die CSS-Klasse zoom erhalten.

<style>
.zoom img {
transition: transform 0.2s;
}
.zoom img:hover {
transform: scale(1.1, 1.1);
}
</style>

PS: In deinem geposteten Code hast du die CSS-Klasse dem "Verweis" vergeben. Wenn dieser auf die Bilder angewendet werden soll musst du diese Klasse dem "img tag" geben.

Hier müsstest du im Quelltext der Klasse "singleImage" deine Klasse hinzu fügen.

Aus:

<img title="[$=project.imageDescription(3076, 'plain')$]" class="singleImage" alt="[$=project.imageAltText(3076)$]" src="http://localhost:12885/get-file/C:%5C…1c4b65b0029.jpg">

Wird:

<img title="[$=project.imageDescription(3076, 'plain')$]" class="singleImage thumb" alt="[$=project.imageAltText(3076)$]" src="http://localhost:12885/get-file/C:%5C…1c4b65b0029.jpg">

Warum beschränken Sie sich nicht besser auf die Funktionalität, die Ihnen Zeta Producer von Haus aus bietet, statt sich mit kompliziertem Code immer neue Probleme auf Ihrer Website zu schaffen. In Zeta Producer können Sie ein Bild mittels dem "Bild"-Widget platzieren und im Widget die Funktion "Bei klick vergrößern" nutzen. Das bietet dann genau den Effekt, den Sie sich anscheinend hier wünschen.

Sie sollten so etwas wirklich nur selbst programmieren, wenn Sie ganz genau wissen, wie das geht, denn sonst schaffen Sie sich nur Probleme und wir haben dann den extrem hohen Support-Aufwand, die Quelle der Fehler zu ermitteln…

Hallo,

das war kein Unmut, sondern nur ein ehrlich gemeinter Tipp, wie Sie sich viel Ärger (den Sie sich ggf. selbst erschaffen) ersparen können. Wirklich.

Zitat von Zetahufi

Oder kann man das in ZP besser umsetzen?

Siehe Post 2 und Post 3 (Funktion "Bei klick vergrößern")

Zitat von Zetahufi

Hallole,

ich frage (mich und euch) immer noch, warum der Code der Seite (s. #4) zwar auf meiner alten Page funktioniert, aber in ZP nicht.

Alle meine Versuche sind ergebnislos verlaufen...

Da du nicht verraten hast WAS du GENAU WO eingebunden hast Kann das auch niemand beantworten. So wird das zum Ratespiel.

@Zetahufi Hallo, habe Deine "ausgediente" Website besucht und kann nicht wirklich erkennen, was mit dem dort eingesetzten Script möglich ist, was der ZP nicht bietet.

Ich würde daher dem gutgemeinten Vorschlag von Stefan S annehmen und mich nicht mit solchen "Problemen" aufhalten, das kostet nur Nerven. 😉

Der Code funktioniert nicht, weil er schlicht unvollständig ist. Der Code enthält weder CSS-Regeln noch JavaScript, welches einen Hover-Effekt auslösen würde. Auf der alten Seite ist also ganz sicher noch zusätzlicher Code vorhanden, der hier einfach fehlt. Zum Glück braucht man das ja auch nicht, weil das Bild-Widget diese Funktion ja bereits enthält. Können wir dieses Thema damit bitte abschließen?

Gedanken eines Mitlesers zur Bildvergrößerung,
ohne Gewähr nach bestem Wissen:

Früher gabe es eine Schaltfläche "Bei Klick vergrößern" zum anhaken.
Jetzt bietet "Bei Klick auf Bild" (ich vermute, das ist der verbesserte Ersatz der alten Schaltfläche) vier Auswahlmöglichkeiten.
Davon entspricht "Bild in Lightbox vergrößern" weitgehend der alten Funktion "Bei Klick vergrößern" und das funktioniert zumindest bei mir auch gut.

Generell vergrößert ZP keine Bilder (das steht irgendwo) um mehr als die Originalgröße, da sonst die Bilder pixelig werden (können).
Damit also die Funktion "Bild in Lightbox vergrößern" funktionieren kann, muss das Originalbild größer als das im 12er Gridsystem verkleinert dargestellte Bild sein.
Wenn das eingefügte Originalbild im Bild Widget zu klein ist, kann es also auch nicht größer "gezaubert" werden.

Wenn das Original im PC schon zu klein ist, dann müsste es mit einem Fotoprogramm vergrößert (und bearbeitet) werden bevor es im Bild-Widget eingefügt wird.

Falls ich mich dabei irre, lese ich gern die Korrektur.

@Zetahufi Hallo! Ich vermute, dass Walter mit seiner Annahme richtig liegt und das Ausgangsbild schlicht zu klein ist und daher auch pixelig angezeigt wird.

Wie lautet denn die URL der betreffenden Website und wie groß ist das von Dir verwendete Bild?

Kannst Du es hier vielleicht einmal unverändert bereitstellen?

Da liegt ein Irrtum vor. Die Inhaltsbreite ist von Layout abhängig und kann in vielen Fällen in den Layouteinstellungen angepasst werden.
Die so ausgewählte Inhaltsbreite für das Projekt wird über das Grid System in 12 gleich breite Teile aufgeteilt.
Jedes Widget, also auch das Bild-Widget, kann in x-12tel Breite zusammengeschoben werden. Bei einem Bild wird dabei die Höhe im gleichen Verhältnis zur Breite reduziert, also das Originalbild verkleinert in der Seite eingefügt. Das so verkleinerte Bild ist das was die Seitenbesucher zuerst sehen. Mit "bei Klick vergrößern" wird das Bild in Originalgröße eingeblendet, oder wenn die Originalgröße im Browserfenster bzw. dem Anzeigebereich nicht Platz hat, in der maximal verfügbaren Größe gezeigt.

Das funktioniert bei mir ohne irgendwelche verschlungenen Kunstgriffe mit dem ZP Standard Widget hervorragend.

Beispiel: http://www.mondseelandler.at/fahrrad-irrweg.html#a2063

Auch ein Hochkant Bild verkleinert sich, wenn Sie es per Grid schmaler ziehen.