var $filename = new Array(); var $header = new Array(); //Displayed above image var $caption = new Array(); //Displayed below image var $options = new Array(); //pan scrollup scrolldown zoomin zoomout starttime=00:00:00.0 volume=.5 fadeaudio rate=4 (play x times faster) var $soundname = new Array(); //sound will play until finished or new sound requested or show ends or FadeAudio requested var $date = new Array(); var $aspect = 1; //Height/Width read from file info var $choice=0; //selected item in $filename var $showfilenames=0; //toggle var $label=''; //used to construct temporary label display ($caption plus $filename plus $option) var $opt=''; //used to remember original options, modified by keyboard var $dur=2; //default seconds for autoplay slides var $number=0; //slide number entered from keyboard and return var $play=0; //autoplay toggle var $fade=0; //transition between images var $autoplay=''; //toggle var $pantime=$dur; //duration (seconds) for each slide when autoplay $i=0; $filename[$i]='shows/black.jpg'; //$filename[$i]='shows/controls.jpg'; $header[$i]=window.location.pathname.split('/').slice(-1)[0]; //get url filename $header[$i]=decodeURIComponent($header[$i].split('.')[0]); //remove %20 and the file type $header[$i]='
'+$header[$i]+'
'; //use filename as header for first slide if (location.search.length>1) // show.html?search to start at specified slide { $choice = location.search.substring(1); } else { $choice = 0; } if (document.captureEvents) document.captureEvents(Event.KEYDOWN); //KEYPRESS does not see arrows document.onkeydown = processKeypresses; function backward() { if ($choice>0) { $choice-- } else { audioend(); $choice=$numberoffiles-1; } var image1 = new Image(); image1.src = '../'+$filename[$choice]; //cache image1.onload=function() { $aspect=image1.naturalHeight/image1.naturalWidth; insertpicture($choice); } } function forward() { if ($choice<$numberoffiles-1) { $choice++ } else { audioend(); $choice = 0; } var image1 = new Image(); image1.src = '../'+$filename[$choice]; //cache image1.onload=function() { $aspect=image1.naturalHeight/image1.naturalWidth; insertpicture($choice); } } function myplay() { forward(); if ($filename[$choice].toLowerCase().indexOf(".mp4") !=-1 || $filename[$choice].toLowerCase().indexOf(".mov") !=-1) //file is a movie, case insensitive { // wait for eventListener to signal video ended } else if ($options[$choice] && ($options[$choice].indexOf("pan") != -1 || $options[$choice].indexOf("scroll") != -1 || $options[$choice].indexOf("zoom") != -1) ) { // wait for eventListener to signal pan ended } else { $rate=1; if ($options[$choice] && $options[$choice].indexOf("rate=") != -1) { $rate=$options[$choice].split("rate=")[1]; //portion that follows rate= $rate=$rate.split(" ")[0]; //up to next blank } $autoplay = setTimeout(function(){ myplay() }, $dur*1000/$rate); //http://weblogs.asp.net/bleroy/setinterval-is-moderately-evil } } function videoended(e) { if(!e) {e = window.event;} if($play==1) {$autoplay = setTimeout(function(){ myplay() }, $dur*1000/2);} } function audioend(){document.getElementById('audioframe').innerHTML='';} function fullscreen() { //stackoverflow.com/questions/36672561/how-to-exit-fullscreen-onclick-using-javascript var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) || (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) || (document.mozFullScreenElement && document.mozFullScreenElement !== null) || (document.msFullscreenElement && document.msFullscreenElement !== null); var docElm = document.documentElement; if (!isInFullScreen) { if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } else if (docElm.msRequestFullscreen) { docElm.msRequestFullscreen(); } } else { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } } function processKeypresses(e) { if(navigator.appName == "Netscape") k = e.which; // key's ASCII code (Netscape and Mozilla and Safari) else k=event.keyCode; // key's ASCII code (IE and Opera) if (k==13) {$choice=$number-1;$number=0; forward();} //return if (k==27) window.location.assign("index.html"); //{$choice=0; insertpicture($choice);} //esc if (k==32) forward(); // space if (k==33) backward(); // page up if (k==34) forward(); // page down if (k==37) backward(); // arrow left if (k==38) backward(); // arrow up if (k==39) forward(); // arrow right if (k==40) forward(); // arrow down if (k==65) {clearTimeout($autoplay); $play=1; myplay();} //a if (k==68) $dur = prompt("Time interval duration (seconds)",$dur); //d if (k==70) {$showfilenames=1-$showfilenames; insertpicture($choice);} //f if (k==71) fullscreen(); //g if (k==72) $fade=1-$fade; //h if (k==79) {window.open('../'+$filename[$choice]);} //o open image in new window with magnifying cursor if (k==83) {clearTimeout($autoplay); $play=0;} //s //if (k==90) {$opt=$options[$choice]; $options[$choice]="zoomin"; insertpicture($choice); $options[$choice]=$opt;} //z if (k==188) backward(); //, lower case < if (k==190) forward(); //. lower case > if (k>=48 && k<=57) $number=k-48+10*$number; if (k!=27) {return false; } // cancel event otherwise } function insertpicture(n) { // scroll(0,0); //scroll back to top of page $myoptions=''; if ($options[n]) $myoptions=$options[n]; // www.geekpedia.com/code100_Get-window-width-and-height.html var $x=0; var $y=0; if (self.innerHeight) // all except Explorer { $x=self.innerWidth; $y=self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) //Explorer 6 strict mode { $x=document.documentElement.clientWidth; $y=document.documentElement.clientHeight; } else if (document.body) // other Explorers { $x=document.body.clientWidth; $y=document.body.clientHeight; } // Set base font size relative to window size var P = Math.sqrt ($x*$x+$y*$y); P = Math.floor (8+P/125); document.body.style.fontSize = P + 'px'; // alert(" "+P); if (!$aspect>0) {$aspect=1;} //aspect value not set $label=''; if ($caption[n]) {$label="  "+$caption[n];} if ($showfilenames==1) { $label="  "+n+"  "+$filename[n]+$label; if ($myoptions.indexOf("pan") != -1) {$label=$label+"  panorama";} if ($myoptions.indexOf("scroll") != -1) {$label=$label+"  scroll";} if ($myoptions.indexOf("zoom") != -1) {$label=$label+"  zoom";} if (n==0) {$label="  "+$numberoffiles+" slides";} } if ($date[n]) $label=$label+" "+$date[n]; if ($label!="") {$y = $y - 1.4*P;} //leave space if ($label.length>150) {$y = $y - 1.4*P;} //leave space if ($label.length>300) {$y = $y - 1.4*P;} //leave space if ($header[n]) {$y = $y - 1.2*P;} //leave space $width= $x; if ($myoptions.indexOf("scroll") == -1 && $width*$aspect > $y || $myoptions.indexOf("pan") != -1) {$width=$y/$aspect;} //make height full screen $code='
'; if ($header[n]) {$code=$code+'
'+$header[n]+'
';} if($filename[n].toLowerCase().indexOf(".mp4") !=-1 || $filename[n].toLowerCase().indexOf(".mov") !=-1) //file is a movie, case insensitive { audioend(); $code=$code+''; } else { if ($myoptions.indexOf("pan") != -1) //stackoverflow.com/questions/18481550/how-to-dynamically-create-keyframe-css-animations { $pan= (1-$width/$x)*100; $pantime=3*$dur*$width/$x; var style = document.createElement('style'); style.type = 'text/css'; var keyFrames = '\ .panwindow {position: relative; animation: panleft '+$pantime+'s linear; animation-fill-mode: forwards;}\ @keyframes panleft {\ from { transform: translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); }\ 10% { transform: translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); }\ 95% { transform: translate3d('+$pan+'%,0,0); -webkit-transform:translate3d('+$pan+'%,0,0); -ms-transform:translate3d('+$pan+'%,0,0); }\ to { transform: translate3d('+$pan+'%,0,0); -webkit-transform:translate3d('+$pan+'%,0,0); -ms-transform:translate3d('+$pan+'%,0,0); }\ }'; style.innerHTML = keyFrames; document.getElementsByTagName('html')[0].appendChild(style); $code=$code+'
'; } else if ($myoptions.indexOf("scrollup") != -1) { $pan= (1-$y/$width/$aspect)*100; $pantime=2*$dur*$width/$y*$aspect; var style = document.createElement('style'); style.type = 'text/css'; var keyFrames = '\ .panwindow {position: relative; animation: panup '+$pantime+'s linear; animation-fill-mode: forwards;}\ @keyframes panup {\ from { transform: translate3d(0,-'+$pan+'%,0); -webkit-transform:translate3d(0,-'+$pan+'%,0); -ms-transform:translate3d(0,-'+$pan+'%,0); }\ 10% { transform: translate3d(0,-'+$pan+'%,0); -webkit-transform:translate3d(0,-'+$pan+'%,0); -ms-transform:translate3d(0,-'+$pan+'%,0); }\ 95% { transform: translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); }\ to { transform: translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); }\ }'; style.innerHTML = keyFrames; document.getElementsByTagName('html')[0].appendChild(style); $code=$code+'
'; } else if ($myoptions.indexOf("scrolldown") != -1) { $pan= (1-$y/$width/$aspect)*100; $pantime=2*$dur*$width/$y*$aspect; var style = document.createElement('style'); style.type = 'text/css'; var keyFrames = '\ .panwindow {position: relative; animation: pandown '+$pantime+'s linear; animation-fill-mode: forwards;}\ @keyframes pandown {\ from { transform: translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); }\ 10% { transform: translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); }\ 95% { transform: translate3d(0,-'+$pan+'%,0); -webkit-transform:translate3d(0,-'+$pan+'%,0); -ms-transform:translate3d(0,-'+$pan+'%,0); }\ to { transform: translate3d(0,-'+$pan+'%,0); -webkit-transform:translate3d(0,-'+$pan+'%,0); -ms-transform:translate3d(0,-'+$pan+'%,0); }\ }'; style.innerHTML = keyFrames; document.getElementsByTagName('html')[0].appendChild(style); $code=$code+'
'; } else if ($myoptions.indexOf("zoomin") != -1) { $pan= (1-$y/$width/$aspect)*100; $pantime=2*$dur*$width/$y*$aspect; var style = document.createElement('style'); style.type = 'text/css'; var keyFrames = '\ .panwindow {position: relative; animation: zoomin '+$pantime+'s linear; animation-fill-mode: forwards;}\ @keyframes zoomin {\ from { transform: scale(1,1);}\ 10% { transform: scale(1,1);}\ 95% { transform: scale(2,2);}\ to { transform: scale(2,2);}\ }'; style.innerHTML = keyFrames; document.getElementsByTagName('html')[0].appendChild(style); $code=$code+'
'; } else if ($myoptions.indexOf("zoomout") != -1) { $pan= (1-$y/$width/$aspect)*100; $pantime=3*$dur*$width/$y*$aspect; var style = document.createElement('style'); style.type = 'text/css'; var keyFrames = '\ .panwindow {position: relative; animation: zoomout '+$pantime+'s linear; animation-fill-mode: forwards;}\ @keyframes zoomout {\ from { transform: scale(3,3);}\ 10% { transform: scale(3,3);}\ 95% { transform: scale(1,1);}\ to { transform: scale(1,1);}\ }'; style.innerHTML = keyFrames; document.getElementsByTagName('html')[0].appendChild(style); $code=$code+'
'; } $code=$code+''; if ($myoptions.indexOf("pan") != -1 || $myoptions.indexOf("scroll") != -1 || $myoptions.indexOf("zoom") != -1) $code=$code+'
'; } $code=$code+'
'+ $label+'
'; // alert(n+" "+$code); document.getElementById('pictureframe').innerHTML=$code; if ($filename[n].toLowerCase().indexOf(".mp4") !=-1 || $filename[n].toLowerCase().indexOf(".mov") !=-1) //file is a movie, case insensitive { document.getElementById('myVideo').addEventListener('ended',videoended,true); // stackoverflow.com/questions/2741493/how-do-you-detect-html5-video-events } if(typeof $soundname[n] !== 'undefined') { if ($soundname[n]=="stop") { audioend(); } else //play sound { document.getElementById('audioframe').innerHTML=''; document.getElementById('audioframe').addEventListener('ended', audioend, true); //hide audio controls when finished } } if ($myoptions.indexOf("fadeaudio") != -1) {FadeAudio("mysound");} if ($myoptions.indexOf("pan") != -1 || $myoptions.indexOf("scroll") != -1 || $myoptions.indexOf("zoom") != -1) { document.getElementById('mypan').addEventListener('webkitAnimationEnd',videoended); //www.w3schools.com/jsref/event_animationend.asp document.getElementById('mypan').addEventListener('animationend',videoended); } } function FadeAudio (audiosnippetId) { // to turn off sound, document.getElementById('audiosnippetId').volume = 0; // stackoverflow.com/questions/7451508/html5-audio-playback-with-fade-in-and-fade-out var sound = document.getElementById(audiosnippetId); var fadeAudio = setInterval(function () { //decrease volume if ((sound.volume != 0.0)) {sound.volume -= 0.1;} // alert(sound.volume); //when volume at zero stop decrease loop if (sound.volume < 0.1) {sound.pause(); sound.currentTime = 10000; clearInterval(fadeAudio);} }, 200); }