FileSlider v1.0

FileSlider is an offline/online slideshow tool that automatically reads your images and music files from folders and provides a slideshow in the browser. It scales images to multiple resolutions (including 4K and FullHD) and generates thumbnails and playlists for music.

---

Download:

Download FileSlider v1.0

Installation & Usage

1. Download the Project

Download the entire project and unpack it into any folder.
Note: If you also want to use it for the web, a folder name in lowercase and without spaces is recommended.

2. Add Images & Music

• Place your original images (JPG, PNG) in the folder images/.
• Place your music files (MP3, WAV) in the folder music/.

3. Create the Slideshow

• Windows: Double-click start.bat.
• macOS/Linux: Make start.sh executable (chmod +x start.sh), then double-click or start in the terminal:

./start.sh

• macOS (FileSlider.app): If available, a double-click on
  FileSlider.app is sufficient. You may need to allow execution once in the security settings.

4. Process Images & Music

• A terminal will open, in which the images are automatically resized (240px/1920px/3840px).
• From all images, an imageList.js is also generated in public/; for music, a musicList.js.
• Once the script is finished, index.html will open in your default browser.
• The slideshow can also be started manually at any time by opening index.html.

5. Enjoy the Slideshow

• The slideshow displays all images in the browser without sound.
• A click on the page starts the music (if available) and simultaneously switches to full screen. For security reasons, most browsers require an action to play music.
• The images are sorted alphabetically. You can control the order with appropriate names (e.g., „001_, 002_...“).

---

How it Works

• Offline:
  The slideshow runs completely offline (no server needed). The generated lists (imageList.js, musicList.js) are read directly by the browser.
• Online:
  If the tool detects that the page is loaded via HTTP/HTTPS, the 1920px images are automatically used to reduce loading times. The next image is loaded into the cache, ensuring a smooth flow even with a weak connection.
• Image Gallery:
  In slide_show.html, there is a compact overview gallery (240px). By clicking on an image, you start the slideshow at that exact point. Thanks to the small images, very large presentations with more than 1000 pictures are also possible.
• New Content:
  If you add new images or music, simply repeat step 3 (run the start script). Existing thumbnails and lists will be updated. If you want to remove old images, delete them from images/ and delete the folders images-240, images-1920, images-3840 (if necessary). Then restart the script.

---

Folder Structure (Example)

FileSlider/
├─ start.bat             (Windows start script)
├─ start.sh              (macOS/Linux start script)
├─ FileSlider.app        (macOS: Optional, for easy start)
├─ index.html            (Main slideshow)
├─ slide_show.html       (Overview gallery)
├─ generateImageList.js  (Node.js script for image/music list)
├─ nodejs/               (Portable Node.js, so no installation is needed)
├─ node_modules/         (Contains dependencies like 'sharp')
├─ images/               (Original images)
├─ images-240/           (Thumbnails 240px)
├─ images-1920/          (Thumbnails 1920px)
├─ images-3840/          (Thumbnails 3840px)
├─ music/                (Music files)
└─ public/
   ├─ imageList.js       (List of all images)
   └─ musicList.js       (List of all music files)

---

Notes & Tips

• Texts from Filenames:
  The slideshow automatically displays the filename (without extension) as the title/caption.
• Multiple Resolutions:
  240px/1920px/3840px versions are automatically created for different devices.
• Terminal Window:
  Depending on the system, the terminal remains open to show log outputs. Press any key or type exit to close it.
• Changes in Time, CSS, and Functionality:
  The entire show can be modified in the index.html. There you will find the CSS, as well as the display times per image. In the slide_show.html, you will find all entries for the overview page. Here you could add your own links, images, etc., for example, to provide visitors with a hint or link.

---

Known Issues

• Files not found:
  Pay attention to case sensitivity (especially on Linux).
• macOS Security Settings:
  When first running FileSlider.app or start.sh, a security warning may be displayed. Manually allow execution in „System Settings → Security & Privacy“.
• Mobile phones are reluctant to enter full-screen mode, which is why the tool is primarily used for photo shows on screens and projectors.
• og:image and og:url are technically not possible in a pure HTML file, but can be maintained per project if desired. Integration would require switching to PHP, which would have significant disadvantages as it would then only be runnable with a web server.

---

License & Credits

• FileSlider Software & Scripts: © Johann Dirschl / DIRSCHL.com GmbH, 2025.
• Images in Demo: Are property of DIRSCHL.com GmbH and can be licensed.
• Music via nuonu.com:
  If you need royalty-free music, you can also find it on our site and nuonu.com. There you will find
  many shorts and instrumental pieces created with the help of AI. However, any music file will work. For the web, you should keep the files small (MP3). Offline, you can also use WAV files.
• Costs:
  Usage is free for our customers. Others can download and test music, plugins, and apps for free. If you want to use them commercially, you can purchase an annual license (without expiration) for 49 EUR at nuonu.com → Connect . We are happy to expand the products as needed.
• Node.js: © Joyent Inc. / OpenJS Foundation (Portable Node.js is included).
• Dependencies: (e.g., Sharp) under their respective open-source licenses.

Have fun with FileSlider!