FileSlider v1.0

FileSlider is een offline-/online-slideshowtool die automatisch je afbeeldingen en muziekbestanden uit mappen leest en een diavoorstelling in de browser aanbiedt. Het schaalt de afbeeldingen in meerdere resoluties (o.a. 4K en FullHD) en genereert miniaturen en afspeellijsten voor muziek.

---

Download:

FileSlider v1.0 downloaden

Installatie & Gebruik

1. Project downloaden

Download het hele project en pak het uit in een willekeurige map.
Opmerking: Als je het ook voor het web wilt gebruiken, is een mapnaam in kleine letters en zonder spaties aan te raden.

2. Afbeeldingen & Muziek toevoegen

• Plaats je originele afbeeldingen (JPG, PNG) in de map images/.
• Plaats je muziekbestanden (MP3, WAV) in de map music/.

3. Slideshow maken

• Windows: Dubbelklik op start.bat.
• macOS/Linux: Maak start.sh uitvoerbaar (chmod +x start.sh), dubbelklik dan of start in de terminal:

./start.sh

• macOS (FileSlider.app): Indien aanwezig, volstaat een dubbelklik op
  FileSlider.app. Je moet mogelijk eenmalig de uitvoering toestaan in de beveiligingsinstellingen.

4. Afbeeldingen & Muziek verwerken

• Er opent een terminal waarin de afbeeldingen automatisch worden verkleind (240px/1920px/3840px).
• Van alle afbeeldingen wordt ook een imageList.js in public/ gegenereerd; voor de muziek een musicList.js.
• Zodra het script klaar is, opent de index.html in de standaardbrowser.
• De slideshow kan ook op elk moment handmatig worden gestart door de index.html te openen.

5. Geniet van de slideshow

• De diavoorstelling toont alle afbeeldingen in de browser zonder geluid.
• Een klik op de pagina start (indien aanwezig) de muziek en schakelt tegelijkertijd over naar volledig scherm. Om veiligheidsredenen is bij de meeste browsers een actie nodig om muziek af te spelen.
• De afbeeldingen worden alfabetisch gesorteerd. Met passende namen (bijv. „001_, 002_...“) kun je de volgorde bepalen.

---

Werking

• Offline:
  De slideshow werkt volledig offline (geen server nodig). De gegenereerde lijsten (imageList.js, musicList.js) worden direct door de browser ingelezen.
• Online:
  Als de tool detecteert dat de pagina via HTTP/HTTPS wordt geladen, worden automatisch de 1920px-afbeeldingen gebruikt om laadtijden te verminderen. De volgende afbeelding wordt in de cache geladen, zodat ook bij een zwakke verbinding een vloeiende weergave ontstaat.
• Afbeeldingengalerij:
  In slide_show.html is er een compacte overzichtsgalerij (240px). Door op een afbeelding te klikken, start je de diavoorstelling precies op die plek. Door de kleine afbeeldingen zijn ook zeer grote presentaties met meer dan 1000 afbeeldingen mogelijk.
• Nieuwe inhoud:
  Als je nieuwe afbeeldingen of muziek toevoegt, herhaal dan eenvoudig stap 3 (startscript uitvoeren). De bestaande miniaturen en lijsten worden bijgewerkt. Als je oude afbeeldingen wilt verwijderen, verwijder ze dan uit images/ en verwijder de mappen images-240, images-1920, images-3840 (indien nodig). Start daarna het script opnieuw.

---

Mapstructuur (Voorbeeld)

FileSlider/
├─ start.bat             (Windows-startscript)
├─ start.sh              (macOS/Linux-startscript)
├─ FileSlider.app        (macOS: Optioneel, voor eenvoudig starten)
├─ index.html            (Hoofd-slideshow)
├─ slide_show.html       (Overzichtsgalerij)
├─ generateImageList.js  (Node.js-script voor afbeelding-/muzieklijst)
├─ nodejs/               (Draagbaar Node.js, zodat geen installatie nodig is)
├─ node_modules/         (Bevat afhankelijkheden zoals 'sharp')
├─ images/               (Originele afbeeldingen)
├─ images-240/           (Miniaturen 240px)
├─ images-1920/          (Miniaturen 1920px)
├─ images-3840/          (Miniaturen 3840px)
├─ music/                (Muziekbestanden)
└─ public/
   ├─ imageList.js       (Lijst van alle afbeeldingen)
   └─ musicList.js       (Lijst van alle muziekbestanden)

---

Opmerkingen & Tips

• Teksten uit bestandsnamen:
  De slideshow toont automatisch de bestandsnaam (zonder extensie) als titel/onderschrift.
• Meerdere resoluties:
  Voor verschillende apparaten worden automatisch 240px/1920px/3840px-versies gemaakt.
• Terminalvenster:
  Afhankelijk van het systeem blijft de terminal open om loguitvoer te tonen. Druk op een willekeurige toets of typ exit om het te sluiten.
• Wijzigingen in tijd, CSS en functie:
  De hele show kan worden gewijzigd in de index.html. Daar vind je de CSS, maar ook de weergaveduur per afbeelding. In de slide_show.html vind je alle vermeldingen van de overzichtspagina. Hier kun je eigen links, afbeeldingen etc. toevoegen om bijvoorbeeld bezoekers een hint of link te geven.

---

Bekende problemen

• Bestanden worden niet gevonden:
  Let op hoofd-/kleine letters (vooral onder Linux).
• macOS-beveiligingsinstellingen:
  Bij de eerste uitvoering van FileSlider.app of start.sh wordt mogelijk een beveiligingswaarschuwing weergegeven. Sta daar handmatig de uitvoering toe in „Systeeminstellingen → Beveiliging & Privacy“.
• Mobiele telefoons gaan slechts met tegenzin in een volledig schermmodus, daarom wordt de tool voornamelijk gebruikt voor fotoshows op schermen en beamers.
• og:image en og:url is technisch niet mogelijk in een puur HTML-bestand, maar kunnen per project wel worden bijgewerkt. De integratie zou de overstap naar PHP vereisen en dat zou aanzienlijke nadelen hebben, omdat het dan alleen nog met een webserver zou werken.

---

Licentie & Credits

• FileSlider-software & scripts: © Johann Dirschl / DIRSCHL.com GmbH, 2025.
• Afbeeldingen in de demo: Zijn eigendom van DIRSCHL.com GmbH en kunnen gelicentieerd worden.
• Muziek via nuonu.com:
  Wie afhankelijk is van licentievrije muziek, vindt deze ook op onze site en nuonu.com. Daar zijn
  veel korte en ook instrumentale stukken te vinden, die met behulp van AI zijn gemaakt. Maar elk muziekbestand werkt. Op het web moet je de bestanden klein houden (MP3). Offline kun je ook WAV-bestanden gebruiken.
• Kosten:
  Voor onze klanten is het gebruik gratis. Anderen kunnen muziek, plugins en apps gratis downloaden en testen. Als je deze commercieel wilt gebruiken, kun je via nuonu.com → Connect voor 49 EUR een jaarllicentie (zonder vervaldatum) aanschaffen. We breiden de producten graag uit indien nodig.
• Node.js: © Joyent Inc. / OpenJS Foundation (Draagbare Node.js is meegeleverd).
• Afhankelijkheden: (bijv. Sharp) onder hun respectievelijke open-source licenties.

Veel plezier met FileSlider!