//--- InsiteWebsite.com -------------------
//--- gallery.js
//--- this covers gallery events;
window.onload = init;
function init() {
lowresResize();
//-- set up mouse events --
//document.getElementById('thumbtable').onmouseover = hideInstructions;
//document.getElementById('caption').innerHTML = "mouse over the buttons to change pictures >>";
document.getElementById('t01').onmouseover = viewImage;
document.getElementById('t02').onmouseover = viewImage;
document.getElementById('t03').onmouseover = viewImage;
document.getElementById('t04').onmouseover = viewImage;
document.getElementById('t05').onmouseover = viewImage;
document.getElementById('t06').onmouseover = viewImage;
document.getElementById('t07').onmouseover = viewImage;
document.getElementById('t08').onmouseover = viewImage;
document.getElementById('t09').onmouseover = viewImage;
document.getElementById('t10').onmouseover = viewImage;
document.getElementById('t11').onmouseover = viewImage;
document.getElementById('t12').onmouseover = viewImage;
/* document.getElementById('t01').onmouseout = gray01;
document.getElementById('t02').onmouseout = gray02;
document.getElementById('t03').onmouseout = gray03;
document.getElementById('t04').onmouseout = gray04;
document.getElementById('t05').onmouseout = gray05;
document.getElementById('t06').onmouseout = gray06;
document.getElementById('t07').onmouseout = gray07;
document.getElementById('t08').onmouseout = gray08;
document.getElementById('t09').onmouseout = gray09;
document.getElementById('t10').onmouseout = gray10;
document.getElementById('t11').onmouseout = gray11;
document.getElementById('t12').onmouseout = gray12; */
//document.getElementById('viewedimage').onmousedown = origImg;
origImg();
setTimeout('loadImages()',200);
writeUrl();
writeBookmarker();
//test();
setFooter();
bodyClass();
if (document.getElementById('addresstrigger')) {
document.getElementById('addresstrigger').onmouseover = changePseudolink;
}
}
window.onresize = function() {
setFooter();
}
function test() {
// x = document.getElementById('caption-file').getElementsByTagName("li");
// document.getElementById('testoutput').innerHTML = "First li text: " + x[0].innerHTML + "
" + "test";
// }
// document.getElementById('testoutput').innerHTML = gal + "
" + galimg;
alert(thisImageURL);
document.getElementById('caption').innerHTML = "testing 123";
}
//---- gallery scripts ---------------------------
//-- get passed variable from page ---
//-- var gal is defined on the page
//-- var galimg is defined on the page
//-- set script variables
//-- SET SITE URL
var mainurl = "http://" + window.location.host;
//-- Set friendly site name, i.e. Paul Solomon
var titlebase = "Kathleen Kemly";
//-- Set generic bookmark title, i.e. Product by Paul Solomon
var genericbookmarktitle = "Illustration by Kathleen Kemly";
//-- Set initial thisImageURL variable
var thisImageURL = mainurl;
// ------ preload first batch of images --------------------------------------------
arImageSrcOne = new Array (
"01",
"02",
"03",
"04"
);
arImageListOne = new Array ();
for (counter in arImageSrcOne) {
arImageListOne[counter] = new Image();
//arImageListOne[counter].src = arImageSrcOne[counter];
// if all images are the same type,
//arImageListOne[counter].src = arImageSrcOne[counter] + ".jpg";
// if all images are in the same directory and same type,
arImageListOne[counter].src = gal + arImageSrcOne[counter] + ".jpg";
}
//----------------------------
// ------ preload second batch of images --------------------------------------------
function loadImages() {
arMoreImageSrc = new Array (
"05",
"06",
"07",
"08",
"09",
"10",
"11",
"12"
);
arMoreImageList = new Array ();
for (counter in arMoreImageSrc) {
arMoreImageList[counter] = new Image();
//arMoreImageList[counter].src = arMoreImageSrc[counter];
// if all images are the same type,
//arMoreImageList[counter].src = arMoreImageSrc[counter] + ".jpg";
// if all images are in the same directory and same type,
arMoreImageList[counter].src = gal + arMoreImageSrc[counter] + ".jpg";
}
}
//----------------------------
function lowresResize() {
if ((screen.availHeight < 709)&&(galshort !="picture-books")) window.scrollTo(0,182);
else return false;
}
function hideInstructions() {
document.getElementById('thumbinstructions').style.display = "none";
}
/*
//-- For Drop Shadows,
//-- Create an array of all of the drop-shadow divs:
//-- (commented out if not using drop shadows)
arShadowDivWidths = new Array (
"document.getElementById('in1')",
"document.getElementById('in2')",
"document.getElementById('in3')",
"document.getElementById('in4')",
"document.getElementById('in5')",
"document.getElementById('in6')",
"document.getElementById('in7')",
"document.getElementById('in8')",
""
);
//-- append to each a width style, and then
//-- make it the width of the current large image ('imgwidth', defined later):
var joinedArShadowDivWidths = arShadowDivWidths.join(".style.width=imgwidth;\n");
*/
function viewImage() {
//-- set what style changes happen to the hovered-over element on mouseout:
function mouseAway() {
this.className = "selected0";
//this.style.borderColor = "gray";
//this.style.backgroundColor = "#f5f5f5";
//this.style.color = "gray";
}
//-- get the id of the hovered-over element:
var idOfThis = this.id;
//-- convert that into the jpeg file name for the large image
jpgFilename = idOfThis.replace(/t/,"")+".jpg";
//-- (alternatively: var jpgFilename = idThis.substr(1,2)+".jpg"; )
//-- convert that into the two-digit identifier for THIS
var identifierOfThis = idOfThis.replace(/t/,"");
//-- change the large image:
document.getElementById('viewedimage').src = gal+jpgFilename;
//-- change the style property(s) of the hovered-over element:
this.className = "selected1";
//this.style.borderColor = "#ffffff";
//this.style.backgroundColor = "#ffffff";
//this.style.color = "#000000";
//--For Drop Shadows
//--get the width of the current large image and make it into a useful variable:
//var imgwidth = document.getElementById('viewedimage').width+"px";
//-- set the width of the dropshadow divs:
//eval(joinedArShadowDivWidths);
this.onmouseout = mouseAway;
// If we are using captions,
// create an array of all the elements in the caption list
x = document.getElementById('caption-file').getElementsByTagName("li");
// correlate the identifierOfThis with the items in the array of s
// so that y will be the corresponding item in the array
if(identifierOfThis == "01"){
y = "0";
}else if(identifierOfThis == "02"){
y = "1";
} else if(identifierOfThis == "03"){
y = "2";
} else if(identifierOfThis == "04"){
y = "3";
} else if(identifierOfThis == "05"){
y = "4";
} else if(identifierOfThis == "06"){
y = "5";
} else if(identifierOfThis == "07"){
y = "6";
} else if(identifierOfThis == "08"){
y = "7";
} else if(identifierOfThis == "09"){
y = "8";
} else if(identifierOfThis == "10"){
y = "9";
} else if(identifierOfThis == "11"){
y = "10";
} else if(identifierOfThis == "12"){
y = "11";
} else {
y = "";
}
// create a "friendly" number (z) for each item
z = y;
z++;
numberedcaption = z + ": " + x[y].innerHTML;
shortcaption = x[y].innerHTML;
document.getElementById('caption').innerHTML = numberedcaption;
// next line for testing only
//document.getElementById('testoutput').innerHTML = z + " - " + x[y].innerHTML + "
" + identifierOfThis + "
" + y + "
" + z;
//-- write a custom url for This image into the html of the page
thisImageURL = mainurl + window.location.pathname + "?gal=" + galshort + "&galimg=" + jpgFilename;
document.getElementById('imageurl').innerHTML = thisImageURL;
document.getElementById('imageurl2').innerHTML = thisImageURL;
//-- write a custom 'Bookmark this picture' js call for This image into the html of the page*
document.getElementById('bookmarker').href = "javascript:bookmark(\'"+ thisImageURL + "\',\'" + titlebase + " | " + shortcaption.replace(/(<([^>]+)>)/ig,"") + "\')";
//-- write thisImageURL into the 'duplicate this window' link
document.getElementById('duplicator').href = thisImageURL;
//-- write a caption for inclusion in the email text*
document.getElementById('email-image-caption').innerHTML = " - \"" + shortcaption.replace(/(<([^>]+)>)/ig,"") + "\"";
document.getElementById('email-image-caption2').innerHTML = " - \"" + shortcaption.replace(/(<([^>]+)>)/ig,"") + "\"";
//-- change the page title to the caption*
document.title = numberedcaption.replace(/(<([^>]+)>)/ig,"") + " | Illustration by Kathleen Kemly";
return false;
}
function origImg() {
document.getElementById('viewedimage').src = galimg;
// var imgwidth = document.getElementById('viewedimage').width+"px";
//-- if drop shadows, use next line:
//eval(joinedArShadowDivWidths);
//-- for text rollovers, selects trigger of first image,
//-- if gallery opens with first image (next three lines)
//document.getElementById('t01').style.borderColor = "#ffffff";
//document.getElementById('t01').style.backgroundColor = "#ffffff";
//document.getElementById('t01').style.color = "#000000";
//document.getElementById('captions').style.top = "4em";
}
function writeUrl() {
document.getElementById('imageurl').innerHTML = window.location.href;
document.getElementById('imageurl2').innerHTML = window.location.href;
return false;
}
//-- bookmarker and duplicate window scripts
thisImageURL = window.location.href
function writeBookmarker(){
document.getElementById('bookmarker').href = "javascript:bookmark(\'"+ thisImageURL + "\',\'" + genericbookmarktitle + "\')";
document.getElementById('duplicator').href = thisImageURL;
}
function bookmark(url, title){
if (window.sidebar) // firefox
window.sidebar.addPanel(title, url, "");
else if(window.opera && window.print){ // opera
var elem = document.createElement('a');
elem.setAttribute('href',url);
elem.setAttribute('title',title);
elem.setAttribute('rel','sidebar');
elem.click();
} else if(document.all)// ie
window.external.AddFavorite(url, title);
}
function xorigImg() {
alert('test');
}
//-- send image link as email --------------------------------------
//Script by Trånn: http://come.to/tronds
//Submitted to JavaScript Kit (http://javascriptkit.com)
//Visit http://javascriptkit.com for this script
//-- these variables moved into the mailThisUrl() function
//var initialsubj= genericbookmarktitle; //"Hey Buddy..."
//var initialmsg="Hi,\n Please take a look at this picture by Kathleen Kemly: "+emailimageurl;
//-- not using this part here...
/*
var good;
function checkEmailAddress(field) {
var goodEmail = field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\.info)|(\.sex)|(\.biz)|(\.aero)|(\.coop)|(\.museum)|(\.name)|(\.pro)|(\..{2,2}))$)\b/gi);
if (goodEmail) {
good = true;
}
else {
alert('Please enter a valid address.');
field.focus();
field.select();
good = false;
}
}
*/
u = window.location;
//-- first version is for email to clleage or friend...
function mailThisUrl() {
//-- create a variable that can be used in the mailto: *
if (window.numberedcaption === undefined) {
var emailcaption = "%20";
} else {
var emailcaption = "%23"+numberedcaption.replace(/(<([^>]+)>)/ig,"")+"%20";
}
var getimageurl = document.getElementById('imageurl').innerHTML;
var emailimageurl = getimageurl.replace(/&/,"%26");
var initialsubj= genericbookmarktitle; //"Hey Buddy..."
var initialmsg="Hi, %0A%0A Please take a look at this print by Kathleen Kemly:%20"+emailcaption+"%0A"+emailimageurl+"%0A%0A";
good = false;
//-- not using the email check in this application; user inputs email address using outlook, etc.
//checkEmailAddress(document.eMailer.email);
//if (good) {
//window.location = "mailto:"+document.eMailer.email.value+"?subject="+initialsubj+"&body="+document.title+" "+u;
//window.location = "mailto:"+document.eMailer.email.value+"?subject="+initialsubj+"&body="+initialmsg + mainurl + window.location.pathname + "?gal=" + galshort + "%26galimg=" + jpgFilename;
//window.location = "mailto:"+document.eMailer.email.value+"?subject="+initialsubj+"&body="+initialmsg;
window.location = male2+""+"?subject="+initialsubj+"&body="+initialmsg;
// }
}
//-- second version is for email to site owner...
function mailThisUrl2() {
//-- create a variable that can be used in the mailto: *
if (window.numberedcaption === undefined) {
var emailcaption = "%20";
} else {
var emailcaption = "%23"+numberedcaption.replace(/(<([^>]+)>)/ig,"")+"%20";
}
var getimageurl = document.getElementById('imageurl').innerHTML;
var emailimageurl = getimageurl.replace(/&/,"%26");
var initialsubj= "-> Purchasing a print from your website..."; //"Hey Buddy..."
var initialmsg="Hi Kathleen, %0A%0A I'm interested in purchasing:%20"+emailcaption+"%0A"+emailimageurl+"%0A%0A Please contact me with details. %0A%0A My phone number is: %0A%0A My email address is: %0A%0A My mailing address is:";
good = false;
//-- not using the email check in this application; user inputs email address using outlook, etc.
//checkEmailAddress(document.eMailer.email);
//if (good) {
//window.location = "mailto:"+document.eMailer.email.value+"?subject="+initialsubj+"&body="+document.title+" "+u;
//window.location = "mailto:"+document.eMailer.email.value+"?subject="+initialsubj+"&body="+initialmsg + mainurl + window.location.pathname + "?gal=" + galshort + "%26galimg=" + jpgFilename;
//window.location = "mailto:"+document.eMailer.email.value+"?subject="+initialsubj+"&body="+initialmsg;
window.location = male2+""+"?subject="+initialsubj+"&body="+initialmsg;
// }
}
// add a class to the body to select the right link as "active"
function bodyClass() {
if (document.body.className=="gallery portfolio" && galshort) {
document.body.className = "gallery portfolio " + galshort;
} else if (document.body.className=="gallery prints" && galshort) {
document.body.className = "gallery prints " + galshort;
} else return false;
}
// * = strip html tags out of the caption using .replace(/(<([^>]+)>)/ig,"")