Beiträge von Mario

Mario · 25. Februar 2023

Zitat von Ela

Hallo Mario,

ich schon wieder ...
Gibt es eine Möglichkeit dein Widget Reflect Slider die Bildanzahl zu erhöhen?
Das wäre eine sehr schöne Alternative zum Zeta Bilderalbum super wären 100

Wem willst du zumuten 100 Bilder durchzuklicken?

Bin mir auch nicht sicher ob ZP dabei zusammenbricht.

Kannst es aber probieren.

Sichere die widget.json und die standard-html.

Erweitere folgenden Code in der widget.json von 1-14 auf 1-100

Code

{
"initialHeight": 20,
"name": "line1",
"occupyLabelSpace": true,
"treatHeightAsPixel": true,
"type": "line",
"width": 380,
"defaultValue": null
},
{
"displayName": "Desktop",
"name": "desk-1",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Mobile",
"name": "mob-1",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Text",
"name": "text-1",
"type": "text-singleline",
"width": 248,
"defaultValue": null
},
{
"initialHeight": 6,
"name": "line2",
"occupyLabelSpace": true,
"treatHeightAsPixel": true,
"type": "line",
"width": 380,
"defaultValue": null
},
{
"displayName": "Desktop",
"name": "desk-2",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Mobile",
"name": "mob-2",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Text",
"name": "text-2",
"type": "text-singleline",
"width": 248,
"defaultValue": null
},
{
"initialHeight": 20,
"name": "line3",
"occupyLabelSpace": true,
"treatHeightAsPixel": true,
"type": "line",
"width": 380,
"defaultValue": null
},
{
"displayName": "Desktop",
"name": "desk-3",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Mobile",
"name": "mob-3",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Text",
"name": "text-3",
"type": "text-singleline",
"width": 248,
"defaultValue": null
},
{
"initialHeight": 20,
"name": "line4",
"occupyLabelSpace": true,
"treatHeightAsPixel": true,
"type": "line",
"width": 380,
"defaultValue": null
},
{
"displayName": "Desktop",
"name": "desk-4",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Mobile",
"name": "mob-4",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Text",
"name": "text-4",
"type": "text-singleline",
"width": 248,
"defaultValue": null
},
{
"initialHeight": 20,
"name": "line5",
"occupyLabelSpace": true,
"treatHeightAsPixel": true,
"type": "line",
"width": 380,
"defaultValue": null
},
{
"displayName": "Desktop",
"name": "desk-5",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Mobile",
"name": "mob-5",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Text",
"name": "text-5",
"type": "text-singleline",
"width": 248,
"defaultValue": null
},
{
"initialHeight": 20,
"name": "line6",
"occupyLabelSpace": true,
"treatHeightAsPixel": true,
"type": "line",
"width": 380,
"defaultValue": null
},
{
"displayName": "Desktop",
"name": "desk-6",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Mobile",
"name": "mob-6",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Text",
"name": "text-6",
"type": "text-singleline",
"width": 248,
"defaultValue": null
},
{
"initialHeight": 20,
"name": "line7",
"occupyLabelSpace": true,
"treatHeightAsPixel": true,
"type": "line",
"width": 380,
"defaultValue": null
},
{
"displayName": "Desktop",
"name": "desk-7",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Mobile",
"name": "mob-7",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Text",
"name": "text-7",
"type": "text-singleline",
"width": 248,
"defaultValue": null
},
{
"initialHeight": 20,
"name": "line8",
"occupyLabelSpace": true,
"treatHeightAsPixel": true,
"type": "line",
"width": 380,
"defaultValue": null
},
{
"displayName": "Desktop",
"name": "desk-8",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Mobile",
"name": "mob-8",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Text",
"name": "text-8",
"type": "text-singleline",
"width": 248,
"defaultValue": null
},
{
"initialHeight": 20,
"name": "line9",
"occupyLabelSpace": true,
"treatHeightAsPixel": true,
"type": "line",
"width": 380,
"defaultValue": null
},
{
"displayName": "Desktop",
"name": "desk-9",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Mobile",
"name": "mob-9",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Text",
"name": "text-9",
"type": "text-singleline",
"width": 248,
"defaultValue": null
},
{
"initialHeight": 20,
"name": "line10",
"occupyLabelSpace": true,
"treatHeightAsPixel": true,
"type": "line",
"width": 380,
"defaultValue": null
},
{
"displayName": "Desktop",
"name": "desk-10",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Mobile",
"name": "mob-10",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Text",
"name": "text-10",
"type": "text-singleline",
"width": 248,
"defaultValue": null
},
{
"initialHeight": 20,
"name": "line11",
"occupyLabelSpace": true,
"treatHeightAsPixel": true,
"type": "line",
"width": 380,
"defaultValue": null
},
{
"displayName": "Desktop",
"name": "desk-11",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Mobile",
"name": "mob-11",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Text",
"name": "text-11",
"type": "text-singleline",
"width": 248,
"defaultValue": null
},
{
"initialHeight": 20,
"name": "line12",
"occupyLabelSpace": true,
"treatHeightAsPixel": true,
"type": "line",
"width": 380,
"defaultValue": null
},
{
"displayName": "Desktop",
"name": "desk-12",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Mobile",
"name": "mob-12",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Text",
"name": "text-12",
"type": "text-singleline",
"width": 248,
"defaultValue": null
},
{
"initialHeight": 20,
"name": "line1",
"occupyLabelSpace": true,
"treatHeightAsPixel": true,
"type": "line",
"width": 380,
"defaultValue": null
},
{
"displayName": "Desktop",
"name": "desk-13",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Mobile",
"name": "mob-13",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Text",
"name": "text-13",
"type": "text-singleline",
"width": 248,
"defaultValue": null
},
{
"initialHeight": 20,
"name": "line14",
"occupyLabelSpace": true,
"treatHeightAsPixel": true,
"type": "line",
"width": 380,
"defaultValue": null
},
{
"displayName": "Desktop",
"name": "desk-14",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Mobile",
"name": "mob-14",
"type": "image-selection",
"width": 320,
"defaultValue": null
},
{
"displayName": "Text",
"name": "text-14",
"type": "text-singleline",
"width": 248,
"defaultValue": null
},

Alles anzeigen

Ändere in der standard-html die Zeile for ( var i = 1; i <= 14; i++){ in for ( var i = 1; i <= 100; i++){ .

Anschließend Extras > Entwickler > Änderungen übernehmen.

Mario · 25. Februar 2023

Ja, das kommt bald.

Mario · 24. Februar 2023

Zitat von mksteinmetz

Variante 1 funktioniert leider nicht, hier ändert sich bei mir nichts.

Das ist der Live-Vorschau auch nicht zu sehen. In der Browservorschau und online sollte es aber funktionieren. Vorausgesetzt du hast im Widget den Wert für den Z-Index "22000" nicht verringert.

Zitat von mksteinmetz

Variante 2 hat bedingt funktioniert, jetzt ist Zeile sichtbar, jedoch wurde alles etwas nach unten geschoben.

Genau dies sollte das CSS bewirken.

Mario · 24. Februar 2023

Da hast du 2 Möglichkeiten.

1. z-index anpassen.

- Öffne im Widget-Ordner die Dateien NORMAL.html und SCROLL.html mit einem Text-Editor.

- Ändere in den Dateien jeweils die Zeile:

headstyle += ' z-index:' + ZIndex + ';'; in headstyle += ' z-index:' + ZIndex + ' !important;';.

- In der NORMAL.html die Zeile 35 und in der SCROLL.html die Zeile 43.

- Speichern und in ZP Extras > Entwickler > Änderungen übernehmen

2. Verschiebe die Top-Bar entsprechend nach unten.

Einstellungen > CSS:

CSS

<style>
#topline {
top: 40px;
}
</style>

Anschließend kurz die Seite wechseln damit das CSS übernommen wird.

Mario · 23. Februar 2023

Ich nehme an du verwendest des Widget "WZP Image Map Zoom Generator V1.0" (Widget-Ordner: wzp-imgmap-poly-svg-generator). Dieses dient lediglich dazu die Koordinaten für die Polygone zu ermitteln, daher sicher auch die Verwirrung. Dieses Widget brauchst du aber nicht unbedingt weil ich dazu noch ein Online-Tool entwickelt habe LINK.

Das Widget zur Erstellung der Image Map ist das Widget "WZP Image-Map Poly SVG 1.0" (Widget-Ordner: wzp-image-map-poly-svg).

Mario · 23. Februar 2023

Naja, komplizierte Sachen brauchen halt etwas Einarbeitungszeit.

Eigentlich ist alles was man wissen muss in den Infotexten hinterlegt.

Wenn du Fragen hast kannst du diese natürlich hier stellen. dazu ist das Forum ja da.

Mario · 22. Februar 2023

Schick mal einen Link wenn online.

Mario · 22. Februar 2023

Am besten ist es immer wenn die Grafiken helle und dunkle Farben haben, somit sind diese auf hellen und dunklen Bildern zu erkennen.

Zitat von Ela

ja es ist als schwierig mit den Farben, ich habe nun nochmals 3 Dateien in grau. Wie entferne ich die Größenangeben bei den SVGs?

Mit einem Text-Editor öffnen und die Angaben height="512" und width="512" komplett entfernen, also nicht nur die Zahl, der Wert (512) ist nur ein Beispiel.

Mario · 22. Februar 2023

Wie schon in Beitrag #3 geschrieben solltest du die Größenangaben in den SVGs entfernen weil man diese sonst nicht mit CSS skalieren kann.

Ich hänge diese mal hier mit entfernten Größenangaben an. Aber wie gesagt, diese sind so ein´gentlich ungeeignet.

fancy.zip

Mario · 22. Februar 2023

Deine SVGs sind denkbar schlecht dafür geeignet weil sie ja bis auf den schwarzen Rahmen transparent sind.
Ich habe mal ein Beispiel mit den SVGs in "Campfire" hochgeladen mit extra hellen Bildern damit man das sehen kann. LINK (noch am hochladen)
Die Größenangaben in den SVGs habe vor dem Import entfernt weil man diese sonst nicht mit CSS skalieren kann.

Mario · 22. Februar 2023

Häng die verwendeten Grafiken Mal hier an und gib Bescheid welches Layout verwendet wird. Dann kann ich das Mal testen.

Mario · 21. Februar 2023

Zitat von DorJen

Ich musste es nur unter Info einbinden, damit keine Fehlermeldung mehr kommt:

Naja , keine Fehlermeldung mehr, aber das Widget kann so nicht funktionieren. Bitte lösche den Ordner "Info" wieder. Und lade das Widget nochmal neu herunter.

Bitte schau dir nochmal genau im Screenshot aus Beitrag #6 an.

Der Pfad muss den Ordner wzp-audioplayer-mini enthalten: Zeta Producer 16 > widgets > wzp-audioplayer-mini

Also nochmal:

Nach dem Download entpackst du die Zip-Datei
Darin befindet sich der Ordner wzp-audioplayer-mini.
Diesen Ordner wzp-audioplayer-mini kopierst du in den Ordner widgets. Nicht nur dessen Inhalt sondern den gesamten Ordner.

Mario · 20. Februar 2023

?

Mario · 20. Februar 2023

Hier ein weiteres Beispiel. LINK

Hier habe ich 3 einzelne SVG-Grafiken genutzt.

Diese dann wie oben beschrieben über Ojekt-ID eingefügt.

Somit lassen sich auch größere Grafiken einbinden und anders positionieren. Im Beispiel 60px und in Mobile 40px.

Nutze am besten SVGs ohne Größenangaben, diese werden ja im CSS vergeben.

CSS

<style>
#fancybox-left-ico {
background-image: url(oid://image/arrow-leftx);
background-position: 0 0;
}
#fancybox-right-ico {
background-image: url(oid://image/arrow-rightx);
background-position: 0 0;
}
#fancybox-left-ico, #fancybox-right-ico {
width: 60px;
height: 60px;
margin-top: -30px;
}
#fancybox-close {
top: 10px;
right: 10px;
width: 60px;
height: 60px;
background: none;
background-image: url(oid://image/closexxx);
}


@media (max-width: 780px) {
#fancybox-left-ico, #fancybox-right-ico {
width: 40px;
height: 40px;
margin-top: -20px;
}
#fancybox-close {
top: -20px;
right: -20px;
width: 40px;
height: 40px;
}}
</style>

Alles anzeigen

Mario · 20. Februar 2023

Ja das stimmt, die Fancybox von ZP ist schon ziemlich altbacken, lässt sich aber recht einfach anpassen.

Unten findest du die originale PNG-Grafik welche hier verwendet wird.
Passe diese nach deinen Bedürfnissen an.
Importiere diese in ZP (Erweitert > Bilder).
Vorsichtshalber Bild schützen (Eigenschaften > Weiteres ...).

Einsellungen > CSS:

CSS

<style>
#fancybox-close, #fancybox-left-ico, #fancybox-right-ico {
background-image: url(oid://image/icons);
}
</style>

Kopiere in der Bildverwaltung die Objekt-ID deiner Grafik und tausche diese im CSS mit oid://image/icons aus.

Ein Beispiel-Bild im Anhang, und hier der Test damit. LINK

Mario · 16. Februar 2023

Hallo Uwe,

Nextcloud kenne ich leider nicht und weiß auch nicht warum Firefox den iFrame dazu nicht anzeigt. (als unsicher einstuft), bei mir werden alle IFrames zu normalen Seiten auch im FF angezeigt.

Eventuell kannst du mal das Widget Extern Fancybox testen. Wird aber vermutlich dann ebenso nicht funktionieren weil hier indirekt auch iFrame genutzt wird.

Mario · 16. Februar 2023

Irgendwie sieht der Inhalt immer noch nicht richtig aus. Da fehlt der Ordner "Info" in welcher sich die PDF und die Textdatei befinden sollten. Das ist aber für die korrekte Funktion nicht von belang.

Aber, jetzt habe ich deinen Fehler wohl erkannt.

Du musst nicht den Inhalt des Ordners wzp-audioplayer-mini in den Ordner Widgets kopieren, sondern den kompletten Ordner wzp-audioplayer-mini.

Also nochmal löschen und den ganzen Ordner rein kopieren.

Mario · 16. Februar 2023

Da ist irgend etwas schief gelaufen. Die Ordnerstruktur sollte eigentlich anders aussehen. Hatte ich jetzt schon 2 oder 3 mal das beim Down- oder Upload etwas nicht passte.

Ich habe nochmal neu hochgeladen. Bitte den Ordner wzp-audioplayer-mini löschen und neu downloaden > Installieren.

Mario · 16. Februar 2023

Ja, ist auch mit Vorsicht zu genießen. Wenn du da zum Beispiel ein vorhandenes Attribut änderst und dieses später Global änderst werden hier die Änderungen nicht für diese Seite übernommen. Deshalb nutze ich für CSS Global immer "additional meta" was das gleiche wie Einstellungen-CSS ist. Und für seitenspezifisches CSS mobile_script.

Mario · 15. Februar 2023

Genau das ist auch die bessere Wahl.

Dazu ist auch ein Widget geplant um die Sprachen im sichtbarer im Kopfbereich zu verlinken.

Beiträge von Mario

Urlaub

reflect Slider

Produkt Card 2

Widget Top-Bar liegt unter Navigation bei Layout Top-Responsive

Widget Top-Bar liegt unter Navigation bei Layout Top-Responsive

Image-Map Poly SVG

Image-Map Poly SVG

Bilderalbum von Zeta

Bilderalbum von Zeta

Bilderalbum von Zeta

Bilderalbum von Zeta

Bilderalbum von Zeta

Widget "Audioplayer Mini"

Widget "Audioplayer Mini"

Bilderalbum von Zeta

Bilderalbum von Zeta

CalDav-Terminliste aus Nextcloud

Widget "Audioplayer Mini"

Widget "Audioplayer Mini"

Unterschiedliche Seitengröße / Visitenkarte -Website

Widget Top Bar mit Widget Translate Flag verschwindet, wenn ein Artikel angeklickt wird