// Config Varibles //Fading slideshow script //Martin Firus 2006 //--- Configuration File --- //config vars i_folder = 'images/gallery/'; // path to folder of images i_images = '91'; // amount of images in image folder, this is assumed correct so make sure it IS! fade_bin = 'bin/'; //path to resources used by the script (e.g control images) start_i = -1; // starting image (-1 is random) // this is overwritten by query method fixed_size = true; // images all the same size - improves apperance of ss container i_width = 360; // in pixels i_height = 270; // only are used if fixed_size is true i_pause = 6000; // millisecs to keep image on screen i_delay = 100; // millisecs delay of blank between showing next image f_in = 2000; // millisecs to fade in //note this must be less then i_puase f_out = 200; // millisecs to fade out img_history_maxlen = i_images*2; // number of images saved in memory - used only if random_show is true //booleans start_paused = false; // start in paused mode random_show = true; // random incrementation show_i_number = true; // show image number information under image show_controls = true; // show contols fade_controls = true; //fades controls in and out based on mouse position else always show // has no effect if show_controls is false loading_page = 'Loading Slideshow, Please Wait.'; //text to display when page is loading loading_image = 'Loading: '; //text to display when image is loading //--- Controls - Fading Options --- control_in = 200; //millisecs to fade in control_out = 500; //millisecs to fade out control_opacMax = 100; // fade in to %opacity control_opacMin = 0; // fade out to %opacity control_outDelay = 100; //delay in milliseconds before controsl start fade out //--- Define captions here --- caption_font = 'Arial'; caption_color = 'black'; caption_size = '8pt'; caption_bkgd_color = 'white'; // background color, use any standard CSS color or html color code caption_opacity = 70; // caption background opacity % 100 is fully on //Caption vars must have name c# where # is the image number //Can use valid html in string //if caption id too long to display clipping will occur //--- End Config File --- // End Config Varibles //Fading slideshow script //Martin Firus 2006 //--- Global Var Declaration ---// ss_timeout = null ss_timeout2 = null c_timeout = null i_n = null //image loop number i_n_pre = null //next image loop number preload first = true pause = false moving = false //true if just clicked the controls, allows to go back more then once in a row forward_again = false //flag to go back two on way back after finnished moving img_pre = new Image () img_pre2 = new Image () theImgList = new Array(); //array of images in slideshow image_history = new Array () //image history only used if random on 0 is front of array (current image) image_pointer = -1 //not using history pre_rand = null //previous random image imageFade_id = null //fade for the main image controlFade_id = null //fade for contorls randLoopLimit = 1000; //maximum times random gen will make sure wont have same images - stops it getting stuck if only have 1 pic //--- End Var Declaration ---// function fade (fadeID, objectID, opacStart, opacEnd, millisec, forceStart) { var intervalTime = 20; //refresh rate in millisecs (higher value is less cpu intensive but more choppy) // will result in in accurate fade length if PC cant keep up var timeScale = 1; //scale factor for time eval ("if (typeof fadeID_"+fadeID+" ==\"undefined\") { fadeID_"+fadeID+"=null; }"); //sets up a global fadeID_[fadeID] cancelFade (fadeID); //cancel any fading of this ID var opacCur = getOpac (objectID); //get current opacity of element if (opacCur != opacEnd) { //dont bother fading if already done if (forceStart) { //start fading from given start position changeOpac(opacStart, objectID); } else { //calculate time scale to start from current opacity timeScale = (1 - (Math.abs(((opacCur-opacStart)/(opacEnd-opacStart))))); } var step = (((opacEnd - opacStart)*intervalTime)/(millisec*timeScale));//step size of opacity increase step = step.toFixed(4); if (step < 0) { var base = "<="; } else { var base = ">="; } //positive fade in; negative fade out eval ("fadeID_"+fadeID+"_opacCur = opacCur"); //setup globals eval ("fadeID_"+fadeID+"=setInterval(function() {if (fadeID_"+fadeID+"_opacCur"+base+opacEnd+") { clearInterval(fadeID_"+fadeID+"); changeOpac("+opacEnd+", '"+objectID+"'); return; }; fadeID_"+fadeID+"_opacCur +="+step+"; changeOpac(fadeID_"+fadeID+"_opacCur, '"+objectID+"'); }, "+intervalTime+")"); //set the fading going } } function cancelFade (fadeID) { if (eval ("typeof fadeID_"+fadeID) != 'undefined') { eval ("clearInterval (fadeID_"+fadeID+")"); } } //change the opacity for different browsers function changeOpac(opacity, id) { var object = document.getElementById(id); object.style.opacity = (opacity/100); //css2 object.style.filter = "alpha(opacity=" + opacity + ")"; //ie } function getOpac(id) { //return the opacity of given element var id_id = document.getElementById(id); // document id to id var op = -1; //defult value, if returned means error if (id_id.style.opacity) { //mozilla op = id_id.style.opacity; op = op*100; } else if (id_id.style.filter) { //IE op = id_id.style.filter; op = op.slice(14); op = op.slice (0, op.length - 1); } return parseFloat(op); //make sure is a number } function get_rand () { new_rand = Math.ceil(Math.random() * (i_images)) while (new_rand == pre_rand) { new_rand = Math.ceil(Math.random() * (i_images)) if (safetyCount = randLoopLimit) { break; } safetyCount += 1; } pre_rand = new_rand //so wont get picked again return new_rand } function range_check (n) { // keep i_n in range if (n > i_images) { n = 1 } if (n < 1) { n = i_images } return n } function stop_timers () { // for skipping (cancel fades) first = true //no fades clearTimeout(ss_timeout2) //fade out delay clearTimeout(ss_timeout) // main image delay cancelFade ('imageFade_id') //stop fading the_img changeOpac(100, 'the_img') //set opac to 100% } function next_img () { stop_timers () pause_id.src = fade_bin+'pause.gif' //removed paused image i_n = range_check (i_n*1 + 1) // advance /* if (!random_show) { i_n = range_check (i_n*1 + 1) // advance } else { if (image_pointer != -1) { //using image_history image_pointer -= 1 if (image_pointer != -1) { i_n = image_history [image_pointer] } else { i_n = i_n_pre //new random, image } } else { i_n = i_n_pre //new random, image } moving = true } */ if (pause) { //only do fade if going from pause pause = false fade ('imageFade_id', 'the_img', 100, 0, f_out) } do_slideshow () } function back_img() { stop_timers () pause_id.src = fade_bin+'pause.gif' i_n = range_check (i_n - 1) // go back one /* if (!random_show) { i_n = range_check (i_n - 1) // go back one } else { // if rnadom go back in array if gone to far just to random if (image_pointer == -1) { image_pointer = 1 //start using image history } else { image_pointer += 1 } if (image_pointer == image_history.length) { // pointer is past right bound image_history.push (get_rand()) // get new random image add to back if (image_pointer == img_history_maxlen) { //array too long image_history.shift() //remove from front if too long image_pointer -= 1 //put pointer back in range } } i_n = image_history [image_pointer] moving = true forward_again = true } */ if (pause) { //only do fade if goinf from pause pause = false fade ('imageFade_id', 'the_img', 100, 0, f_out) } do_slideshow () } function stop_img() { if (!pause) { //stop stop_timers () pause = true pause_id.src = fade_bin+'pause-fade.gif' } else { //go pause_id.src = fade_bin+'pause.gif' pause = false first = true do_slideshow () } } function do_slideshow () { // the slideshow if (!first) { // dont run on first loop i_n = i_n_pre //advance fade ('imageFade_id', 'the_img', 100, 0, f_out) // fade out image } // advance the counter - by picking next image to be loaded /* if (random_show) { if (image_pointer == -1) { image_history.splice(0,0,i_n) //add i_n to front of array if (image_history.length > img_history_maxlen) { image_history.pop() } //remove from back } else if (!moving) { if (forward_again) { image_pointer -= 1 //go back to take into acount previous loop if (image_pointer == -1) { //dont go back any more image_pointer = 0 // so that will equal -1 at next if statement and get a new random image } else { i_n = image_history [image_pointer] } forward_again = false } image_pointer -= 1 // go forward in array } if (image_pointer == -1) { //not using history get random image i_n_pre = get_rand () //get next random image } else { //using history i_n_pre = image_history [image_pointer] } } else { i_n_pre = range_check (i_n*1 + 1) //just advance by 1 } */ i_n_pre = range_check (i_n*1 + 1) //just advance by 1 // prepare for image display; text and preload image captbkgd_id.style.visibility = 'hidden' //hide cap background capttext_id.style.visibility = 'hidden' //hide previos caption text //img_pre2 = new Image(); img_pre2.src = i_folder+i_prefix+i_n+'.jpg' // load img in background img_pre2 = new Image(); img_pre2.src = theImgList[i_n-1]; // load img in background if (!img_pre2.complete) { load_id.style.display = 'inline' }// show loading text if (image_history.length == img_history_maxlen) { full='.' } else { full='' } //put full stop after image text when rand buffer is full if (show_i_number) { document.getElementById('i_number').firstChild.nodeValue = 'Image: '+i_n+' of: '+i_images+full } //image number ss_timeout2 = setTimeout (function() {//fade out delay img_pre.src = img_pre2.src //when loaded onload will fire in img_pre }, !first*(f_out + i_delay)) // if first is true, timeout will be zero first = false // not first loop anymore moving = false //now can go forward } function start_slideshow (i_s) { // initilise slide show // -- Varible Setup -- if (i_s == -1) { i_n = get_rand() //i_n_pre = get_rand () } else { i_n = range_check (i_s) } //document id declarations img_id = document.getElementById('the_img') container_id = document.getElementById('ss_container') pause_id = document.getElementById('b_pause') //id to pause button image load_id = document.getElementById('loading') //id to loading captbkgd_id = document.getElementById('caption_bkgd') //id to caption
capttext_id = document.getElementById('caption_text') //id to caption
load_id.firstChild.nodeValue = loading_page load_id.style.display = 'inline' changeOpac(caption_opacity, 'caption_bkgd') // set caption opacity theImgList[0] = 'images/gallery/67.jpg'; theImgList[1] = 'images/gallery/60.jpg'; theImgList[2] = 'images/gallery/84.jpg'; theImgList[3] = 'images/gallery/62.jpg'; theImgList[4] = 'images/gallery/73.jpg'; theImgList[5] = 'images/gallery/72.jpg'; theImgList[6] = 'images/gallery/85.jpg'; theImgList[7] = 'images/gallery/77.jpg'; theImgList[8] = 'images/gallery/15.jpg'; theImgList[9] = 'images/gallery/27.jpg'; theImgList[10] = 'images/gallery/01.jpg'; theImgList[11] = 'images/gallery/06.jpg'; theImgList[12] = 'images/gallery/48.jpg'; theImgList[13] = 'images/gallery/20.jpg'; theImgList[14] = 'images/gallery/78.jpg'; theImgList[15] = 'images/gallery/44.jpg'; theImgList[16] = 'images/gallery/02.jpg'; theImgList[17] = 'images/gallery/39.jpg'; theImgList[18] = 'images/gallery/63.jpg'; theImgList[19] = 'images/gallery/37.jpg'; theImgList[20] = 'images/gallery/83.jpg'; theImgList[21] = 'images/gallery/49.jpg'; theImgList[22] = 'images/gallery/91.jpg'; theImgList[23] = 'images/gallery/71.jpg'; theImgList[24] = 'images/gallery/51.jpg'; theImgList[25] = 'images/gallery/80.jpg'; theImgList[26] = 'images/gallery/87.jpg'; theImgList[27] = 'images/gallery/88.jpg'; theImgList[28] = 'images/gallery/53.jpg'; theImgList[29] = 'images/gallery/64.jpg'; theImgList[30] = 'images/gallery/16.jpg'; theImgList[31] = 'images/gallery/25.jpg'; theImgList[32] = 'images/gallery/09.jpg'; theImgList[33] = 'images/gallery/04.jpg'; theImgList[34] = 'images/gallery/59.jpg'; theImgList[35] = 'images/gallery/03.jpg'; theImgList[36] = 'images/gallery/42.jpg'; theImgList[37] = 'images/gallery/61.jpg'; theImgList[38] = 'images/gallery/70.jpg'; theImgList[39] = 'images/gallery/57.jpg'; theImgList[40] = 'images/gallery/90.jpg'; theImgList[41] = 'images/gallery/50.jpg'; theImgList[42] = 'images/gallery/82.jpg'; theImgList[43] = 'images/gallery/58.jpg'; theImgList[44] = 'images/gallery/81.jpg'; theImgList[45] = 'images/gallery/19.jpg'; theImgList[46] = 'images/gallery/23.jpg'; theImgList[47] = 'images/gallery/28.jpg'; theImgList[48] = 'images/gallery/40.jpg'; theImgList[49] = 'images/gallery/76.jpg'; theImgList[50] = 'images/gallery/79.jpg'; theImgList[51] = 'images/gallery/89.jpg'; theImgList[52] = 'images/gallery/31.jpg'; theImgList[53] = 'images/gallery/30.jpg'; theImgList[54] = 'images/gallery/05.jpg'; theImgList[55] = 'images/gallery/24.jpg'; theImgList[56] = 'images/gallery/68.jpg'; theImgList[57] = 'images/gallery/66.jpg'; theImgList[58] = 'images/gallery/47.jpg'; theImgList[59] = 'images/gallery/45.jpg'; theImgList[60] = 'images/gallery/08.jpg'; theImgList[61] = 'images/gallery/69.jpg'; theImgList[62] = 'images/gallery/10.jpg'; theImgList[63] = 'images/gallery/12.jpg'; theImgList[64] = 'images/gallery/54.jpg'; theImgList[65] = 'images/gallery/29.jpg'; theImgList[66] = 'images/gallery/36.jpg'; theImgList[67] = 'images/gallery/07.jpg'; theImgList[68] = 'images/gallery/26.jpg'; theImgList[69] = 'images/gallery/74.jpg'; theImgList[70] = 'images/gallery/35.jpg'; theImgList[71] = 'images/gallery/75.jpg'; theImgList[72] = 'images/gallery/41.jpg'; theImgList[73] = 'images/gallery/22.jpg'; theImgList[74] = 'images/gallery/13.jpg'; theImgList[75] = 'images/gallery/11.jpg'; theImgList[76] = 'images/gallery/46.jpg'; theImgList[77] = 'images/gallery/21.jpg'; theImgList[78] = 'images/gallery/18.jpg'; theImgList[79] = 'images/gallery/17.jpg'; theImgList[80] = 'images/gallery/86.jpg'; theImgList[81] = 'images/gallery/65.jpg'; theImgList[82] = 'images/gallery/43.jpg'; theImgList[83] = 'images/gallery/14.jpg'; theImgList[84] = 'images/gallery/38.jpg'; theImgList[85] = 'images/gallery/52.jpg'; theImgList[86] = 'images/gallery/56.jpg'; theImgList[87] = 'images/gallery/33.jpg'; theImgList[88] = 'images/gallery/32.jpg'; theImgList[89] = 'images/gallery/34.jpg'; theImgList[90] = 'images/gallery/55.jpg'; // -- Document Setup -- //hide the no javascript image while loading if (fixed_size) { img_id.width = i_width; container_id.style.width = i_width+2.0; //add 2 for border img_id.height = i_height; container_id.style.height = i_height+2.0; } if (fade_controls && show_controls) { changeOpac(0, 'controls') } else { changeOpac(100, 'controls') } if (show_controls) { img_pre_c = new Image(); img_pre_c.src = fade_bin+'pause-fade.gif' //preload pause document.getElementById('controls').style.visibility = 'visible' do_control_fade (1) //fade in controls on start up will only work if fade_controls is true out_c = true } // -- Event Setup -- img_pre.onload = function(){ // advance when image fully loaded load_id.style.display = 'none' // hide loading text if (typeof( window['c'+i_n] ) != "undefined") { // show captions if defined captbkgd_id.style.visibility = 'visible' capttext_id.innerHTML = eval('c'+i_n) capttext_id.style.visibility = 'visible' } if ( out_c && fade_controls ) { do_control_fade (0); out_c = false } //hide controls from initial showing img_id.src = img_pre.src // show loaded img fade ('imageFade_id', 'the_img', 0, 100, f_in) //fade in if (!pause) { //img_pre2.src = i_folder+i_prefix+i_n_pre+'.jpg' //start preload next image img_pre2.src = theImgList[i_n_pre-1]; ss_timeout = setTimeout (do_slideshow, i_pause) // next image after i_pause } } window.onload = function () { if (start_paused) { pause = true; pause_id.src = fade_bin+'pause-fade.gif' } load_id.style.fontWeight = 'normal' load_id.firstChild.nodeValue = loading_image do_slideshow () //go! } } function do_control_fade (direction) { if (fade_controls && show_controls) { if (direction == 1) { //fade in clearTimeout (c_timeout) //fade delay fade ('controlFade_id', 'controls', 0, control_opacMax, control_in) } else { c_timeout = setTimeout (function() { fade ('controlFade_id', 'controls', control_opacMax, control_opacMin, control_out) }, control_outDelay) } } } function write_body_code () { changeOpac(0, 'the_img') document.writeln ('
'); document.writeln (''); document.writeln (''); document.writeln ('
 
'); document.writeln ('
 
'); }