Free Canvas Slideshow



The Free Canvas Slideshow is a free-to-use tool which implements a simple image slideshow written in javascript using HTML5 Canvas.

Features

• 100% free and 100% open source.
• Full API and documentation.
• Compatible with all browsers and mobile devices.
• Easy to set up and configure.
• Resize images to maintain aspect ratios.
• Supply a simple list containing images and captions for each slide.
• Optionally specify an area within an image to display (advanced feature).
• Configure the appearance of the slideshow buttons (Previous, Next, Play/Pause).
• Configure the transition effect when changing slides.
• Configure the display of captions.
• Support for full page or resizeable slideshows.
• Specify a callback function to allow integration with your code (advanced feature).
• Support for displaying multiple slideshows on the same page.

A single javascript file is all that is needed to implement the Free Canvas Slideshow.

No additional resources are needed apart from the images to display in the slideshow.

View the examples and documentation below to see how the slideshow works and how to implement a slideshow for your website or blog.

Template Slideshows

Simple slideshow

Multiple slideshows

Full page slideshow

Dynamic slideshow


Slideshow Implementation

To get started it is recommended to copy the Simple Slideshow template HTML page above and also copy this javascript file slideshow.js into the same folder.

If you are testing the slideshow on your local machine you will need some kind of web server such as Servez.

Edit the slideshow options within the HTML file.

Add in your own images into the slides array.

Edit the options to configure the slideshow appearance and behaviour.

See the reference below for a full guide.



Slideshow API Reference

Constructor

Slideshow( slideshowOptions ) Returns the main slideshow object.

The available properties within slideshowOptions are listed below.

name The name of the slideshow object.
container The id of the div used as a slideshow container.
width The width of the slideshow in pixels.
height The height of the slideshow in pixels.
fullPage When the container div is resized it will be set to the same size as the page dimensions.
backgroundColor Should be the same as the page background colour.
slides The array of slides. Each slide has the following fields:
url : the image URL.
caption : the caption to display on the slide.

Optionally you can set these additional fields:
x : horizontal offset to a point within the image.
y : vertical offset to a point within the image.
width : width of the image portion to display.
height : height of the image portion to display.
displayTime The time to display each slide in milliseconds.
transition Whether to apply a fade transition effect when changing the slide image. Can be true or false (default=true).
transitionSpeed The speed at which to apply the transition effect. Float value (default = 1).
hotspotSize The size in pixels of the slideshow controls (default=30).
autoPlay Whether the slideshow starts playing automatically. Can be true or false (default = true).
enablePlayPause Whether to display the Play/Pause control at the centre of the slide image. Can be true or false (default = true).
enablePrevNext Whether to display the Previous and Next controls at the sides of the slide image. Can be true or false (default = true).
enableCaptions Whether to display captions with the slide. Can be true or false (default = true).
staticCaptions Whether the captions are displayed when the mouse is not over the slide. Can be true or false (default = false).
captionFontSize The height in pixels of the caption text (default = 18).
captionFont The font name used for caption text (default = Helvetica).
captionColor The color used for the caption text (default = black).
captionBackgroundColor The colour used for the caption background (default = white).
controlColor The color used for the control icons (default = white).
controlBackgroundColor The colour used for the control backgrounds (default = blue).
clickbackFunction The name of a function to call when the user clicks on a slideshow image. See the third slide in this Multiple slideshows demonstration for an example of usage.
enableRightClick Whether the right clicking on the image will display a context menu. Can be true or false (default = false).

Available Functions:

resizePage() Call this function for dynamically sized slideshows (width=0 and height=0, or fullPage=true) whenever the container div size changes.
play() Resume playing the slideshow
pause() Pause playing the slideshow
select(id) Load the image at index id within the slide list.

View an implementation example here:

Dynamic slideshow





If you have any feedback on the Free Canvas Slideshow please contact us.



Copyright (c) Map Channels, 2007-2023   Contact   Privacy Policy