// JavaScript Document for new slideshow
//
// requires:
// to size the slideshow presentation
// server side include slideshow2coltn.html
// additional individual customisation variables in parent file:
// var titles - an array of slide captions
// var images - an array of corresponding URLs of image files
// var n_images = images.length;
// var my_speed = 7000; (dwell time in ms for each slide)
// var autoplay = true; to start the show automatically
// onload="initialise();" in tag to fire up the slideshow -->
// Please note that most of this code is completely original and is copyright (c) Ian Graham and Lane Realty
// The slide transition code is derived from http://brainerror.net/scripts/javascript/blendtrans/
// We obviously cannot prevent you using this code and no warranties are given or implied. However,
// we would appreciate an acknowledgment on any copy or derivative of this code.
// Enquiries to grahamis(AT)onthenet.com.au
var current_image = -1;
var n_visible = 12;
var n_current_start = 0;
var n_tns = 20;
var playing = 0;
var my_timer = 0;
var fade_time = 1000;
// Fade-out, fade-in code derived from http://brainerror.net/scripts/javascript/blendtrans/ & elsewhere
// change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.images[id].style;
object.filter="progid:DXImageTransform.Microsoft.Alpha(Opacity=" + opacity + ')'; //IE 8
object.filter = "alpha(opacity=" + opacity + ")"; // IE lt 8
object.opacity = (opacity / 100); // Standard: FF gt 1.5, Opera, Safari
object.MozOpacity = (opacity / 100); // FF lt 1.5, Netscape
object.KhtmlOpacity = (opacity / 100); // Safari 1.x
}
function blendimage(imageid, bgndid, imagefile, millisec) {
var speed = Math.round(millisec / 100);
var timer = 0;
//set the current image as background
document.getElementById(bgndid).style.backgroundImage = "url(" + document.images[imageid].src + ")";
//make image transparent
changeOpac(0, imageid);
//make new image
document.images[imageid].src = imagefile;
//fade in image
for(i = 0; i <= 100; i++) {
setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
timer++;
}
}
//
function slideUp() {
if ((n_current_start + n_visible) < n_images ) {
document.getElementById("tn"+n_current_start+"_block").style.display = "none";
document.getElementById("tn"+(n_current_start+n_visible)+"_block").style.display = "block";
n_current_start += 2;
needDnArrow();
needUpArrow();
return true;
}
return false;
}
function slideDn() {
if (n_current_start > 0) {
n_current_start -= 2;
document.getElementById("tn"+(n_current_start+n_visible)+"_block").style.display = "none";
document.getElementById("tn"+(n_current_start)+"_block").style.display = "block";
needUpArrow();
needDnArrow();
return true;
}
return false;
}
function needUpArrow() {
if ((n_current_start + n_visible) < n_images ) {
if (!document.images["arrow_up"].title) {
document.images["arrow_up"].src = "images/arrowu_grn.gif";
document.images["arrow_up"].title = "Scroll thumbnails up";
}
} else {
if (document.images["arrow_up"].title) {
document.images["arrow_up"].src = "images/spacer.gif";
document.images["arrow_up"].title = "";
}
}
}
function needDnArrow() {
if (n_current_start > 0) {
if (!document.images["arrow_dn"].title) {
document.images["arrow_dn"].src = "images/arrowd_grn.gif";
document.images["arrow_dn"].title = "Scroll thumbnails down";
}
} else {
if (document.images["arrow_dn"].title) {
document.images["arrow_dn"].src = "images/spacer.gif";
document.images["arrow_dn"].title = "";
}
}
}
function first() {
var save = playing;
if (playing) { playing = 0; }
setMainImage(0);
playing = save;
}
function last() {
var save = playing;
if (playing) { playing = 0; }
setMainImage(n_images-1);
playing = save;
}
function previous() {
var save = playing;
if (playing) {
playing = 0;
save = -1;
}
if (current_image <= 0) {
setMainImage(n_images-1);
} else {
setMainImage(current_image-1);
}
playing = save;
}
function next() {
var save = playing;
if (playing) {
playing = 0;
save = +1;
}
if (current_image >= n_images-1) {
setMainImage(0);
} else {
setMainImage(current_image+1);
}
playing = save;
}
function play() {
if (playing) {
clearTimeout(my_timer);
document.images["play_btn"].src = "images/arrow_play_grn.gif";
document.images["play_btn"].title = "Play slideshow";
document.images["prev_btn"].title = "Go to previous image";
document.images["next_btn"].title = "Go to next image";
playing = 0;
} else {
document.images["play_btn"].src = "images/arrow_pause_grn.gif";
document.images["play_btn"].title = "Pause slideshow";
document.images["prev_btn"].title = "Play sideshow in reverse";
document.images["next_btn"].title = "Play sideshow forwards";
playing = 1;
clearTimeout(my_timer);
my_timer = setTimeout('continuePlay()', my_speed);
}
}
function continuePlay() {
clearTimeout(my_timer);
if (playing) {
if (playing > 0) {
next();
} else {
previous();
}
my_timer = setTimeout('continuePlay()', my_speed);
}
}
function setMainImage(tn_n) {
if (current_image >= 0) {
document.getElementById("tn"+current_image+"_border").style.borderColor = "#006600";
}
// document.images['img_main'].src = images[tn_n];
blendimage('img_main', 'img_main_container', images[tn_n], fade_time);
document.images['img_main'].title = titles[tn_n];
current_image = tn_n;
document.getElementById("tn"+current_image+"_border").style.borderColor = "#660000";
document.getElementById("main_title").innerHTML = "
"+titles[tn_n]+"
";
while (current_image < n_current_start) {
slideDn();
}
while (current_image >= n_current_start+n_visible) {
slideUp();
}
needUpArrow();
needDnArrow();
}
function initialise() {
for (i = 0; i < n_images; i++ ) {
document.images['tn'+i].src = images[i];
document.images['tn'+i].title = titles[i];
}
setMainImage(0);
if (n_images < n_tns) {
for (i = n_images; i < n_tns; i++ ) {
document.getElementById("tn"+i+"_border").style.display = "none";
}
}
// document.images['img_print'].src = images[0];
// document.images['img_print'].title = titles[0];
if (autoplay) { play(); }
}