"; //document.write(pictures[i].width+", "+pictures[i].height+"
"); //document.write("
' +
'LOADING'+
'
';
// load 5 photos complete or pictures.length complete, whichever is smaller
for (i = 0; i < pictures.length && i < 5; i++)
{
pcomplete = pictures[i].photo.complete;
if (pcomplete)
document.getElementById('bar').innerHTML = ''; } if (!pcomplete) { setTimeout("init_show()", 10); return; } // Now create the IMG picture and picture2 inside the pictureholder DIV document.getElementById('pictureholder').innerHTML='
"); } // end function setup_functions() function set_opacity(object, level) { // The "object" is usally picture, picture2 // or photo or photo2 // the level is 0 (transparent) to 100 (opaque) if(ie) { // first create a filter document.getElementById(object).style.filter="alpha(opacity="+level+")"; // then set the opacity //document.getElementById(object).filters.alpha.opacity = level; } else // mozilla or netscape { // Netscape has a bug where it flickers at 100% opacity // so we will change 100 to 99.999% if (level == 100) level = 99.999; // set the opacity for firefox and netscape document.getElementById(object).style.MozOpacity = level/100; // set the opacity for safari prior to 1.2 document.getElementById(object).style.KHTMLOpacity = level/100; // set the opacity for safari 1.2 and higher and newer firefox document.getElementById(object).style.opacity = level/100; } } // end function set_opacity function crossfade(opacity) { if (document.getElementById) { if (opacity <= 100) { set_opacity('picture2', opacity); set_opacity('picture', 100 - opacity); opacity += 10; window.setTimeout("crossfade("+opacity+")", trans_time); } else { // I had to put half the seconds here and load the image // early in order to prevent a flicker in IE when // on a web server //center_image('picture2'); //document.getElementById('picture').src = pictures[cur_pic].photo.src; setTimeout('changepic();', trans_time); } } } // end function crossfade(objID, opacity) function wipe(amount, from) { pwidth = document.getElementById('picture2').width; pheight = document.getElementById('picture2').height; xstep = pwidth / trans_amount * amount; ystep = pheight / trans_amount * amount; if (from == "left") { // clip by rect(top, right, bottom, left) document.getElementById('picture2').style.clip = 'rect(' + '0px, ' + Math.round(0+xstep) + 'px, ' + pheight + 'px, ' + '0px)'; } else if (from == "right") { // clip by rect(top, right, bottom, left) document.getElementById('picture2').style.clip = 'rect(' + '0px, ' + pwidth + 'px, ' + pheight + 'px, ' + Math.round(pwidth-xstep) + 'px)'; } else if (from == "top") { // clip by rect(top, right, bottom, left) document.getElementById('picture2').style.clip = 'rect(' + '0px, ' + pwidth + 'px, ' + Math.round(ystep) + 'px, ' + '0px)'; } else if (from == "bottom") { // clip by rect(top, right, bottom, left) document.getElementById('picture2').style.clip = 'rect(' + Math.round(pheight-ystep) + 'px, ' + pwidth + 'px, ' + pheight + 'px, ' + '0px)'; } else // if center or none specified { xcenter = pwidth / 2; // so 640 / 2 = 320 ycenter = pheight / 2; // so 480 / 2 = 240 xstep = xcenter / trans_amount * amount; ystep = ycenter / trans_amount * amount; // clip by rect(top, right, bottom, left) document.getElementById('picture2').style.clip = 'rect(' + Math.round(ycenter-ystep) + 'px, ' + Math.round(xcenter+xstep) + 'px, ' + Math.round(ycenter+ystep) + 'px, ' + Math.round(xcenter-xstep) + 'px)'; } if (amount == 1) set_opacity('picture2', 100); amount++; if (amount < trans_amount) window.setTimeout("wipe("+amount+", '"+from+"');", trans_time); else { // reset clip document.getElementById('picture2').style.clip = 'rect(auto, auto, auto, auto)'; // I had to put half the seconds here and load the image // early in order to prevent a flicker in IE when // on a web server //document.getElementById('picture').src = pictures[cur_pic].photo.src; setTimeout('changepic();', trans_time); } } // end function wipe(amount, from) function zoomin(amount, to) // this function is a photo effect { if (amount == 0) { zwidth = document.getElementById('picture').width; zheight = document.getElementById('picture').height; //testing.innerHTML = zwidth+", "+zheight; // Calculate slope. // Steps will be 1 each unless width is bigger than height // or height is bigger than width. If that is the case // then the step for the bigger dimension will be the slope (ex: zwidth / zheight) // the 2 and the *2 is to make each step twice as big zxstep = 3; zystep = 3; if (zwidth > zheight) zxstep = (zwidth / zheight)*3; if (zheight > zwidth) zystep = (zheight / zwidth)*3; } zwidth = zwidth + zxstep; zheight = zheight + zystep; //document.getElementById('testing').innerHTML = "xstep="+zxstep+", ystep="+zystep; document.getElementById('picture').width = zwidth; document.getElementById('picture').height = zheight; zzleft = parseFloat(document.getElementById('picture').style.left); zztop = parseFloat(document.getElementById('picture').style.top); //document.getElementById('testing').innerHTML = "left="+zleft+", top="+ztop; // Untouched is upperleft if (to == "upperright" || to == "right" || to == "lowerright") document.getElementById('picture').style.left = zzleft - zxstep + 'px'; if (to == "top" || to == "bottom" || to == "center") document.getElementById('picture').style.left = zzleft - zxstep/2 + 'px'; if (to == "lowerleft" || to == "bottom" || to == "lowerright") document.getElementById('picture').style.top = zztop - zystep + 'px'; if (to == "left" || to == "center" || to == "right") document.getElementById('picture').style.top = zztop - zystep/2 + 'px'; amount++; //if (amount == 30) alert('hi'); if (amount <= effect_amount) ztimer = window.setTimeout("zoomin("+amount+", '"+to+"');", effect_time); else { // reset left and top of picture //document.getElementById('picture').style.left = 0 + 'px'; //document.getElementById('picture').style.top = 0 + 'px'; } } // end function zoomin(amount, to) function effectsetup() { //testing.innerHTML = document.getElementById('picture2').width+", "+ // document.getElementById('picture2').height; //testing.innerHTML += ". "+pictures[cur_pic].photo.width+", "+pictures[cur_pic].photo.height; ftype = pictures[cur_pic].effect.replace(/['">);']/gi, ""); // ex: slide(left foption = ftype.split('(0, '); // ex: slide / left if (foption[1]) to = foption[1]; else to = ""; if (foption[0] == "zoomout") { document.getElementById('picture2').width = parseFloat(document.getElementById('picture2').width*2); document.getElementById('picture2').height = parseFloat(document.getElementById('picture2').height*2); // center enlarged image cwidth = parseFloat(document.getElementById('picture2').width*2); cheight = parseFloat(document.getElementById('picture2').height*2); ztop = 0; zleft = 0; // no to is upperleft if (to == "upperright" || to == "right" || to == "lowerright") zleft = (cwidth/4) * -1; // to get negative of the positive number if (to == "top" || to == "bottom" || to == "center") zleft = (cwidth/8) * -1; if (to == "lowerleft" || to == "bottom" || to == "lowerright") ztop = (cheight/4) * -1; if (to == "left" || to == "center" || to == "right") ztop = (cheight/8) * -1; cleft = cleft + zleft; ctop = ctop + ztop; document.getElementById('picture2').style.top = ctop + 'px'; document.getElementById('picture2').style.left = cleft + 'px'; ztop = ctop; zleft = cleft; } // end if zoomout if (foption[0] == "pan") { document.getElementById('picture2').width = parseFloat(document.getElementById('picture2').width*pan_zoom); document.getElementById('picture2').height = parseFloat(document.getElementById('picture2').height*pan_zoom); // center enlarged image cwidth = parseFloat(document.getElementById('picture2').width*pan_zoom); cheight = parseFloat(document.getElementById('picture2').height*pan_zoom); ztop = 0; zleft = 0; // no to is upperleft if (to == "upperright" || to == "right" || to == "lowerright") zleft = (cwidth/4) * -1; // to get negative of the positive number if (to == "top" || to == "bottom" || to == "center") zleft = (cwidth/8) * -1; if (to == "lowerleft" || to == "bottom" || to == "lowerright") ztop = (cheight/4) * -1; if (to == "left" || to == "center" || to == "right") ztop = (cheight/8) * -1; cleft = cleft + zleft; ctop = ctop + ztop; document.getElementById('picture2').style.top = ctop + 'px'; document.getElementById('picture2').style.left = cleft + 'px'; ztop = ctop; zleft = cleft; } // end if pan } // end function effectsetup() function zoomout(amount, to) // this function is a photo effect { if (amount == 0) { //zwidth = document.getElementById('picture').width; //zheight = document.getElementById('picture').height; //zwidth = pictures[cur_pic].photo.width*2; //zheight = pictures[cur_pic].photo.height*2; // center enlarged image zwidth = parseFloat(document.getElementById('picture').width*2); zheight = parseFloat(document.getElementById('picture').height*2); //zleft = (phwidth - zwidth) / 2; //document.getElementById('picture').style.left = zleft; /* //if (to == "upperright" || to == "right" || to == "lowerright") zleft = (zwidth/2) * -1; // to get negative of the positive number if (to == "top" || to == "bottom" || to == "center") zleft = (zwidth/4) * -1; //if (to == "lowerleft" || to == "bottom" || to == "lowerright") ztop = (zheight/2) * -1; if (to == "left" || to == "center" || to == "right") ztop = (zheight/4) * -1; */ document.getElementById('picture').style.top = ztop + 'px'; document.getElementById('picture').style.left = zleft + 'px'; //ztop = ctop; //zleft = cleft; // testingbox.innerHTML = zwidth+', '+zheight+", "+to; //document.getElementById('testing').innerHTML = "width="+zwidth+", height="+zheight; // Calculate slope. // Steps will be 3 each unless width is bigger than height // or height is bigger than width. If that is the case // then the step for the bigger dimension will be the slope (ex: zwidth / zheight)*3 // the 3 and the *3 is to make each step twice as big zxstep = 3; zystep = 3; if (zwidth > zheight) zxstep = (zwidth / zheight)*3; if (zheight > zwidth) zystep = (zheight / zwidth)*3; //document.getElementById('picture').width = zwidth*2; //document.getElementById('picture').height = zheight*2; } zwidth = zwidth - zxstep; zheight = zheight - zystep; document.getElementById('picture').width = zwidth; document.getElementById('picture').height = zheight; zzleft = parseFloat(document.getElementById('picture').style.left); zztop = parseFloat(document.getElementById('picture').style.top); //testingbox.innerHTML = zzleft+', '+zztop; // Untouched is upperleft if (to == "upperright" || to == "right" || to == "lowerright") document.getElementById('picture').style.left = zzleft + zxstep + 'px'; if (to == "top" || to == "bottom" || to == "center") document.getElementById('picture').style.left = zzleft + zxstep/2 + 'px'; if (to == "lowerleft" || to == "bottom" || to == "lowerright") document.getElementById('picture').style.top = zztop + zystep + 'px'; if (to == "left" || to == "center" || to == "right") document.getElementById('picture').style.top = zztop + zystep/2 + 'px'; amount++; //if (amount == 30) alert('hi'); if (amount <= effect_amount) ztimer = window.setTimeout("zoomout("+amount+", '"+to+"');", effect_time); else { // reset left and top of picture //document.getElementById('picture').style.left = 0; //document.getElementById('picture').style.top = 0; //center_image('picture'); } } // end function zoomout(amount, to) function pan(amount, to) // This is a photo effect { if (amount == 0) { //zwidth = document.getElementById('picture').width; //zheight = document.getElementById('picture').height; //zwidth = pictures[cur_pic].photo.width*2; //zheight = pictures[cur_pic].photo.height*2; // center enlarged image zwidth = parseFloat(document.getElementById('picture').width*pan_zoom); zheight = parseFloat(document.getElementById('picture').height*pan_zoom); document.getElementById('picture').width = zwidth; document.getElementById('picture').height = zheight; //zleft = (phwidth - zwidth) / 2; //document.getElementById('picture').style.left = zleft; /* //if (to == "upperright" || to == "right" || to == "lowerright") zleft = (zwidth/2) * -1; // to get negative of the positive number if (to == "top" || to == "bottom" || to == "center") zleft = (zwidth/4) * -1; //if (to == "lowerleft" || to == "bottom" || to == "lowerright") ztop = (zheight/2) * -1; if (to == "left" || to == "center" || to == "right") ztop = (zheight/4) * -1; */ document.getElementById('picture').style.top = ztop + 'px'; document.getElementById('picture').style.left = zleft + 'px'; //ztop = ctop; //zleft = cleft; //testingbox.innerHTML = zwidth+', '+zheight+", "+to; //document.getElementById('testing').innerHTML = "width="+zwidth+", height="+zheight; // Calculate slope. // Steps will be 3 each unless width is bigger than height // or height is bigger than width. If that is the case // then the step for the bigger dimension will be the slope (ex: zwidth / zheight)*3 // the 2 and the *2 is to make each step twice as big zxstep = 1; zystep = 1; if (zwidth > zheight) zxstep = (zwidth / zheight); if (zheight > zwidth) zystep = (zheight / zwidth); //document.getElementById('picture').width = zwidth*2; //document.getElementById('picture').height = zheight*2; } /*zwidth = zwidth - zxstep; zheight = zheight - zystep; */ zzleft = parseFloat(document.getElementById('picture').style.left); zztop = parseFloat(document.getElementById('picture').style.top); //testingbox.innerHTML = zzleft+', '+zztop; // There is no center in pan if (to == "upperright" || to == "right" || to == "lowerright") document.getElementById('picture').style.left = zzleft + zxstep + 'px'; if (to == "upperleft" || to == "left" || to == "lowerleft") document.getElementById('picture').style.left = zzleft - zxstep + 'px'; if (to == "lowerleft" || to == "bottom" || to == "lowerright") document.getElementById('picture').style.top = zztop + zystep + 'px'; if (to == "upperleft" || to == "top" || to == "upperright") document.getElementById('picture').style.top = zztop - zystep + 'px'; amount++; //if (amount == 30) alert('hi'); if (amount <= effect_amount) ztimer = window.setTimeout("pan("+amount+", '"+to+"');", effect_time); } // end function pan(amount, from) function zoom(amount, from) // This function is a transition { pcomplete = document.getElementById('picture2').complete; // i need the if statement below for mozilla firefox // browsers and netscape browsers. They don't know // the width of the height of an image until it // completes loading, so I can't zoom in at the // correct size. (It sets size to 24x24). So I use // the .complete element to see if the photo has loaded. if (!pcomplete) // if photo hasn't finished loading { // call this function again in 100ms // to see if the photo completes loading setTimeout('zoom(0,"'+from+'")', 100); return; // exit this function } if (amount == 0) { pwidth = document.getElementById('picture2').width; pheight = document.getElementById('picture2').height; //pwidth = pictures[cur_pic].photo.width; //pheight = pictures[cur_pic].photo.height; set_opacity('picture2', 100); } //document.getElementById('testing').innerHTML = "width="+pwidth+", height="+pheight; xstep = pwidth / trans_amount * amount; ystep = pheight / trans_amount * amount; document.getElementById('picture2').width = xstep; document.getElementById('picture2').height = ystep; // uppperleft is not moving the top or left at all if (from == "left" || from == "center" || from == "right") document.getElementById('picture2').style.top = (pheight+ctop) / 2 - (ystep-ctop) / 2 + 'px'; if (from == "top" || from == "center" || from =="bottom") document.getElementById('picture2').style.left = (pwidth+cleft) / 2 - (xstep-cleft) / 2 + 'px'; if (from == "lowerleft" || from == "lowerright" || from=="bottom") document.getElementById('picture2').style.top = (pheight+ctop) - ystep + 'px'; if (from == "upperright" || from == "lowerright" || from=="right") document.getElementById('picture2').style.left = (pwidth+cleft) - xstep + 'px'; amount++; if (amount <= trans_amount) window.setTimeout("zoom("+amount+", '"+from+"');", trans_time); else { // I had to put half the seconds here and load the image // early in order to prevent a flicker in IE when // on a web server //center_image('picture'); //document.getElementById('picture').src = pictures[cur_pic].photo.src; setTimeout('changepic();', trans_time); } } // end function zoom(amount, from) function slide(amount, from) { pwidth = document.getElementById('picture2').width; pheight = document.getElementById('picture2').height; if (from == null || from == 'undefined') from = 'left'; //document.getElementById('testing').innerHTML = "Hi "+amount+", "+from; if (from == "left" || from == "lowerleft" || from == "upperleft") { xstep = Math.round((pwidth+cleft) / trans_amount * amount); xstep = pwidth - (pwidth*2) + xstep; //document.getElementById('testing').innerHTML = xstep; document.getElementById('picture2').style.left = xstep + 'px'; } else if (from == "right" || from == "lowerright" || from == "upperright") { xstep = Math.round((pwidth-cleft) / trans_amount * amount); xstep = pwidth - xstep; //document.getElementById('testing').innerHTML = xstep; document.getElementById('picture2').style.left = xstep + 'px'; } if (from == "top" || from == "upperleft" || from == "upperright") { ystep = Math.round((pheight+ctop) / trans_amount * amount); ystep = pheight - (pheight*2) + ystep; //document.getElementById('testing').innerHTML = ystep; document.getElementById('picture2').style.top = ystep + 'px'; } else if (from == "bottom" || from == "lowerleft" || from == "lowerright") { ystep = Math.round((pheight-ctop) / trans_amount * amount); ystep = pheight - ystep; //document.getElementById('testing').innerHTML = ystep; document.getElementById('picture2').style.top = ystep + 'px'; } if (amount == 0) set_opacity('picture2', 100); amount++; if (amount <= trans_amount) window.setTimeout("slide("+amount+", '"+from+"');", trans_time); else { // I had to put half the seconds here and load the image // early in order to prevent a flicker in IE when // on a web server //document.getElementById('picture').src = pictures[cur_pic].photo.src; setTimeout('changepic();', trans_time); } } // end function slide(0, from) function change_url() { /* set onclick of img to url 'where' */ /* Added 7/26/10 */ if (cur_pic == 0) pic_num = pictures.length - 1; else pic_num = cur_pic - 1; if (pictures[pic_num].url != '') window.location=pictures[pic_num].url; } // end function change_url(where) function changepic() { var pictures_length = pictures.length; if (testing_mode == 1) testingbox.innerHTML = cur_pic+". Transition: "+pictures[cur_pic].trans+". Effect: "+pictures[cur_pic].effect+ ". Time: "+pictures[cur_pic].time; ". Width:"+document.getElementById('picture').width+", "+document.getElementById('picture').height; var milliseconds = pictures[cur_pic].time; if (display_caption == 1) // display Picasa Description for current photo document.getElementById('captionholder').innerHTML = pictures[cur_pic].caption; clearTimeout(ztimer); document.getElementById('picture').src = pictures[cur_pic].photo.src; document.getElementById('picture').width = pictures[cur_pic].photo.width; document.getElementById('picture').height = pictures[cur_pic].photo.height; document.getElementById('picture').style.left = 0 + 'px'; document.getElementById('picture').style.top = 0 + 'px'; // 7/26/10 document.getElementById('pictureholder').title = pictures[cur_pic].url; center_image('picture'); if (testing_mode == 1) testingbox.innerHTML += ". Width:"+document.getElementById('picture').width+ ", "+document.getElementById('picture').height; // make sure picture is 100% opaque setTimeout("set_opacity('picture',100);", opacity_time) // this is what causes the flicker in IE // set opacity of picture2 to invisible setTimeout("set_opacity('picture2',0);", opacity_time) // this is what causes the flicker in IE // Call effect function //testing.innerHTML = eval('(typeof('+pictures[cur_pic].effect+'));'); // != "undefined");'); eval(pictures[cur_pic].effect); if (testing_mode == 1) // 7/26/10 testingbox.innerHTML += ". url="+pictures[cur_pic].url; cur_pic++; // advance to next picture if (cur_pic == pictures_length) { cur_pic = 0; if (randomize_photos == 1) shuffle_photos(); //setup_functions(); // to randomize the transitions and effects again } // preload next image // if (cur_pic < pictures_length) // img.src = pictures[cur_pic].photo; //else // img.src = pictures[0]; // I had to put a settimeout here and load the image // later in order to prevent a flicker of the next photo // in IE and sometimes firefox // put next photo in IMG with ID 'picture2' but it will be invisible setTimeout("document.getElementById('picture2').src = pictures["+cur_pic+"].photo.src;", flicker_time); setTimeout("document.getElementById('picture2').width = pictures["+cur_pic+"].photo.width;", flicker_time+20); setTimeout("document.getElementById('picture2').height = pictures["+cur_pic+"].photo.height;", flicker_time+20); setTimeout("document.getElementById('picture2').style.left = 0 + 'px';", flicker_time+20); setTimeout("document.getElementById('picture2').style.top = 0 + 'px';", flicker_time+20); setTimeout('center_image("picture2");', flicker_time+50); // testing for zoomout(0) setTimeout('effectsetup();', flicker_time+100); // call transition function in duration 'seconds' setTimeout(pictures[cur_pic].trans, milliseconds); //window.setTimeout("zoom(0);", seconds); //window.setTimeout("zoom(0, 'upperright');", seconds); //window.setTimeout("wipe(0, 'bottom');", seconds); //window.setTimeout("slide(0, 'top');", seconds); } // end function changepic(direction) // first create a testing div to write messages if (testing_mode == 1) { document.write('
testing Mode
');
testingbox = document.getElementById('testing');
}
/* both fore and back pictures have to be positioned absolute */
/* inside a relative div */
/* Both have classes, 'pictureholder' and 'picture' respectively */
/* so you can create these classes and add borders or whatever */
/* We create the relative IMG's in loadpics */
// So first we create the relative DIV
document.write('');
// Close the pictureholder DIV
document.write('
');
// Make caption below pictureholder
if (display_caption == 1)
document.write('');
// The line below starts the loadpics function
window.onload = loadpics; // get list of pics and put in pictures array
//loadpics();