/*****************************************************************************
* Javascript Slideshow - slideshow.js
* v 1.5
* Author: Jason Meade (jemeade@gmail.com)
* Last update: Apr 20, 2006
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2, or (at your option)
* any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; see the file gpl.txt. If not, write to
* the Free Software Foundation, Inc., 51 Franklin Street, Fifth
* Floor, Boston, MA 02110-1301, USA.
*****************************************************************************/
// INSTRUCTIONS, or HOW THE HELL DO I MAKE THIS WORK?
//
// Before you can use slideshow.js, you must define the images that you wish
// to display. The images must be stored in an Array object called
// 'slideshow_images'.
//
// For example:
//
// slideshow_images = new Array ("mypuppy.jpg",
// "pretty kitty.jpg",
// "mom.jpg",
// "dad.jpg")
//
// Here we have said that our slideshow will contain four images.
//
// NOTE: This variable must be declared BEFORE you load this library, so you
// will need to include two separate JavaScript tags.
//
// In addition, you can specify an optional array of captions to display
// along with each image. If you do not specify captions, then none will
// be used. However, if you do specify captions, then you should specify
// a caption for every image.
//
// The following example shows the proper way to setup slideshow.js:
//
//
//
//
//
//
//
// ... Remaining items (title, meta tags, etc...) go here ...
//
//
//
//
// Once this has been accomplished, you must embed the slideshow somewhere
// within the of the html web page. This naturally requires yet another
//
//
//
/* Supporting items */
var slideshow_img = 0; // The current image
var slideshow_speed = 5; // The initial refresh speed
var slideshow_previmg = new Image();
var slideshow_nextimg = new Image();
var slideshow_idiot_counter = 0;
var slideshow_idiot_threashold = 3;
var slideshow_idiot = false;
var slideshow_caption = false;
var slideshow_wrapimages = false;
/* An empty function used to disable the jump button if the user is an idiot */
function slideshow_void() {}
/* Cache the previous and next images for faster rendering */
function slideshow_cacheimages()
{
slideshow_cachenextimg();
slideshow_cacheprevimg();
}
/* Cache the next image in the series */
function slideshow_cachenextimg()
{
var img;
if (slideshow_img +1 >= slideshow_images.length) {
img = slideshow_images [0];
}
else {
img = slideshow_images[slideshow_img +1];
}
slideshow_nextimg.src = img;
}
/* Cache the previous image in the series */
function slideshow_cacheprevimg()
{
var img;
if (slideshow_img -1 < 0) {
img = slideshow_images[slideshow_images.length -1];
}
else {
img = slideshow_images[slideshow_img -1];
}
slideshow_previmg.src = img;
}
/* This draws your slideshow to the screen. The slideshow is rendered within
* its own table, with a header on the top left, and buttons on the right.
* The images are drawn below.
*
* Example:
*
* My Headline [Prev][Play][Pause][Next]
* +--------------------------------------+
* | |
* | |
* | |
* | [IMAGES GO HERE] |
* | |
* | |
* | |
* | |
* +--------------------------------------+
* + [optional captions go here] +
* +--------------------------------------+
*
* Note: Since images are drawn within a table, if the images are variable
* in their widths, the surrounding table will naturally flex in size. This
* can cause the healine text and buttons to move slightly. To avoid this,
* either hardcode a table width into the JavaScript below, or (preferably)
* make certain that all your images share a fixed width (and height).
*/
function slideshow_draw(header, color, speed, toggle_speed, jump)
{
/* Validate the library input */
if (typeof slideshow_images == 'undefined') {
window.alert ("Cannot find images for slideshow!");
}
if (typeof slideshow_captions != 'undefined') {
if (slideshow_captions.length != slideshow_images.length) {
var err = "slideshow_images and slideshow_captions "
+ "have different lengths! images = "
+ slideshow_images.length
+ " captions = "
+ slideshow_captions.length;
window.alert (err)
}
slideshow_caption = true;
}
slideshow_speed = speed;
slideshow_cacheimages(); // cache one image forwards/backwards
/* NOTE: You may need to customize the button styles to your site */
var style = "text-decoration: none;"
+ "font-family: sans-serif;"
+ "font-size: smaller;"
+ "color: " + color + ";";
var html = new String();
html += ""
+ "| "
+ header
+ " | "
+ " Back "
+ " Next "
+ " Play "
+ " Pause ";
if (toggle_speed == true) {
html += " Faster "
+ " Slower ";
}
if (jump == true) {
html += " Jump... ";
}
html += " |
"
+ "![]("
+ slideshow_images[0]
+ ") |
";
if (slideshow_caption == true) {
html += "| "
+ ""
+ slideshow_captions[0]
+ " |
";
}
document.write(html);
}
/* Move to the next image in the slideshow */
function slideshow_next(interactive) {
if (interactive == true) {
slideshow_pause(); // pause when the user clicks the next button
}
if (slideshow_wrapimages == false &&
slideshow_img + 1 >= slideshow_images.length) {
slideshow_pause();
window.status = "No more images";
return;
}
document.images["slideshow_image"].src = slideshow_nextimg.src;
slideshow_img += 1;
if (slideshow_img >= slideshow_images.length) {
slideshow_img = 0;
}
/* Resetting the caption should work in IE, Mozilla, Firefox, and Safari */
if (slideshow_caption == true) {
var c = document.getElementById("slideshow_caption");
if (c != null) {
c.innerHTML= slideshow_captions[slideshow_img];
}
}
slideshow_cacheimages();
}
/* Move to the previous image in the slideshow */
function slideshow_prev() {
slideshow_pause();
if (slideshow_wrapimages == false && slideshow_img - 1 < 0) {
window.status = "No prior images";
return;
}
document.images["slideshow_image"].src = slideshow_previmg.src;
slideshow_img -= 1;
if (slideshow_img < 0) {
slideshow_img = slideshow_images.length -1;;
}
/* Resetting the caption should work in IE, Mozilla, Firefox, and Safari */
if (slideshow_caption == true) {
var c = document.getElementById("slideshow_caption");
if (c != null) {
c.innerHTML= slideshow_captions[slideshow_img];
}
}
slideshow_cacheimages();
}
/* Sometimes folks just wanna be idiots */
function slideshow_idiot_user(add)
{
if (add == 1) {
slideshow_idiot_counter++;
}
if (slideshow_idiot_counter >= slideshow_idiot_threashold) {
slideshow_idiot = true;
}
return slideshow_idiot;
}
/* Jump to an arbitrary image in the slideshow */
function slideshow_jump() {
slideshow_pause();
img = window.prompt("There are "
+ slideshow_images.length
+ " images. Which one do you want to jump to?",1);
if (img == null) {
/* The user clicked the cancel button */
img = slideshow_img +1; // manually offset the array index
}
else if (isNaN(img)) {
window.alert("That's not a number!");
slideshow_idiot_user(1);
}
else if (img < 1) {
window.alert("That number is too small!");
slideshow_idiot_user(1);
}
else if (img > slideshow_images.length) {
window.alert("That number is too large!");
slideshow_idiot_user(1);
}
/* check to see if the user is too dumb to use this feature */
if (slideshow_idiot_user(0) == true) {
window.alert("You are too dumb to use this feature... Sorry :(");
slideshow_jump = slideshow_void; // disable this function
}
/* Sanity check */
if (isNaN(img) || (img < 1) || (img > slideshow_images.length)) {
img = slideshow_img;
}
else {
/* offset by one since most users aren't zero based */
slideshow_img = img -1;
}
document.images["slideshow_image"].src = slideshow_images[slideshow_img];
/* Resetting the caption should work in IE, Mozilla, Firefox, and Safari */
if (slideshow_caption == true) {
var c = document.getElementById("slideshow_caption");
if (c != null) {
c.innerHTML= slideshow_captions[slideshow_img];
}
}
slideshow_cacheimages();
}
/* Pause the slideshow. */
var slideshow_timeout;
function slideshow_pause() {
clearTimeout(slideshow_timeout);
window.status = "Pausing slideshow";
}
/* Set or reset the default time-step between image changes */
function slideshow_step(val) {
slideshow_speed += val;
if (slideshow_speed < 1)
slideshow_speed = 1;
window.status = slideshow_speed + " seconds betwen images";
}
/* Starts the show */
function slideshow_play() {
slideshow_pause();
/* Note: we only pause one second when the user presses play. This
* is a long enough delay to not startle anyone, yet short enough
* to not cause folks to click multiple times (thus delaying the actual
* start). */
slideshow_timeout = setTimeout("slideshow_slide()",1000);
window.status = "Starting slideshow";
}
/* This starts the show! */
function slideshow_slide() {
slideshow_next(false);
slideshow_timeout = setTimeout("slideshow_slide()",
(slideshow_speed * 1000));
}