Hier ein Beispiel mit einem Script von Werner-Zenk.de zur Anzeige von Bildern und Beschreibungen mittels Checkbox
Wähle eine oder mehrere Kriterien über die Checkboxen zur Darstellung von Bildern.
Beschreibung zu der Version vom 16.09.2017.
Skripte von Werner-Zenk.de
Bitte downloadet die ZIP Datei von der Seite von Werner-Zenk.de. Dort findet Ihr die vollständigen Skripte mit Beispielen. Bitte kopiert die Skripte aus dem Download oder nur in deutscher Sprache von dieser Seite hier (Google Übersetzer).
Kopiert zunächst dieses JavaScript in die > Page-Settings > "Inside <head> code"
Zieht Euch nun einen Textblock auf der Seite auf und ersetzt im Code-Editor den Text mit dem Formular unten. Ich habe diese Tabelle hier auf jeweils 2 Zeilen reduziert und die Beschreibungen angepasst. Der unterste <div> Container mit der id="output" wird die Ausgabe der Auswahl zeigen, die mit der unveränderten Datei "auswahlform_ausgabe.php" aus dem Download angezeigt wird.
Weiterhin habe ich auch die CSS aus dem Skript von Werner übernommen und in den Bereich CSS-Editor vom Code-Editor kopiert.
Achtet auf die Eigenschaft "max-width", die ich bei den unteren beiden Klassen noch hinzugefügt habe, damit das auch am Smartphone richtig angezeigt wird.
Kopiert nun noch das Verzeichnis "images" (mit Euren Bildern) in das gleiche Verzeichnis, indem sich diese Seite mit dem Einbau der Skripte befindet. Das ist hier das Stammverzeichnis (Root) meines Mobirise-Projektes.
Weiterhin kopiert Ihr auch die Ausgabe-Datei "auswahlform_ausgabe.php" in die Root.
Die CSV-Datei "artikel.csv" gehört ebenfalls in die Root und zeigt den Text und die Dateinamen der Bilder an, die bei mir folgenden Inhalt hat. Achtet darauf, das die Kodierung der CSV-Datei
"UTF-8 ohne BOM" beibehält.
Maritim;250€;Urlaub 2017;60x120cm;187-1287;Schiff1.jpg
Natur;250€;Im Grünen;50x100cm;187-2245;Natur1.jpg
Maritim;350€;Urlaub 2017;55x80cm;187-4477;Schiff2.jpg
Natur;350€;Im Grünen;70x130cm;187-5822;Natur2.jpg
Maritim;250€;Urlaub 2017;80x60cm;187-6891;Schiff3.jpg
Natur;350€;Im Grünen;40x30cm;187-7120;Natur3.jpg