One question we hear now and then is "how can I add a slideshow to my light box link or HTML5 widget?" While it's true that many third-party products available online do allow for the creation of slide shows, it really isn't necessary to pay for one of those if you just want to create a basic image gallery.
The following tutorial will provide code for the simple image slide show previewed above as well as details on how to use and configure it.
Slideshow Code
To start, download the code and resource files, below. There are two demos available:
(The other cycles through its slides automatically on a timer.)
Instructions for Use
1) Download one of the two slideshow code demos, above.
2) Configure the slideshow as described below.
3) Upload the entire folder to your organization's site, or whatever hosting solution you find most convenient.
4) In your Publication, point a light box link or HTML5 widget to the URL of the directory. Because the name "index.html" is assumed when one is not specified, you do not need to include that.
5) When choosing the size to create your light box or widget, just use something as closely proportionate to the slide images as possible. The slide show page will scale accordingly.
Configuration Options
Naturally, it is necessary to configure the slideshow to use your own images and links. This is done in the <script> section near the start of the "index.html" file. You'll want to open it using a text editor such as Notepad++ (for Windows) or TextWrangler (for Mac).
<title> - This will not typically be seen, but you may wish to change it in case the slideshow is ever seen independent of a widget or IFrame.
current_slide - The slide number to start with, minus one. Treat the first slide as 0. (Only for automatic slideshow.)
time_per_slide - The number of seconds to display each slide. (Only for automatic slideshow.)
img_paths - Use this to list the URLs for each slideshow image. They don't need to be the same size, shape, or even in the same location!
url_paths - Use this to list (in the same order) the URLs you would like each slide to navigate to when clicked.
slideshow_background - Determine the color used for the background of the HTML page, which shows through if there is any space left after scaling the slide image.
unselected_slide_number - The color used for slide numbers other than the slide being currently viewed. (Only for slideshow with control panel.)
selected_slide_number - The color used for the number of the currently selected slide, and also the box drawn around it. (Only for slideshow with control panel.)