// #####v####v###v###v### SLIDESHOW van background images in DIV ###v####v#####v####v####v####v###v####v###v##### // // 0. $SlideShowString en $SlideShowDelay worden gevoed vanuit een PHP-script!! // $SlideShowString="images/1/foto1_1182951086.jpg:fototext here;images/1/foto2_1182951086.jpg;images/1/foto3_1182951086.jpg"; // // 1. Zet in de BODY-tag // function showSlideshowHelp() { document.getElementById('slideshowtext').innerHTML='space PLAY/STOP --> PREVIOUS <-- NEXT'; setTimeout('SetondertextHELPhidden()',6000) // scrolls every 100 milliseconds } // Browser Slide-Show script. // With image cross fade effect for those browsers that support it. // Script copyright (C) 2004 www.cryer.co.uk. // Script is free to use provided this copyright header is included. // LETOP: zet id='pic1' name='pic1' in image var g_slideCache = new Array(); var g_stopslideshow='no'; var g_sSlideShowDisplay='next'; var g_SHOWprevPicture = 'no'; var g_SHOWcurrentPicture = 'no'; var g_SHOWnextPicture = 'no'; var g_Date = new Date(); var g_TimeInSecs = g_Date.getTime(); var g_prevTime = g_TimeInSecs; var g_NrOfPictureToPlay = 0; var g_ProjectNr = 0; function RunTheSlideShow( p_RunSlideShowNr, p_slideShowDiv, p_displaySecs ){ // cache next and prev picture PreloadNextImages( g_ProjectNr, (g_NrOfPictureToPlay + 1), 1 ); if( g_NrOfPictureToPlay>0 ){ PreloadNextImages( g_ProjectNr, (g_NrOfPictureToPlay - 1), 1 ); } // Bepaal wat er moet gebeuren wachten of niet g_Date = new Date(); g_TimeInSecs = g_Date.getTime(); var dVerschil = g_TimeInSecs - g_prevTime; if( dVerschil >= p_displaySecs*1000 ){ g_prevTime = g_TimeInSecs; g_sSlideShowDisplay='next'; }else{ g_sSlideShowDisplay='current'; } if( g_stopslideshow=='yes' ) g_sSlideShowDisplay='current'; if( g_SHOWprevPicture=='yes' ){ g_sSlideShowDisplay='prevdirect'; } if( g_SHOWnextPicture=='yes' ){ g_sSlideShowDisplay='nextdirect'; } if( g_SHOWcurrentPicture=='yes' ){ g_sSlideShowDisplay='current'; } // prepare images and text if( g_sSlideShowDisplay=='current' ){ // bepaal currentImage, currentText var currentImage = g__foto[g_ProjectNr][g_NrOfPictureToPlay]; var currentText = g__text[g_ProjectNr][g_NrOfPictureToPlay]; } if( g_sSlideShowDisplay=='next' || g_sSlideShowDisplay=='nextdirect' ){ // bepaal nextImage, nextText en sNextImageFiles en cache it var nextImage = g__foto[g_ProjectNr][g_NrOfPictureToPlay+1]; var nextText = g__text[g_ProjectNr][g_NrOfPictureToPlay+1]; g_NrOfPictureToPlay++; if( g_NrOfPictureToPlay >= g__foto[g_ProjectNr].length ){ g_NrOfPictureToPlay = 0; } // zorg dat div-overplaatjes verdwijnen setTimeout("document.getElementById('nextpic').src='images/leeg.gif';",1200); } if( g_sSlideShowDisplay=='prev' || g_sSlideShowDisplay=='prevdirect' ){ var prevImage = g__foto[g_ProjectNr][g_NrOfPictureToPlay-1]; var prevText = g__text[g_ProjectNr][g_NrOfPictureToPlay-1]; g_NrOfPictureToPlay--; if( g_NrOfPictureToPlay < 0 ){ g_NrOfPictureToPlay = g__foto[g_ProjectNr].length - 1; } setTimeout("document.getElementById('prevpic').src='images/leeg.gif';",1200); } // set images and text + run function RunTheSlideShow switch ( g_sSlideShowDisplay ) { case 'current': g_SHOWcurrentPicture='no'; document.getElementById(p_slideShowDiv).style.backgroundImage = 'url('+currentImage+')'; if( currentText ){ document.getElementById('ondertext').innerHTML = currentText; }else{ document.getElementById('ondertext').innerHTML = ''; } setTimeout("RunTheSlideShow("+p_RunSlideShowNr+",'"+p_slideShowDiv+"', "+p_displaySecs+" )",200); break; case 'next': document.getElementById(p_slideShowDiv).style.backgroundImage = 'url('+nextImage+')'; document.getElementById(p_slideShowDiv).style.backgroundImage = 'url('+currentImage+')'; if( nextText ){ document.getElementById('ondertext').innerHTML = nextText; }else{ document.getElementById('ondertext').innerHTML = ''; } setTimeout("RunTheSlideShow("+p_RunSlideShowNr+",'"+p_slideShowDiv+"', "+p_displaySecs+" )",200); break; case 'nextdirect': g_SHOWnextPicture='no'; document.getElementById(p_slideShowDiv).style.backgroundImage = 'url('+nextImage+')'; if( nextText ){ document.getElementById('ondertext').innerHTML = nextText; }else{ document.getElementById('ondertext').innerHTML = ''; } RunTheSlideShow( p_RunSlideShowNr, p_slideShowDiv, p_displaySecs ); break; case 'prev': document.getElementById(p_slideShowDiv).style.backgroundImage = 'url('+prevImage+')'; if( prevText ){ document.getElementById('ondertext').innerHTML = prevText; }else{ document.getElementById('ondertext').innerHTML = ''; } setTimeout("RunTheSlideShow("+p_RunSlideShowNr+",'"+p_slideShowDiv+"',"+p_displaySecs+" )",200); break; case 'prevdirect': g_SHOWprevPicture='no'; document.getElementById(p_slideShowDiv).style.backgroundImage = 'url('+prevImage+')'; if( prevText ){ document.getElementById('ondertext').innerHTML = prevText; }else{ document.getElementById('ondertext').innerHTML = ''; } RunTheSlideShow( p_RunSlideShowNr, p_slideShowDiv, p_displaySecs ); break; } } function ToggleSlideShow( ){ g_SHOWprevPicture = 'no'; g_SHOWnextPicture = 'no'; SetondertextHELPhidden(); if( g_stopslideshow=='yes' ){ g_stopslideshow='no'; document.getElementById('slideshowtext').innerHTML='PLAY slideshow'; document.getElementById('slide').src='images/play.png'; setTimeout('SetondertextPLAYhidden()',900); // scrolls every 100 milliseconds }else{ g_stopslideshow='yes'; document.getElementById('slideshowtext').innerHTML='STOP slideshow'; document.getElementById('slide').src='images/stop.png'; setTimeout('SetondertextSTOPhidden()',900); // scrolls every 100 milliseconds } setTimeout("document.getElementById('slide').src='images/leeg.gif';",1500); } function GoToNextPicture( ){ g_stopslideshow='yes'; g_SHOWnextPicture = 'yes'; document.getElementById('nextpic').src='images/next.png'; } function GoToPrevPicture( ){ g_stopslideshow='yes'; g_SHOWprevPicture = 'yes'; document.getElementById('prevpic').src='images/prev.png'; } function PlayAnotherSlideshow( p_ProjectNr, p_stopvalue ){ g_stopslideshow = p_stopvalue; g_SHOWcurrentPicture = 'yes'; g_NrOfPictureToPlay=0; g_ProjectNr=p_ProjectNr; } //first, tell the browsers to react to the event if( document.captureEvents && Event.KEYUP ) { //remove this part if you do not need Netscape 4 to work document.captureEvents( Event.KEYUP ); } /* this next line tells the browser to detect a keyup event over the whole document and when it detects it, it should run the event handler function 'alertkey' */ document.onkeyup = alertkey; //now create the event handler function to process the event function alertkey(e) { if( !e ) { //if the browser did not pass the event information to the //function, we will have to obtain it from the event register if( window.event ) { //Internet Explorer e = window.event; } else { //total failure, we have no way of referencing the event return; } } if( typeof( e.keyCode ) == 'number' ) { //DOM e = e.keyCode; } else if( typeof( e.which ) == 'number' ) { //NS 4 compatible e = e.which; } else if( typeof( e.charCode ) == 'number' ) { //also NS 6+, Mozilla 0.9+ e = e.charCode; } else { //total failure, we have no way of obtaining the key code return; } var dKeyNr = e; //console.debug( "key " + dKeyNr + " '" + String.fromCharCode(e) + "' ingetoetst" ); if( e == 27 ){ // Esc key window.close(); } if( e == 32 || e == 61 ){ // spatie of key g_SHOWprevPicture = 'no'; g_SHOWnextPicture = 'no'; SetondertextHELPhidden(); if( g_stopslideshow=='yes' ){ g_stopslideshow='no'; document.getElementById('slideshowtext').innerHTML='PLAY slideshow'; setTimeout('SetondertextPLAYhidden()',900); }else{ g_stopslideshow='yes'; document.getElementById('slideshowtext').innerHTML='STOP slideshow'; setTimeout('SetondertextSTOPhidden()',900); } } if( e == 72 ){ // h key document.getElementById('slideshowtext').innerHTML='space PLAY/STOP --> PREVIOUS <-- NEXT'; setTimeout('SetondertextHELPhidden()',6000); } if( e == 188 || e == 37 ){ //alert('That\'s the < key'); SetondertextHELPhidden(); GoToPrevPicture(); } if( e == 190 || e == 39 || e == 13 ){ //alert('That\'s the > key'); SetondertextHELPhidden(); GoToNextPicture(); } //window.alert('The key pressed has keycode ' + e + ' and is charcode= ' + String.fromCharCode( e ) + 'which=' + e.which ); } function SetondertextPLAYhidden(){ document.getElementById('slideshowtext').innerHTML=''; } function SetondertextSTOPhidden(){ document.getElementById('slideshowtext').innerHTML=''; } function SetondertextHELPhidden(){ document.getElementById('slideshowtext').innerHTML=''; } function SetSlideshowInfo(){ document.getElementById('slideshowtext').innerHTML='Toets H voor slideshow opties '; setTimeout("SetSlideshowInfo()",7*1000); } function PreloadNextImages( p_ProjectNr, p_PictureNr, p_Number ){ var cachePicture; for ( var i=0; i