Ein CSS funktioniert nicht beim Einfügen von Bildern

  • Hallo,


    ich will ein Thumb beim Hover größer darstellen, wie hier im Screenshot zu sehen.


    Das CSS habe ich unter Einstellungen - CSS deponiert, der HTML-Verweis <a href="#thumb"> stammt aus meiner funktionierenden Seite.


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


    <p style="text-align: left"><a href="#thumb"><img title="[$=project.imageDescription(3076, 'plain')$]" class="singleImage" alt="[$=project.imageAltText(3076)$]" src="http://localhost:12885/get-file/C:\Users\Nobbl\Documents\Zeta%20Producer%2014\Projects\Donnerhuf\content\media\images\b984a13a5ed643bcbde021c4b65b0029.jpg"></a><img title="[$=project.imageDescription(3077, 'plain')$]" class="singleImage" alt="[$=project.imageAltText(3077)$]" src="http://localhost:12885/get-file/C:\Users\Nobbl\Documents\Zeta%20Producer%2014\Projects\Donnerhuf\content\media\images\5f894e7a0e64446faed1028d1aa555fc.jpg"><br></p>


    Versuche ich, die Bilder per Objekt-ID einzbinden (ich habe sie importiert), erhalte ich die Fehlermeldung: Keine gültige Objekt ID.


    Jedenfalls bleiben die Bilder statisch nebeneinander stehen!


    Wo liegt da der Hase im Pfeffer, hat jemand eine Idee? Oder kann man das in ZP besser umsetzen?

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


    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.

    Code
    1. <style>
    2. .zpwText img {
    3. transition: transform 0.2s;
    4. }
    5. .zpwText img:hover {
    6. transform: scale(1.1, 1.1);
    7. }
    8. </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.

    Code
    1. <style>
    2. .zoom img {
    3. transition: transform 0.2s;
    4. }
    5. .zoom img:hover {
    6. transform: scale(1.1, 1.1);
    7. }
    8. </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:\Users\Nobbl\Documents\Zeta%20Producer%2014\Projects\Donnerhuf\content\media\images\b984a13a5ed643bcbde021c4b65b0029.jpg">


    Wird:

    <img title="[$=project.imageDescription(3076, 'plain')$]" class="singleImage thumb" alt="[$=project.imageAltText(3076)$]" src="http://localhost:12885/get-file/C:\Users\Nobbl\Documents\Zeta%20Producer%2014\Projects\Donnerhuf\content\media\images\b984a13a5ed643bcbde021c4b65b0029.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…

  • Guten Tag Stefan S,


    ich kann Ihren Unmut verstehen! Aber diese Codes habe ich vor vielen Jahren geschrieben (während einer Fortbildung), und sie funktionieren immer noch auf dieser inzwischen ausgedienten Seite.


    Deshalb wundere ich mich, warum es in ZP nicht klappt!


    Hier bekomme ich diesen Effekt nicht geboten, der mir so gut gefällt ;).


    Mario hat mich auf einen Fehler aufmerksam gemacht, der Klassenverweis muss wie folgt lauten:


    <a class="thumbnail" href="#thumb">


    Trotzdem funktioniert es nicht. Das CSS liegt unter Einstellungen - CSS, im HTML verweise ich auf die Klasse thumbnail.


    Möglicherweise hängt es damit zusammen, dass ich die Bilder (Thumb und großes Bild) auf die falsche Weise einfüge.

  • 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.

  • Oder kann man das in ZP besser umsetzen?

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


    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?

  • Bitte nur noch einige wenige Hinweise, weil ich die Funktion des Bild-Widgets nicht finde.


    Verwende ich das CSS von Mario, kann ich das große Bild nicht als Thumb auf der Seite skalieren; verwende ich ein kleines Bild, wird es beim Zoomen unscharf. Egal, wie ich das Bild einfüge: ob mit Widget "Bild" oder als Quelltext.


    Gebe ich im Widget "Quelltext" ein, was mir logischer erscheint (mit obigem CSS):

    <img src="oid://image/bildname-dsc00014" class="zoom" title="Bildname" width="96" height="72">

    ist das Thumb in der Vorschau zwar da, aber es wird nicht gezoomt.


    Füge ich per Widget "Bild" das kleine Foto ein und wähle "Klick-Adresse öffnen", habe ich das gleich Bild in einem neuen Fenster, aber logischerweise nicht vergrößert. Gleiches gilt für "in Lightbox öffnen". Die Funktion "Bei Klick vergrößern" habe ich nicht, s. Shot. Zumal ich auch da wohl das große Bild vorher auf der Seite kleiner skalieren müsste, sonst hat es ja keinen Sinn.

  • 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