Beiträge von Mario

Mario

Wenn du ZP15 nutzt schau mal unter Extras > Papierkorb.

Mario

Da bleibt wohl nur eine entsprechende Tabelle manuell zu erstellen, wäre aber bei der langen Tabelle sicher viel Fleißarbeit.

Ich habe HIER mal ein Beispiel hochgeladen.

Der Code dafür sieht folgendermaßen aus.

CSS

<style>
#musiktable_search {
background-image: url('oid://image/search2');
background-position:5px 5px;
background-repeat: no-repeat;
width: 300px;
font-size: 16px;
padding: 8px 12px 8px 30px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#musiktable {
border-collapse: collapse;
width: 100%;
font-size: 16px;
}
#musiktable th, #musiktable td {
text-align: left;
padding: 6px;
}
#musiktable tr {
background-color: #f2f2f2;
}
#musiktable tr:nth-child(even) {
background-color: #ffffff;
}
</style>

Alles anzeigen

HTML / JS

Code

<input type="text" id="musiktable_search" onkeyup="myFunction()" placeholder="Suche nach Titel" title="Suche Titel">


<div style="overflow-x:auto;">


<table id="musiktable">
<tr>
<th style="min-width:220px;">Titel</th>
<th style="min-width:220px;">Interpret</th>
<th style="min-width:200px;">Album</th>
<th style="width:50px;">Jahr</th>
</tr>
<tr>
<td>A Cowgirl bleibt a Cowgirl</td>
<td>Nicki</td>
<td>A Cowgirl bleibt a Cowgirl</td>
<td>1989</td>
</tr>
<tr>
<td>Ale Ale Aleksandra</td>
<td>G.G. Anderson</td>
<td>Alles wird gut</td>
<td>2019</td>
</tr>
<tr>
<td>Der Klang Deiner Stimme</td>
<td>Chanelle</td>
<td>Der Klang Deiner Stimme</td>
<td>2009</td>
</tr>
<tr>
<td>Du bist der Wahnsinn</td>
<td>Julian Haag</td>
<td>	Du bist der Wahnsinn</td>
<td>2020</td>
</tr>
<tr>
<td>Du hast ja Tränen in den Augen</td>
<td>Ramon Roselly</td>
<td>	Herzenssache</td>
<td>2020</td>
</tr>
<tr>
<td>Gänsehaut</td>
<td>SONIA LIEBING</td>
<td>Wunschlos glücklich</td>
<td>2019</td>
</tr>
<tr>
<td>Halt mich fest</td>
<td>David Blabensteiner</td>
<td>Schritt für Schritt</td>
<td>2019</td>
</tr>
</table>


</div>


<script>
function myFunction() {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("musiktable_search");
filter = input.value.toUpperCase();
table = document.getElementById("musiktable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>

Alles anzeigen

Mario

Hier nochmal Ausführlich.

Den Ordner C:\Users\Benutzername\Documents\Zeta Producer xx\Projects\Projektname\output mit zum Kiosk nehmen.
Im Kiosk dann im Ordner output die index.html öffnen.

Mario

Hier könnte die Berechtigung ausgeschaltet sein.

Schau mal ob der Haken gesetzt ist bei: Erweitert > Erweiterte Einstellungen > Optionen > Benutzer kann Layout wechseln und bearbeiten

Mario

Mit dem Widget "Nach Oben Type2" geht das.

Mario

Zitat von fragezzeichen

Kann man nun auch die "Beschreibung" im Widget "Text" nicht mehr direkt eingeben

Zitat von Stefan S

Was nicht ist, kann ja noch werden…

Zitat von fragezzeichen

Wenn nein, wo muss/kann man das in 15.4 eintragen?

In der Bildverwaltung: Erweitert > Bilder
Du kannst das Bild in der Bildverwaltung auch direkt im Text-Widget über das Bild aufrufen (Screenshot im Anhang).
Hier kannst du über Eigenschaften > Beschreibung den Title-Tag definieren.

Zitat von fragezzeichen

Wenn man Bilder mit dem Widget "Bilder" einbaut, wird die Beschreibung auch in 15.4 unter dem Bild angezeigt. Ich möchte aber, dass sie nur als title-Tag / Tool-Tipp angezeigt wird.

Du könntest das Projektübergreifend mit folgendem CSS abschalten. Funktioniert aber nicht mit den Optionen: "Klickadresse öffnen / Keine Aktion"

CSS

<style>
.imagedescription {
display: none !important;
}
</style>

Mario

Die von Thomas aufgezeigte Variante ist vollkommen korrekt. Das ganze geht aber mit Zeta Producer auch etwas komfortabler.

Wie unter Punkt 1 beschrieben die PDF-Datei importieren. "Erweitert > Dateien > Importieren"
Auf die importierte PDF-Datei "Rechtsklick > Mehr > Datei-Objekt-ID kopieren"
Den von Thomas geposteten Code einfügen und https://die-URL-Adresse-zu-deiner-PDF-Datei durch die kopierte "Datei-Objekt-ID" ersetzen. Diese sollte ungefähr so aussehen: oid://file/deine-pdf_pdf

Wie bereits von Thomas erwähnt ist PDF kein Standard, aber alle gängigen Browser werden diese anzeigen.

Bedeutet: Alle Browser werden die PDF anzeigen, allerdings wird das in den verschiedenen Browsern anders aussehen, worauf du keinen Einfluss nehmen kannst.

Mario

Zitat von ElaSch

... ich benötige einen Belegungskalender für ca. 30 Fewo.... Als Websitebesucher gebe ich z. B. das Datum 15.04. - 20.4.2021 ein und dann sollen die freien Wohnungen aufgelistet werden.
Der Belegungskalender soll auch von verschiedenen Ferienwohnungsvermietern für die eigene FeWo gepflegt werden.

Dazu brauchst du eine Buchungssoftware oder/und einen Chanelmanager, darüber kannst du die FEWOs auch automatisch in den großen Buchungsportalen einbinden.

Wenn es wirklich nur um Ferienwohnungen geht schau dir mal den FewoManager an.

Wir arbeiten mit HotMax (nicht mehr so ganz UpToDate) und mit CultBooking zusammen.

Mario

Ich bin die Layout-Einstellungen mal durchgegangen. Der fehlende Eintrag margin-bottom:; sollte in einem der folgenden Felder fehlen:

Kopfgrafik > Text > Abstzabstand
Inhaltsbereich > Text > Abstzabstand
Inhaltsbereich > Artikelabstand
Überschriften > Überschrift 1, 2 und 3 > Abstand unten
Banner > Text > Abstzabstand
Fußzeile > Text > Abstzabstand

Wenn hier der Abstand auf Null gesetzt werden soll musst du hier 0 eintragen, und als Einheit ganz oben das leere Feld über px wählen.

Mario

Ja, das sind diese. LINK

Mario

Im Moment ginge das so:

Die Icons verlinken, zB. über Einstellungen > CSS: <link href="https://fonts.googleapis.com/css2?family=Material+Icons"rel="stylesheet">
Im Texteditor auf "Quelltext-Ansicht" umschalten und an der gewünschten Stelle das Icon einfügen. zB: <span class="material-icons">face</span>
Wenn DU die "Quelltext-Ansicht" wieder ausschaltest kannst du die Größe und Farbe des Icon einfach über den Editor anpassen.

PS: Ich hatte auch mal ein Widget mit den "Material Icons" entworfen weil diese mir gefallen. Bin dann aber wieder zurück zu "Font Awesome" weil hier die Auswahl deutlich größer ist.

Mario

Bitte immer genau beschreiben worum es geht. Ich gehe mal davon aus das hier um das Widget "Tabellarische Daten" geht.

Im Widget unten Rechts auf das Zahnrad > HTML. Hier unter Zellen folgendes eingeben und entsprechend anpassen: style="border: 5px solid #ffffff"

Mario

Hallo Ela,

schau dir mal das Widget Openstreetmap an.

Mario

Alternativ kannst du auch das Widget Counter Animated verwenden. Der Text wird hier allerdings über oder unter dem Counter dargestellt.

Mario

Zitat von Jens2021

..... als auch eine Listenansicht (mit Vorschaubildern) auf einer Unterseite. Jeweils mit Sortier- und Filterfunktionen (Wie lange im Tierheim, Bundesland bzw. PLZ-Gebiet, Rüde/Hündin, Alter, Rasse, usw..). Bei Auswahl eines Tieres soll dann ein Profil zu dem jeweiligen Tier mit weiteren Bildern und Informationen zu öffnen sein....

Schau dir mal die Widgets Gallery Filter und Filter Button an. Diese Widgets könnte man eventuell auch so umbauen das Textartikel gefiltert werden. Allerdings kann man diese nicht unendlich erweitern was die Anzahl der Artikel angeht.

Hier wäre es sicher besser das ganze direkt als HTML, CSS und JS einzubinden, dann könnte man das ganze ins unendliche erweitern. Das habe HIER so gemacht.

Sofern also etwas Erfahrung in HTML vorhanden ist und diese Filterfunktionen ausreichend sind könnte ich dich darin gern unterstützen.

Mario

Ich hänge mich mal dran, fände diese Option auch super.

Zitat von Stefan S

Das hatten wir früher mal. Da haben wir aber die zusätzliche Komplexität dagegen abgewogen, wieviele Nutzer das benötigen und die Option mehrerer FTP-Server wieder entfernt.

Eine Möglichkeit die eventuell nicht so sehr komplex ist dafür nicht ganz so Nutzerfreundlich aber auf jeden Fall hilfreich wäre die FTP-Einstellungen eines Projektes auf einen klick kopieren zu können und diese in einem anderen Projekt ebenso einfügen zu können.

Mario

Daraus ergeben sich dann für Zeta Producer folgende Einstellungen.

Web Adresse: https://www.deine-domain.de

Servername: ssh.strato.de

Benutzername: deine-domain.de

Passwort: Dein Masterpasswort

Zielordner: /

Wenn der Test fehlschlägt unten auf "Mehr" und unter Anschluß "22" wählen.
Wenn der Test wieder fehlschlägt unter "Mehr" Modus "Aktiv" und "Passiv" testen.
Klappt das wieder nicht hier morgen nochmals an den Support wenden.

Mario

Zitat von Guido Lehmann

Ach ja, und müsste der Alt Text nicht bei Mouse Over angezeigt werden, oder wird das durch den Slider oder irgendetwas Anderes irgendwie unterbunden?

Bei "Mouse Over" wird in den Browsern Standardmäßig nicht der "Alt-Tag" sondern der "Title-Tag" angezeigt.
Als "Title-Tag" gibt Zeta Producer das aus was unter "Bildbeschreibung" eingetragen wurde.
Wie sich das beim Slider verhält kann ich auf anhieb nicht sagen, einfach testen.

Mario

Zitat von Steffen T.

Auf Seiten-Ebene das Attribut additional_meta löschen (Rechtsklick > löschen)

Sollte genau so funktionieren wie von Steffen beschrieben.

Nach dem löschen sollte das Attribut allerdings nicht leer sein sondern die Werte aus den Globalen Attribut sollten jetzt da drin stehen.

Mario

Da dies oft nicht verstanden wird möchte ich dies hier einmal erklären.

Wie die Attribute "Global" oder "Seitenspezifisch" eingebunden werden ist HIER sehr gut erklärt.
Wenn du also das Attribut additional_meta "Global" einbindest wird dieses auf allen Seiten in den HEAD geschrieben.
Öffnest du dieses Attribut additional_meta "Seitenpezifisch" ,änderst dieses und speicherst es wird diese Änderung für diese Seite übernommen.
Nimmst du jetzt Änderungen im Attribut additional_meta "Global" vor werden diese nicht für die Seite übernommen in welcher das Attribut geändert wurde.

Deshalb gehe ich immer folgendermaßen vor.

Für Code welcher auf allen Seiten in den HEAD geschrieben werden soll verwende ich das Attribut additional_meta.
Für Code welcher auf nur bestimmten Seiten in den HEAD geschrieben werden soll verwende ich das Attribut mobile_script.
Somit werden Änderungen welche ich später im Attribut additional_meta "Global" vornehme immer für alle Seiten übernommen.

Mario

mobile_script ist ebenfalls korrekt. Der Code steht dann lediglich ein paar Zeilen weiter unten im HEAD.

Mario

Alternativ dazu könnte man auch den SEITENTYP LEER wählen und das Widget SLIDING HAUPTMENÜ verwenden welches sich auch statisch einblenden lässt.

Mario

Der erste Container auf der Startseite (container_79) Ihr Fachanwalt für Straf-,... verhaut dir das Layout in der Mobilen Ansicht.

padding-left:150px; padding-right:150px; da bleibt dann nicht mehr viel Platz übrig.

Da sind mir noch mehrere Seiten aufgefallen auf denen scheinbar statische Tabellen das "Mobile Layout" verhauen.

Zum Beispiel: http://familie-reiter.eu/meisl1/rechtstipps.html

Am besten die Seite mal am Smartphone durchklicken.

Mario

Zitat von axelwestdoerp

Erst einmal HERZLICHEN DANK für Eure bisherigen Ideen.. Wie verhält sich das dann denn in der MOBILEN VERSION? Ob das dann wohl auch so funktioniert?
Macht es da wohl noch Sinn?

Worum genau geht es jetzt?

Im Widget "Info Line" werden die Abstände auf kleineren Bildschirmen verringert. Wenn der Platz dazu nicht mehr ausreicht werden die Bilder umgebrochen. Dazu wird das moderne CSS "Flexbox" angewandt.

Einfach mal diese Seite öffnen und das Browserfenster entsprechend verkleinern bzw. am Smartphone öffnen.

Mario

Ich habe mir das gerade nochmal durch den Kopf gehen lassen.

Es werden ja hier Teilbilder in einer Größe von ca. 256x256px erstellt, und das ganze in mehreren Auflösungen. Das habe ich mal überschlagen, da kämen bei deiner Bildgröße ca. 40.000.000 Bilder raus. Könnte mir vorstellen das da jedes Tool an seine Grenzen kommt.

Ich würde das Bild in mehrere Teile aufteilen und für jedes dieser Teile ein Zoom-Bild erstellen. Das ganze dann in einer Image-Map verlinken. Zu Beispiel mit diesem Widget. LINK

Mario

Ja liegt sicher an der Bildgröße. Ist ja auch wirklich riesig.

Hier ist eine Auflistung von Tools. LINK

Mario

Es gibt jetzt dazu auch ein Widget für Zeta Producer. Dieses verwendet ebenso wie Zoomify das Open Source JS von OpenSeadragon.

Es können Einzelbilder ebenso wie Gigapixel-Bilder eingebunden werden.
Die Einzelbilder werden einfach im Widget als Datei hinzugefügt. Damit die Bilder auch auf Smartphones angezeigt werden ist die Bildbreite hier auf "8192 Pixel" beschränkt.
Die Gigapixel-Bilder werden mit der Freeware "Deep Zoom Composer" von Microsoft in sehr viele Einzelbilder mit verschiedenen Auflösungen zerlegt und und damit die Performance von ZP durch die vielen Dateien nicht beeinträchtigt wird mit einem FTP-Programm auf den Server geladen. Anschließend muss nur der Pfad zu dem Bilder-Ordner angegeben werden.

Widget Zoom Bild

Mario

Ich habe jetzt das OpenSeadragon Tool auch mit Teilbildern getestet. BEISPIEL

Zuerst den "Deep Zoom Composer" von Microsoft heruntergeladen. LINK
Damit die Bilder zerpflückt, der erstellt über 600 Teilbilder in verschiedenen Auflösungen in 13 Ordnern.
Diese Bilderordner in einen Ordner auf den Server geladen. (Könnte man auch in ZP über "Dynamisch verknüpfte Ordner" einbinden. Hier ist aber wegen der vielen Dateien Geduld gefragt)
Da mir die Icons nicht gefallen habe ich diese Icons ebenfalls auf den Server geladen.
Anschließend unten stehenden Code über "Widget Quelltext" eingefügt.

HTML

<div id="meinpano_1" style="width: 930px; height: 430px;"></div>
    <script src='https://openseadragon.github.io/openseadragon/openseadragon.min.js'></script>

<script>
OpenSeadragon({
id:              "meinpano_1",
maxZoomLevel: 	10,
prefixUrl:       "https://www.widget-zp.de/test/test04/icons/",
tileSources:     {
"Image": {
"xmlns":    "https://schemas.microsoft.com/deepzoom/2008",
"Url":      "https://www.widget-zp.de/test/test04/teilbilder/",
"Format":   "jpg",
"Overlap":  "1",
"TileSize": "254",
"Size": {
"Width":  "7646",
"Height": "3525"
}
}
}
});
</script>

Alles anzeigen

Zeile 08 / der Ordner mit den Icons
Zeile 12 / der Ordner mit den Teilbildern
Zeile 15, 17 und 18 kannst du der XML-Datei entnehmen welche der "Deep Zoom Composer" mit ausgibt.

Mario

Ich habe da noch ein ansprechendes Open Source gefunden. OpenSeadragon
Das konnte ich auch problemlos einbinden. LINK

Allerdings bisher nur als Einzelbild, wie das mit den Teilbildern geht habe ich noch nicht ganz verstanden. Irgendwie muss man ja das Bild auch erst mal zerpflücken.

Mario

Komprimierung hat nicht unbedingt etwas mit dem Video-Format zu tun. MP4 ist schon das bevorzugte Format aller modernen Browser. Im Widget Video-Player kann man aus Kompatibilitätsgründen zusätzliche Formate für ältere Browser hinzufügen.

Ein Video dieser Größe würde ich keinesfalls über Zeta Producer einbinden. Ich würde das Video mit einem FTP-Programm auf den Server laden und dann extern mit dem "Widget Quelltext" einbinden.

Der Quelltext-Code würde dann so aussehen:

HTML

<video controls poster="">
<source src="https://www.widget-zp.de/media/files/joel-wolter-1280x720-5.2mb.mp4" type="video/mp4">
<div class="zpwarning">
<p lang="de">Ihr Browser kann die angegebene Filmdatei leider nicht abspielen, da er das Video-Element nicht unterstützt.</p>
<p lang="en">Your browser can't play the requested video file. The browser doesn't support the video element.</p>
</div>
</video>

Die URL zum Video musst du natürlich austauschen, Das Video wird dann erst in der Browservorschau richtig dargestellt.

Mario

Hier habe ich mal 3 Varianten zum testen eingebunden. LINK

Und hier das Layout "Poster Parallax Sport", eigentlich das gleiche wie oben beschrieben. LINK

Mario

Zitat von masch

Hallo,
Zeta hat aber auch eine Vorlage mit Parallel Effekt

Vermutlich ein Container mit Hintergrundbild Fixiert.

Über "Darstellung" dem Container ein Hintergrundbild zuweisen, dieses auf "Attach: Fix" setzen und wenn gewünscht auf Randlos.

Es gab aber glaube ich letztens einen Beitrag dazu das die Darstellung auf IOS nicht so recht klappt (verpixelt).

Ich werde die verschiedenen Varianten mal testen.

Mario

Naja die Frage war, wie bekommt man die Flaggen in die Navigation.

Mit der Sprachauswahl habe ich mich noch nicht beschäftigt und kann dazu leider auch nichts sagen.

Mario

Ich bin mir nicht ganz sicher was du meinst.

Das transparente Menü welches sich beim scrollen anpasst hatte ich hier mal gebastelt. LINK
Parallax-Container findest du hier als Widget. LINK
Oder hier mit fixiertem Hintergrund. LINK

Mario

Zitat von MichaelM

Ein Frage, wie bekommt man die Flaggen in die Navigation.

Das geht auch einfach indem du in den Seiteneigenschaften unter "Name" das Bild per HTML hinzufügst.

Einfach mal folgendes dort einfügen und sehen was passiert:

<img src="https://www.zella.de/media/images/fl-en.png" alt="Flagge"> Englisch

Wenn das deinen Wünschen entspricht kannst du die Bilder einfach über die OID-Adresse einfügen. Das ist hier gut erklärt: LINK

Der Code sieht dann ungefähr so aus:

<img src="oid://image/bildname"> Englisch

Mario

Die Pfade zum Bilderordner und der JS sind falsch.

Falls ich das Richtig verstehe liegen die Bilder ja in https://www.corsita.com/test/KohMak. Un die JS in https://www.corsita.com/test/

Wenn du alles über ZP machen möchtest müsstest du den Bilderordner über "Dynamisch verknüpfte Ordner" einbinden und den Pfad dazu in <script type="text/javascript"> Z.showImage("KohMakMap", "KohMak"); </script> anpassen. Die JS am besten über "Erweitert > Dateien" hinzufügen, Und diese im Pfad einfach über die OID-Adresse einbinden.

Was spricht dagegen das funktionierende einfach per "iFrame" einzubinden?

PS: Ich würde da eher von Abstand nehmen, der Funktionsumfang am Smartphone lässt zu wünschen übrig.

Mario

Wie Thomas schon schreibt müssen die Zeilennummern raus.

Außerdem ist noch zu erwähnen wenn man Code über "Einstellungen > CSS" eingibt dieser nicht sofort übernommen wird. Am besten anschließend auf eine andere Seite wechseln und dann wieder zurück.

Mario

Dafür gibt es keine Einstellung im Widget. Mit etwas CSS kann man das aber ändern.

Website > Einstellungen > CSS

CSS

<style>
#button-sidenav span {
font-size: 28px;
}
</style>

Den Wert 28 kannst du natürlich anpassen.

Mario

Ich bin gerade dabei ein Widget zu entwerfen wo man 360° Panoramen betrachten kann. LINK

Ich denke aber eher du meinst ein Flat-Bild? Da bin ich auch dran, weis aber noch nicht ob das etwas wird. LINK

Oder so? LINK

Beachte bei deinem Vorhaben das die meisten Smartphones nur bis "8192 Pixel" Bildbreite darstellen.

Deshalb wird es in dem Panorama-Player auch eine Variante Cube-Map geben die das Bild in Würfelflächen aufteilt, somit ist dann eine Bildbreite von "24576 Pixel" möglich.

Ich bin mir nicht ganz sicher wie das aussehen soll.

Dieses Skript kann eine Flat-Bild aus mehreren Einzelbildern darstellen. LINK

Das sieht dann so aus. LINK

Mario

Ich habe das mal kurz mit dem Widget Quelltext getestet. LINK

Was habe ich gemacht?

Widget "Video Player" eingefügt und den Quellcode des Widgets kopiert.
Video und Vorschaubild in ZP importiert. "Erweitert > Bilder" und "Erweitert > Dateien"
Hier dann entsprechend die "OID-Adresse" kopiert und mit der "URL" ausgetauscht.
Das von Steffen T. erwähnte controlsList="nodownload" hinzu gefügt.
Das ganze dann als "Widget Quelltext" eingefügt.
Hier wird wie bereits von Stefan S. erwähnt lediglich im Chrome der Button "Herunterladen" entfernt. Ein Download des Videos ist weiterhin möglich.

Zeile 1 > die OID-Adresse des Vorschaubildes
Zeile 2 und Zeile 6 > die OID-Adresse des Videos

CSS

<video controls poster="oid://image/man2" controlsList="nodownload" >
<source src="oid://file/4_8mb_mp4" type="video/mp4">
<div class="zpwarning">
<p lang="de">Ihr Browser kann die angegebene Filmdatei leider nicht abspielen, da er das Video-Element nicht unterstützt.</p>
<p lang="en">Your browser can't play the requested video file. The browser doesn't support the video element.</p>
<p class="zpfallbackdownloads"><a style="margin-right: 10px;" href="oid://file/4_8mb_mp4">4_8mb_mp4</a></p>
</div>
</video>