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

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.

Contact Privacy Policy