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

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.

Zitat von zella.de

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]

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,

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.