// Jquery Slideshow
/*
author: scott lenger
last updated: April, 2007
requirements: jQuery library
instructions:
1. add link to jquery file
2. add link to this file
3. add "preloadImages(); createSlideshowButtons(); addSlideshowBehaviors();" to onload function (see: onload.js)
4. code as follows:
(Click thumbnail below to enlarge)
todo: test preload function, implement better fade, make independent of jQuery
*/
// define a few global variables to use later
var gallery;
var timer;
var current;
function createSlideshowButtons() {
// Create Slideshow buttons and add to DOM after #placeholder //////////////////////////
// Previous Button Previous Image
var previouslink = document.createElement("a");
previouslink.setAttribute("id","previous_image");
previoustext = document.createTextNode("\u00AB Previous");
$(previouslink).append(previoustext).insertAfter("#placeholder");
// Next Button Next Image
var nextlink = document.createElement("a");
nextlink.setAttribute("id","next_image");
nexttext = document.createTextNode("Next \u00BB");
$(nextlink).append(nexttext).insertAfter("#placeholder");
// Stop Button Stop Slideshow
var stoplink = document.createElement("a");
stoplink.setAttribute("id","stop_slideshow");
stoptext = document.createTextNode("Stop");
$(stoplink).append(stoptext).insertAfter("#placeholder");
// Start Button Start Slideshow
var slideshowlink = document.createElement("a");
slideshowlink.setAttribute("id","start_slideshow");
slideshowtext = document.createTextNode("Start Image Slideshow");
$(slideshowlink).append(slideshowtext).insertAfter("#placeholder");
}
function addSlideshowBehaviors() {
// reset current image
current = 0;
gallery = $("#vehicle_images ul li a");
// Start
$("#start_slideshow").click(function() {startshow();} );
// Stop
$("#stop_slideshow").click(function() {stopshow();} );
// Next
$("#next_image").click(function() {next();} );
// Previous
$("#previous_image").click(function() {previous();} );
// Enlarge Image, adds onClick to all links in #vehicle_images list with fade transition //////////
$("#vehicle_images ul li a").click(function() {
// stop slideshow if running
stopshow();
// grab selected link, fadeout current link and fadein with selected
var thumbnail = $(this).attr("href");
$("#placeholder").attr({src:thumbnail});
return false;
});
}
// Image Slideshow Functions ////////////////////////////////////////////////////////////
// Start
function startshow() {
next();
clearInterval(timer);
// toggle start/stop buttons
$("#start_slideshow").hide();
$("#stop_slideshow").show();
// run Next() function every xxx millisecons
timer = setInterval(next, 2500);
}
// NOT WORKING (cross browser inconsistency when replacing img src)
// slideshowfade (basically the next function with a fade added)
/* function theshow() {
if(++current >= gallery.length) current = 0;
$("#placeholder").fadeOut("fast").attr("src");
$("#placeholder").fadeIn("fast").attr({src:gallery[current]});
} */
// Next
function next() {
if(++current >= gallery.length) current = 0;
$("#placeholder").attr({src:gallery[current]});
}
// Previous
function previous() {
if(--current == -1) current = gallery.length;
$("#placeholder").attr({src:gallery[current]});
}
// Stop
function stopshow() {
clearInterval(timer);
// toggle start/stop buttons
$("#start_slideshow").show();
$("#stop_slideshow").hide();
}
// Preload Images //////////////////////////////////////////////////////////////////////////////
// not sure if this helps as the slideshow works by changing the src of a single image rather than cycling through multiple images.
function preloadImages() {
// find all of the enlarge links within a given list
// test if a gallery exists (ul#image_gallery)
if (document.getElementById("image_gallery") == null) {return;}
// get an array of links in the gallery
var imgLinks = document.getElementById("image_gallery").getElementsByTagName("a");
for (var i = 0; i