JavaScript HTML Galerie zur lokalen Verwendung

[FlowFun]

Hallo zusammen,

ich möchte gern lokal auf einem Rechner eine super simple Galerie laufen lassen, die mir selbstständig dynamisch alle Bilder aus einem Ordner aufsammelt und als Grid darstellt. Die Bilder müssen sich nicht mal vergrößern beim anklicken. Ich bin zwar ein guter Programmierer, aber habe von HTML wirklich keine Ahnung.

Da dachte ich, dass das doch nicht so schwer sein kann aber habe mittlerweile schon viele Stunden im Internet gesucht, ohne eine Lösung zu haben. Oft wird PHP genutzt, das kann ich aber lokal nicht laufen lassen (kann da keine Zusatzsoftware installieren).

Hat da jemand eine Quelle für mich, wie ich so was bauen kann? Ich vermute es wird auf Javaskript+HTML rauslaufen, ich hab nur keine Ahnung vom zusammenspiel...

Danke und viele Grüße!

 

[Madman1209]

Hi,

du brauchst zwingend "mehr" als nur JavaScript und HTML, da du die Bilder(ordner) ja erstmal von der Platte auslesen musst. Oder sind es nicht viele und es muss nicht dynamisch sein - sprich: du hackst die Bilder von Hand einmal statisch rein? Dann ginge es auch ohne irgendwas im Hintergrund.

Was genau heißt "kann da keine Zusatzsoftware installieren"? Gar keine?

VG,
Mad

 

[Nase]

PHP muss man nicht installieren. Eingabeaufforderung starten, die php.exe raussuchen und als Server starten (z. B. php.exe -S localhost:8080 -t [Verzeichnis]).

 

[Joshinator]

Wenn du wirklich gar kein PHP installieren kannst musst du wohl eine andere Methode finden eine Index-Datei mit allen Bildern zu erstellen.

cmd /u /c "dir /b > bilder.txt"
Wenn du das in der CMD ausführst wird eine bilder.txt erstellt die in jeder Zeile den Dateinamen hat. Mit nen bisschen googlen solltest rausfinden wie du da nur Bilder auflistest und wie du das über Unterordner laufen lässt.
Powershell wird das bestimmt auch können.
Musst halt in dem Fall die Datei immer wieder neu generieren wenn sich der Inhalt vom Ordner ändert.

Der Rest ist dann nur noch per Javascript die bilder.txt zu laden und die <img /> im Dokument zu erstellen.
Stichwort zum Javscript ist fetch() womit du die .txt laden kannst, dann musst du den Dateistring auf linebreaks splitten und in ner Schleife durch das Array iterieren und img-Elemente erstellen.

Edit: fetch mit einer file:///-URL geht nicht

 

[FlowFun]

Danke für die Antworten!

Erst mal ja, ich kann da wirklich keine Zusatzsoftware installieren und die Bilder sollen dynamisch geladen werden, weil sie sich im Wochenabstand ändern - da investiere ich lieber einmal Zeit
Schade, ich dachte ich könnte mit Javascript die Dateinamen auslesen?

Die Methode die ich als letzte Hoffnung sehe ist die von Joshinator: ein Programm, was mir wenigstens auf Knopfdruck alles generiert. Es kann dann auch die ganze HTML Seite schreiben, das ist ja dann auch nicht mehr weit.

 

[Madman1209]

Hi,

man korrigiere mich, aber auch mit "fetch" brauche ich doch einen Server, der die gewünschte Datei ausliefert. Oder nicht? JavaScript mit direktem Zugriff auf das Dateisystem kann ich mir gerade nicht wirklich vorstellen.

VG,
Mad

 

[Joshinator]

aber auch mit "fetch" brauche ich doch einen Server

Hast recht, file-URLs darf man nicht laden. Gibt wohl Addons/Apps mit denen man einen Webserver erstellen kann, über so ne Browser/Chrome-App kann man dann einen Ordner vom Rechner per localhost erreichen. Dann wären das http-URLs die man mit Fetch laden kann.
War was vorlaut mit nur JS & HTML


Du darfst aber file-URLs von einer Datei laden, heißt du erstellt eine index.html in C:/Users/User/Pictures/ und öffnest die dann in Chrome über file:///C:/Users/User/Pictures/index.html. Dort kann man dann ganz normale IMG-Tags benutzen die problemlos geladen werden.

Beste Option wäre dann wohl mit nem Batch-Script den Ordnerinhalt lesen und dann das Script die index.html-Datei schreiben lassen. So brauchst du dann wirklich keinen Server und musst nur die html-Datei im Browser öffnen.
Hab aber keine Ahnung von Batch, Codebeispiele gibts also nicht. Aber ls, eine Schleife die <img /> in nen String packt und das ganze dann mit ein bisschen <> in eine Datei schreibt sollte nicht so schwer sein.

Schade, ich dachte ich könnte mit Javascript die Dateinamen auslesen?

Funktioniert aus gutem Grund nicht, wie Madman schon sagte JS mit direktem Dateizugriff ist nur schwer vorstellbar.
Sonst könnte ja jede beliebige Website versuchen Dateien von deinem Desktop aufzurufen und den Inhalt an einen anderen Server senden. Irgendwann findet man einen passenden Dateipfad wo was wichtiges drinnen steht.
Node kann das, auch wenn Node Javascript ist ist Javascript != Javascript. Im Browser ist Dateizugriff wirklich eine dumme Idee.
In Electron hast du kompletten Zuriff auf Node, damit hast du dann lokalen Dateizugriff. Aber dein Electron-Bundle musst du am Ende auch wie ein normales Programm auf dem Ziel-Rechner installieren.

 

[Madman1209]

Hi,

sicher, das geht. Aber eben nicht nur per JS eine dynamisch erstellte Datei einlesen.

Ich würde auch sagen: komplette HTML Datei dynamisch erstellen lassen und dann einfach anzeigen. Fertig.

VG,
Mad

 

[FlowFun]

Alles klar, danke für den Input