FULLSCREEN LIVE SLIDESHOW

Introduction

See demonstration here or download all files in a zip archive - liveslideshow.zip (~ 1mb).

Fullscreen Live Slideshow is a javascript slideshow that runs in your browser and updates automatically with new images added while the script runs. The script is made to show pictures from Eye-Fi cards uploaded via FTP, but can be used together with any service that uploads images (e.g PhotoBeam for Android).

Features:

Runs directly in the browser - no client software necessary
Runs on all major platforms (Windows, Mac, iOS, Android, Kindle)
New images are shown first
Slideshow can run on multiple clients simultaneously
Possible to review images before they go live and to remove images (PHP required)
Configurable: the pause between each image, random or sequential, show only X last images etc
• Needs a webserver and PHP for full functionality, but will work on without PHP on a standard Apache webserver, or locally of supported by a batch script.
Includes a windows batch script to automatically resize, fix orientation and ftp images from a windows machine as they are taken

How to use with PHP on a remote server

Unzip the files from liveslideshow.zip on the server. You should now have a folder "lss" containing the scripts and a folders named "images", "win" and "php".
Set up the Eye-Fi service to upload your images to your FPT server to the "images" folder mentioned above. You should probably set the resolution to 1600px.
Point your browser to the folder "lss" (like this http://example.com/lss/)
Go to full screen mode in your browser and remove status bars and similar to get a true full screen picture

Further information

To configure the edit the file config.js or use the page config.html
If PHP is enabled you can use the script php/reivew.php to edit which files are shown in the slide show. Files are not deleted but moved to the "removed" subfolder of images". If you would prefer to moderate the pictures before they go live, point the service uploading the images to the removed folder.
Keyboard short cuts: Use the arrows to navigate back and forth li>Press spacebar or click in the middle at the bottom of a picture to bring up the -configuration panel
Consider using .htaccess to protect your images
Select "show only X last images" with limit "1" to only show the last uploaded image
How to maintain the list of images if PHP is not available?
- You can use the directory listing provided by your webserver which probably is Apache. Make sure the provided .htacces file is placed the images folder (shall only contain the following line of text "Options +Indexes"). Point your browser to the images folder (yourserver.com/lss/images/) and verify that you see a listing of the directory. Open the file config.js and change the variable "conf.imageList" to point to the image directory.
- Set up a cron with the command ("ls -tr *.jpg > fileList.txt" or similar)
- Run a batch file for a local that are in sync with the remote and upload with ftp (e.g "processImages.bat" see below)
In order for php/review.php to work the script needs writing access to the subfolders "images/thumbs" and "images/removed"

Platforms and browsers

The slideshow uses standard javascript and should work in all modern browsers:

Windows: Tested with IE7, Chrome, Firefox and Opera (press F11 to toggle fullscreen on all browsers)
Mac: Tested with Safari, Chrome and Opera. Works best with latest version of Firefox (>3.6, - View->Fullscreen / Command+Shift+F) which is the only browser that I am aware of that allows full screen browsing on Mac
Android: Tested with standard browser
iOS (Ipad, Iphone, Ipod): Works with standard browser. Works even better with the browser Perfect Browser" since this browser allows full screen
Kindle (Tested on G3 6")

Notes on running locally without webserver and PHP on windows

It is possible to run the slideshow locally without PHP, but if that is what you want there are probably options with other software.

Some modern browsers are skeptical to allow active content to run locally. In IE you get a warning that you would need to accept. In order to get it to run locally on Chrome you have to start the browser with the following flag "--allow-file-access-from-files". (Chrome are usually located in "C:\Users\{CURRENTUSER}\AppData\Local\Google\Chrome\Application"
You need a list of images that updates automatically. The batch script "createImageList.bat" is made for that purpose. Double-click to start. It will then make a list of images in that is automatically updated. The name of the list is "serverImageList.php". You have to configure the slide show to use this list.
Images on local machine are probably directly from your camera and quite large in size. This might cause performance issues in the browser. In order to resize and correctly orientate images you can use the provided batch-file "processImages.bat". This batch file can also upload your images to an remote ftp server. The following tools are needed:
1. jhead.exe (included in zip)
2. jpegtran.exe (included in zip)
3. PhotoResize400.exe - (not included in zip, Follow link and download to "win" directory)
It is not possible to remove images using the included review function without php support.

Misc

Example images in images/ from Thomas Hawk. Licensed under Creative Commons (Attribution Noncommercial).

Scripts provided and maintained by Arne (aslat@start.no). Please feel free to contact for comments and feedback. v0.1. Download latest version from here.

Last updated 30 September 2010