Vanilla JS Slide full screen slide show for videos and images
Why?
This is a scratch-your-own-itch project as I wanted a way to see images and videos full screen in my browser that loop.
Preview and Quicklook on MacOS are awesome but their treatment of GIFs and the inability for Quicklook to loop videos annoyed me, so I wrote this. You can see it in action in this YouTube Video
Features
- Displays any video or image in a folder in the largest possible size without cropping
- Mouse or keyboard navigation (Arrow Left and right for back and forward, Space to toggle automatic advancing)
- Slide show option showing a new image every
xseconds. - Slide show waits for images to load and videos to be playable before advancing
- Stores the current position of the slide show. Next time you load the document it commences where it stopped last time.
Usage
You can use the slideshow by giving it a container to create all the elements in, define the different settings of the slideshow object:
container: a DOM reference to the HTML element the slide show should be added inmedia: an Array of images and videos to displayfolder: the folder containing these - this should be a child folder of one the slide show is in.autoplay:yesornoindicating if the slide show should start or notspeed: time in milliseconds to advance to the next media item (f.e. 1000 for a second)endless:yesornoindicating if hittingnexton the last element should go to the first andbackon the first element to the last one.
<div id="slideshow-container"></div>
<script>
let slideshow = {
container: '#slideshow-container',
media: [
'ball.mp4','dinowalk.mp4','dirty.mp4',
'goldiejump.mp4','step.mp4','tippy.mp4','wag.mp4'
],
folder: 'imgs/',
autoplay: 'yes'
}
</script>
<script src="slideshow.js"></script>
Automating the media collection
Currently I am using this on my hard drive running a local server and the index.php script. If you are using a Mac, PHP comes with the system. Go to the terminal, navigate to the folder where the slide show is and run:
$ php -S localhost:8000
Then you can navigate in you browser to localhost:8000 and the rest happens automatically.
The index.php script lists all the current folders in the directory the script is in and gives you list of all of them. Clicking the link of the name starts the slide show with the current folder. Feel free to check the script, but there isn't much magic there.
2.6k Dec 31, 2022
7.1k Jan 2, 2023
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
2 Dec 28, 2021
32 Aug 12, 2023
3 Oct 24, 2022
7 May 23, 2022
3 Oct 8, 2020
4 Aug 9, 2022
8.7k Dec 21, 2022
6.7k Jan 3, 2023
5 May 23, 2022
8 Nov 7, 2022
4 May 12, 2021
7 Dec 13, 2021
3.5k Dec 30, 2022
8 May 1, 2023