ShowTime is an easy to use free fullscreen (viewport) slideshow that will:
1. Automatically detect the dimensions of the viewport and create a full screen (100% width and height with equal offsets) display area for slides (jpeg or png images)
2. Preload specified images from a directory
3. Start playing after five images have already loaded
4. Generate click navigation with arrows
5. Play automatically and change slides (images) at fixed time interval
6. Generate a task bar with the title of the image.
>> To use it, DOWNLOAD source file here (zipped).
>> Check this link for a demo of SHOWTIME
Usage:
1. To install ShowTime, add the following code in the head section of your html file:
<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js?load=effects,builder"></script>
<script language="JavaScript" src="path/to/showtime.js"></script>NOTE: path/to/showtime.js should be your relative directory path to the downloaded source file showtime.js
2. Add the following also in the head section
<script language="JavaScript">
new SHOWTIME(imagesPath, images);
</script>
where
imagesPath is a string refering to the path of your image collection directory
images is an array of image filenames to be displayed
Example:-
imagesPath = "my_photos/";
NOTE: Do not forget to add a trailing / after the directory name
images = ["Portrait.png", "Look_mama_I_am_flying.jpg", "Hello_world.png", "Tralalala.png", "It_s_showtime_folks.jpg"];
NOTE: A minimum of five images is mandatory. The image name will be used to create the title without the extension part. ShowTime will automatically parse the file name as the title in the following manner:
"Look_mama_I_am_flying.jpg" -> "Look mama I am flying"
You can further customize it for your needs by changing the follwing in the initialize (constructor) method:
this.xOffset = 5; //distance from left and right edge of the screen
this.yOffset = 5; //distance from top and bottom edge of the screen
this.timeout = 5.5; //time interval for each slide in seconds
Enjoy!
