/* GALLERY LAYOUT */ // and /* info */ are comments // This page defines values utilized by GalCont.js to present a picture gallery. // This page must be imported prior to importing GalCont.js. /* BEFORE MAKING ALTERATIONS ON THIS PAGE MAKE A COPY OF THE PAGE */ // Rename this copy GalValsXXXXX.js where XXXXX is a name of your choosing. // This is Java Script and is unforgiving. Please read instructions before changing examples and making new entries. /************* ARRAY DEFINITIONS ALTER "MaxImages" ONLY IF YOU KNOW WHAT YOU ARE DOING ***************/ // The maximum number of images that can be presented is set at 40 (determined by size of the storage arrays). // The maximum number can be increased to any size provided corresponding code is added to "Individual // Image Information" and "Individual Caption Information" sections below. Be aware that loading time may // become very long if you increase this number (images are loaded in presentation order and the system allows // the user to start viewing images while images are still being loaded). // MaxImages - set at 40. // IL - array of Image - URLs (file locations). // IW - array if Image - widths. // IH - array of Image - heights. // CA - array of Captions associated with the images. MaxImages=40; IL=new Array(MaxImages); IW=new Array(MaxImages); IH=new Array(MaxImages); CA=new Array(MaxImages); /*********************************** END ARRAY DEFINITIONS ***********************************/ /**********************************************************************************************/ /******************************* BEGIN VALUES ALTERATION AREA *********************************/ /**********************************************************************************************/ /****************************************** ACTUATOR SETTINGS *********************************/ // If you desire to present only "Prior Picture" and "Next Picture" buttons set "UseAuto" to false. // If you desire to present "Prior Picture", "Auto Sequence", and "Next Picture" buttons set "UseAuto" to true. UseAuto=true; // If "UseAuto = true;" -- "DispTimeSecs" must contain a number representing viewing time in seconds for each // image when the Auto Sequence button has been depressed. // If "UseAuto = false;" -- set "DispTimeSecs" to zero or simply leave as is. DispTimeSeconds=6; // If desired, you can change DEFAULT WORDING of the Text appearing on the Gallery Actuator Controls by modifiying // the information between the '' marks associated with the 3 variables NextPix, AutoSequencePixs, and PriorPix. PriorPix='View Prior Picture'; AutoSequencePixs='Sequence Pictures'; NextPix='View Next Picture'; // Actuator font sizes for page widths of 800px, 1024px, 1280px ,1600px. Values must be font sizes (1..7). ActFontSize800=3; ActFontSize1024=4; ActFontSize1280=5; ActFontSize1600=6; // Except for Font Size all other Actuator style control must be defined utilizing styles. The page Gal.css // contains the required styles. Either Gal.css must be imported into the or the styles must appear in the // web page's section or they can be copied into your general style sheets. // Note: These style contain no sizing information, i.e., a single sheet suffices unless you copy them into the 4 general // style sheets being called through scale.js. /* An example of the required styles is shown below. Gal.css explains these styles, they may be altered to your desires. .galActuator{ font-weight:bold; color:#00cccc; text-decoration:none; font-family:helvetica,arial,monospace; .galActuator:link, .galActuator:visited{ color:#00cccc; } .galActuator:hover, .galActuator:active{ color:#008888; } */ /*************************************** END OF ACTUATOR SETTINGS *********************************/ /***************************** IMAGES MAXIMUM PRESENTATION SIZE SETTINGS **************************/ // Wmax1024 - the maximum horizotal space in pixels allocated images on a 1024 width page. // Note: Value of Wmax1024 must not exceed size of the outside wrapper value. // Hmax1024 - the maximum vertical space in pixels allocated images on a 1024 width page. // Hmar1024 - margin, in pixels, immediately above and below HMax. This is the minimum spacing that can occur // between the "Picture" and the "Actuator Controls" & the "Picture" and the "Caption". Wmax1024=998; Hmax1024=461; Hmar1024=8; /************************************ END IMAGES MAXIMUM SIZE SETTINGS ****************************/ /************************************ IMAGES AUTO SIZE SETTINGS ***********************************/ // Three Image Sizing features are available. Regardless of the selected Size Settings -- all oversize Images // automatically are re-scaled to fit within the Wmax and Hmax screen size settings that you have chosen. // Size Settings // 1. Image presented in it's native size ImageFillHeight=false; ImageFillWidth=false; // 2. Image adjusts its height to fit Hmax (if possible) ImageFillHeight=true; ImageFillWidth=false; // 3. Image adjusts its Width to fit Wmax (if possible) ImageFillWidth=true; ImageFillHeight=false; // NOTE!!!!!!!!!!!!!!!!!!!!! only one may be set true at a time ImageFillHeight=true; ImageFillWidth=false; /************************************ End IMAGES AUTO SIZE SETTINGS *******************************/ /*********************************** INDIVIDUAL IMAGE INFORMATION *********************************/ // HEIGHT and WIDTH are the images NATIVE HEIGHT AND WIDTH. It is best to design the image's size to suite a 1024 page. // PICTURE'S FILE LOCATION is the image's location folder / file name. // Image Display Order is controlled by the Sequence Order Array to be defined later. This allows images to be initially // placed into the array below in any order. Also it means you do not have to actually remove unused images to delete them // from the presentation. You do not even have to remove the samples included herein if that is your desire. // If array size is increased additional lines must be added below to match. To avoid errors, use copy-paste, then simply // change the numbers to match the increased array's size. // HEIGHT WIDTH PICTURE'S FILE LOCATION IH[0]=461; IW[0]=432; IL[0]='images/ghStJamesOutside1.jpg'; IH[1]=461; IW[1]=462; IL[1]='images/ghStJamesInside1.jpg'; IH[2]=560; IW[2]=788; IL[2]='images/gh445o.jpg'; IH[3]=560; IW[3]=993; IL[3]='images/gh467i.jpg'; IH[4]=000; IW[4]=000; IL[4]=''; IH[5]=000; IW[5]=000; IL[5]=''; IH[6]=000; IW[6]=000; IL[6]=''; IH[7]=000; IW[7]=000; IL[7]=''; IH[8]=000; IW[8]=000; IL[8]=''; IH[9]=000; IW[9]=000; IL[9]=''; IH[10]=000; IW[10]=000; IL[10]=''; IH[11]=000; IW[11]=000; IL[11]=''; IH[12]=000; IW[12]=000; IL[12]=''; IH[13]=000; IW[13]=000; IL[13]=''; IH[14]=000; IW[14]=000; IL[14]=''; IH[15]=000; IW[15]=000; IL[15]=''; IH[16]=000; IW[16]=000; IL[16]=''; IH[17]=000; IW[17]=000; IL[17]=''; IH[18]=000; IW[18]=000; IL[18]=''; IH[19]=000; IW[19]=000; IL[19]=''; IH[20]=000; IW[20]=000; IL[20]=''; IH[21]=000; IW[21]=000; IL[21]=''; IH[22]=000; IW[22]=000; IL[22]=''; IH[23]=000; IW[23]=000; IL[23]=''; IH[24]=000; IW[24]=000; IL[24]=''; IH[25]=000; IW[25]=000; IL[25]=''; IH[26]=000; IW[26]=000; IL[26]=''; IH[27]=000; IW[27]=000; IL[27]=''; IH[28]=000; IW[28]=000; IL[28]=''; IH[29]=000; IW[29]=000; IL[29]=''; IH[30]=000; IW[30]=000; IL[30]=''; IH[31]=000; IW[31]=000; IL[31]=''; IH[32]=000; IW[32]=000; IL[32]=''; IH[33]=000; IW[33]=000; IL[33]=''; IH[34]=000; IW[34]=000; IL[34]=''; IH[35]=000; IW[35]=000; IL[35]=''; IH[36]=000; IW[36]=000; IL[36]=''; IH[37]=000; IW[37]=000; IL[37]=''; IH[38]=000; IW[38]=000; IL[38]=''; IH[39]=000; IW[39]=000; IL[39]=''; // URLSP - The Spacer Image's "URL Location". // A spacer (image) must be created having a background color the same color as the presentation area background. // The size of the spacer should be a square of roughly 5 pixels (or less) in size. URLSP='images/WhSpcr.jpg'; // The order that the images are displayed on the page are defined in the Array "SeqOrd". // 1. The only images that will appear on the page are those listed in Array "seqOrd". // 2. The Actuator sequences Images in the order listed in the Array, looping at the end of the array. // If desired, you may copy and paste the numbers below in the Array as a starter, then alter it to fit your needs. // 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39 SeqOrd=new Array( 3,0,1,2); // IMPORTANT & REQUIRED !!! The total number of images to be displayed. Easy to forget when adding images. // This is the number of images that will be preloaded into the Browser's Cache, and presented in the Gallery. // Example: in SeqOrd we placed 4 images. Settins the NumOfImgs=2; allows only inages 0 and 1 to be displayed, // the system loops back to the first item after displaying the last item. NumOfImgs=4; /************************************* END OF IMAGE SETTINGS ***********************************/ /************************************* CAPTION SETTINGS ****************************************/ // Font attributes for the captions must be defined below. // These can be changed to suit your desires. If no Font Style is used then set CapFontStyle=''; and CapFontStyleEnd='';. CapFontColor='#008800'; CapFontFace='Arial'; CapFontStyle=''; CapFontStyleEnd=''; // Caption font sizes for page width of 800px, 1024px, 1280px ,1600px. Values must be font sizes (1..7). CapFontSize800=3; CapFontSize1024=4; CapFontSize1280=5; CapFontSize1600=6; // Enter the corresponding Caption to be presented with each Image File listed in INDIVIDUAL IMAGE INFORMATION. // CA[#] = ""; The picture's Caption must either appear between "" or '' marks. // NOTE !! If ' is to be utilized in the Text then enclose caption text between "". // If " is to be utilized in the Text then enclose caption text between ''. // If both " and ' is to be utilized in the Text then you must decide which one will not // appear in the caption. // HTML tags may be utilized within a Caption to change color, font face, font size, or make a multiple line font. // Example: // CA[XX] = "Our Group
Left to Right: John Doe, Mary Crabtree, Joe Turner and Susan Hoseman"; // If
is used within caption text to create a two line caption,
should be added at the end // of all remaining Captions to maintain the Gallery's OVERALL height on the page. // If array size is increased additional lines must be added to match. Use copy-paste, then change the numbers // to match the increased array. /*********************************** INDIVIDUAL CAPTION INFORMATION *****************************/ CA[0]=""; CA[1]=""; CA[2]=""; CA[3]=""; CA[4]=""; CA[5]=""; CA[6]=""; CA[7]=""; CA[8]=""; CA[9]=""; CA[10]=""; CA[11]=""; CA[12]=""; CA[13]=""; CA[14]=""; CA[15]=""; CA[16]=""; CA[17]=""; CA[18]=""; CA[19]=""; CA[20]=""; CA[21]=""; CA[22]=""; CA[23]=""; CA[24]=""; CA[25]=""; CA[26]=""; CA[27]=""; CA[28]=""; CA[29]=""; CA[30]=""; CA[31]=""; CA[32]=""; CA[33]=""; CA[34]=""; CA[35]=""; CA[36]=""; CA[37]=""; CA[38]=""; CA[39]=""; /************************************* END CAPTION SETTINGS ***********************************/ /**********************************************************************************************/ /**********************************************************************************************/ /******************************* END VALUES ALTERATION AREA ***********************************/ /**********************************************************************************************/ /**********************************************************************************************/ /**************************************** DO NOT ALTER ****************************************/ /**********************************************************************************************/ // preload Images into the user browser's cache. User can start viewing the next pictures right // away unless he is on dial up. // Note: only NumOfImgs are preloaded into the cache. There could be say 32 images spelled out but // if NumOfImgs = 5; then only the five Images to be presented by the gallery are loaded. for(var i=0; i < NumOfImgs;i++){(new Image()).src=IL[SeqOrd[i]];} /**********************************************************************************************/ /**********************************************************************************************/ // you may remove all the comments to unclutter the page as done in the sample display