Hover Effekte für ZP 12.5 (Beta Version)

  • Hallo,


    wie in einem anderen Thread angekündigt, habe ich versucht, dies einmal als Widget umzusetzen.
    Vom Grundsatz her funktioniert es - allerdings mit Einschränkungen, deren Ursache ich noch nicht auf den Grund gekommen bin.
    Näheres dazu in der Beschreibung.


    Hinweis: Die mitgelieferten .css Dateien stammen nicht (!!!) von mir, sondern von Codrops !!


    Widget: Hover (Grafik) Effekte für ZP 12.5 Beta Version (Und nur für diese Version !!!!!) - Widget-Version 0.1 Beta


    Features:

    • 8 verschiedene Hover Effekte für (Vorschau) Grafiken
    • Hover Überschrift festlegbar
    • Hover Beschreibung festlegbar
    • Hover Link festlegbar
    • Hover Link Beschreibung festlegbar

    Install Hinweis:

    • Download des .zip File
    • Entpacken des .zip File
    • Kopieren des Verzeichnisordners "hover"" samt Inhalt in das Widget Verzeichnis der Zeta Producer 12.5 Betaversion

    Nach Programmaufruf sollte das Widget unter der Kategorie "Text & Bild", Unterkategorie "Favoriten" angezeigt werden.


    Bekannte Fehler:

    • Übergroße Bilder werden nur bei responsive Layouts korrekt dargestellt..... Warum ?????
    • Im Bearbeitungsmodus wird der Rahmen nur länglich dargestellt - also nicht über das komplette Bild (Widget) selbst ....... ???????

    Sonstiges:

    • Benützt ihr Grafiken die von vornherein eine Größe von 300x200 px haben, wird alles korrekt, auch in nicht responsive Layouts dargestellt.


    Also, ihr seht, da tun sich auch für mich noch ein paar Fragen auf, die ich im Moment nicht zu lösen/beantworten weiss. Vieleicht habt ihr eine Idee.....


    Viel Spass beim Probieren ......

  • :thumbsup: wieder eine super Arbeit von dir.
    Ich hatte ja auch vor mich als Beta-Tester zu en­ga­gie­ren. Habe aber leider noch nicht die Zeit gefunden mich damit intensiver zu befassen. Braucht ja etwas Einarbeitungszeit.


    Ich habe mal eine Seite mit allen Stiles veröffentlicht. HIER
    Was mir aufgefallen ist, bei einem Format von 300x200 Pixeln wird unten der Rahmen abgeschnitten. Wenn ich ein Bild von 300x295 Pixeln verwende passt es (ganz unten letztes Bild).


    Was dein nächstes Update bringen kann wäre Farben auswählen zu können. Kann mir aber vorstellen das sich dies als ziemlich kompliziert gestalten kann. (Schriftfarbe Text, Butten und Überschrift, Hintergrundfarbe Bild, Butten, Überschrift).

  • Hallo Mario,


    vielen Dank für Deine Rückmeldung.
    Die verschiedenen ZP Layouts scheinen die css Files unterschiedlich zu interpetieren, so zumindest mein Eindruck. Wie man dies noch etwas flexibeler gestalten könnte, weiss ich eben noch nicht.


    Die Farbstile sind ja jeweils in den css Files hinterlegt. Hatte ich auch schon dran gedacht, weiss aber nicht wie man über Widgetfelder und deren Variablen auf .css Dateien zugreifen kann. Vieleicht hat ja der ZP Support für diesen Bereich einen Tip für mich.


    Auch ist das Widget optisch noch nicht aufbereitet. Also da wird auf jeden Fall noch was passieren.

  • Was dein nächstes Update bringen kann wäre Farben auswählen zu können. Kann mir aber vorstellen das sich dies als ziemlich kompliziert gestalten kann. (Schriftfarbe Text, Butten und Überschrift, Hintergrundfarbe Bild, Butten, Überschrift).


    Ich denke, ich konnte das folgendermaßen lösen:


    Die entsprechende css. Dateien bestehen ja grundsätzlich aus zwei Einheiten. Den globalen Elementen, gültig für alle Stile und den einzelnen Hover Effekten. Ich habe den css Bereich für die globalen Elemente in den .html Bereich ausgelagert und lediglich den css Bereich für die Hover Stile eigentändig belassen.


    So lassen sich auch Feldvariablen hinzufügen um die gewünschten Elemente über das Widget zu steuern. Update dafür sowie kleinere Änderungen kommt die nächsten Tage. ;)

  • Hallo,


    das Widget Hover Bild Effekte hab ich nun noch einmal völlig überarbeitet und ich hoffe, es läuft bei euch (wer immer es auch testen mag) zufrieden stellend.
    Die Änderungen/Ergänzungen werden unter Features beschrieben. ein Screenshot der Widget Oberfläche ist angehängt.


    Hinweis: Die mitgelieferten .css Dateien stammen nicht (!!!) von mir, sondern von Codrops !!


    Widget: Update: Hover Bild Effekte für ZP 12.5 Beta Version (Und nur für diese Version !!!!!) - Widget-Version 0.2 Beta vom 28.11.2014 (Version 0.1 aus dem ersten Post wurde gelöscht)


    Features:

    • 8 verschiedene Hover Effekte für (Vorschau) Grafiken
    • Widget Layout angepasst (Neu)
    • Bildgröße anpassbar (Neu)
    • Rahmenstärke festlegbar (Neu)
    • Diverse Text und Hintergrundfarben festlegbar (Neu)
    • Hintergrundgrafik festlegbar (Optional) (Neu)
    • Fehlermeldungen bei Fehlen grundlegender Eintragungen (Neu)
    • Infotexte (Neu)
    • Hover Überschrift festlegbar
    • Hover Beschreibung festlegbar
    • Hover Link festlegbar
    • Hover Link Beschreibung festlegbar

    Install Hinweis:

    • Download des .zip File - hover(2)
    • Entpacken des .zip File - hover(2)
    • Kopieren des Verzeichnisordners "hover2" samt Inhalt in das Widget Verzeichnis der Zeta Producer 12.5 Betaversion

    Nach Programmaufruf sollte das Widget unter der Kategorie "Text & Bild", Unterkategorie "Favoriten" angezeigt werden.


    Bekannte Fehler:

    • Übergroße Bilder werden nur bei responsive Layouts korrekt dargestellt..... Warum ????? (Gelöst)
    • Im Bearbeitungsmodus wird der Rahmen bei einigen ZP Layouts nur länglich dargestellt - also nicht über das komplette Bild (Widget) selbst ....... ???????

    Sonstiges:

    • Das Widget sollte nun auch in nicht responsive Layouts funktionieren.
    • Darstellungsprobleme können bei verschiedenen Layouts ggf. über die Steuerung der Höhe und Breite des Bildes vermieden werden.

    Viel Spass beim Probieren ...... ( ..... und über eine Rückmeldung, ausser von Mario, würde ich mich freuen.)


    [Dateianhang gelöscht von ThM]

  • Thomas : Saugeil!


    Gawainos : Du kannst ganz einfach im Verzeichnis "C:\Users\*Benutzername*\Documents\Zeta Producer 12.5 beta" einen Ordner "widgets" anlegen. Hier kannst Du dann den Ordner von Thomas reinkopieren. Das Widget ist dann für alle Deine Projekte verwendbar. Alternativ kannst Du den Ordner "widgets" auch direkt im Projektordner erstellen (C:\Users\*Benutzername*\Documents\Zeta Producer 12.5 beta\Projects\*Projektname*). Alle dort enthaltenen Widgets sind dann nur für dieses Projekt verwendbar.

  • Hallo,


    ich habe noch mal etwas getüfftelt, aber noch keine rechte Lösung für die nachfolgenden Anmerkungen zu diesem Widegt gefunden.

    • Solltet ihr mehrere Bilder mit verschiedenen Styles auf ein und derselben Seite nutzen wollen, so stellt erst alle Bilder ein und ändert erst DANN ggf. die Farboptionen. Diese Änderungen werden dann für ALLE Bilder auf der Seite so übernommen. Macht ihr das anders, z. Bsp. Erstellen von Bild 1 - Änderung der Farben pp. und nehmt dann Bild 2 und ändert die Farbwerte für Bild 2, so werden diese neuen Farbwerte auch für Bild 1 übernommen.

    Das ist ein bisserl blöd, da ich ursprünglich beabsichtigt hatte, jedem Bild seine individuellen Werte zuzuordnen. Kann aber so nicht gehen, da ja immer auf die css Daten in der standard html. zugegriffen wird. Das Überschreiben ist somit plausibel. Auch das hinzufügen einer Templateauswahl brachte noch nicht den gewünschten Erfolg. Ich hoffe, dass ich hier noch eine Lösung finde, kann es aber nicht versprechen.


    Genauso verhält es sich, warum das Widget im Bearbeitungsmodus nicht komplett umrahmt wird, sondern teilweise nur ein längliches Feld für den Bearbeitungsmodus oberhalb des eigentlichen Bildes darstellt. Keine Ahnung ? Wenn mir zumindest diese Frage das Supportteam beantworten könnte, wäre das natürlich super, auch im Hinblick auf die Erstellung weiterer Widgets.

  • Hallo,


    Sehr gutes Widget...


    Ich habe nur noch 2 kleine Fragen: Wie bekomme ich den angedeuten Button weg, der auf einen Link verweisen soll? Ich möchte dieses Button und den Verweis auf dem Bild nicht.


    Und wie bekomme ich den Text in eine andere Zeile? Im Moment schreibt das System automatisch alles hintereinander weg. Name und Tel sollen aber in unterschiedliche Zeilen...


    Vielen Dank im Voraus für ihre Hilfe


    LG Jenny

  • Hallo,


    um das ändern, müsstest Du dann selbst "Hand anlegen" und das entsprechend anpassen. Es ist nicht möglich alle möglichen Userwünsche individuell zu berücksichtigen.