thexperiments / miniSlide

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

miniSlide

A minimalistic slideshow with nice background blur, no ugly black bars for pictures not fitting the screen. Implemented in vanilla html5 JavaScript and CSS3 using CSS3 transitions to utilize browser hardware accelartion for smooth fading.

Currently should support all posix compliant systems.

Usage

  1. Clone the repo and enter the directory
git clone https://github.com/thexperiments/miniSlide.git
cd miniSlide
  1. Create a slideshow directory and put some pictures there
mkdir slideshow
  1. Run the update_slides bash script, it wil generate a slides.js file. On OSX you should be able to just double-click the file and it also would be
update_slides
  1. Open the index.html in a browser of your chioice (tested with chrome)

Feel free to change the cycle time in miniSlide.js. If you want to adjust the time of the fade be aware that you need to change the parameter in miniSlide.js and main.css.

Notes

Depending on the resolution of the images and the available bandwith the first run might stutter. Some devices might not be able to view this as it requires support for certain CSS features.

ToDo

Stuff to add in the future, feel free to contribute

  • Add shortcut keys for forward/backward skipping
  • Add touch control for forward/backward skipping
  • Add some mechanism to trigger better caching of images
  • change generated javascript to JSON to enable refresh of image list without browser reload
  • extend launching of browsers outside of OSX

About


Languages

Language:CSS 36.3%Language:JavaScript 35.7%Language:HTML 18.0%Language:Shell 10.0%