| online portfolio of Ursula Wing
Requires at least a basic understanding of HTML & javascript or some other scripting language to know what's going on. All the galleries on this site utilize this script with the exception of the animation gallery which is a bit more complicated.

This is a simplified version of the .HTML containing only the elements that are affected by or required by the functions. galleryFunctions.js and paintings.js are sourced in the <HEAD> tag. The function drawGallery(start, end) is called within the <BODY> after the necessary DOM elements. Because the script requires a start & end variable it's possible to break 1 array up into various sections of thumbnails.

<html>

<head>
<title>gallery</title>
<script language="javascript" src="../scripts/galleryFunctions.js"></script>
<script language="javascript" src="../scripts/paintings.js"></script>

</head>

<body bgcolor="#ffffff">

<img src="images/placeholder.gif" name="mainImage" border="0">

<table><tr>
<td align="left">
<span id="captionLeft" class="generalText"></span></td>
<td align="right">
<span id="captionRight" class="generalText"></span></td>
<td align="left">
<a onmouseover="arrowOn('Left')" onmouseout="arrowOff('Left')" href="#">
<img src="images/arrowLeftGray.gif" alt="" name="arrowLeft" height="18" width="9" border="0"></a></td>
<td align="right">
<a onmouseover="arrowOn('Right')" onmouseout="arrowOff('Right')" href="#">
<img src="images/arrowRightGray.gif" alt="" name="arrowRight" height="18" width="9" border="0"></a></td></tr></table>

<span id="moreInfo"></span>

<script type="text/javascript">loadFirstImage();</script>

<br><br><br>
<span class="thumbnailArea">
GALLERY SECTION 1<br>
<script type="text/javascript">drawGallery(0,3);</script><br><br>
</span>
</body>

</html>


This is the content of "galleryFunctions.js.", which contains the drawGallery(); functions.

//ursula's javascript gallery! source: www.ursart.com.
//free to be modified or shared however u like, but not sold

//determine the initial gallery content & arrow links
function loadFirstImage(){
document.mainImage.src = imgDirectory + images[0] + ".jpg";
document.getElementById("captionLeft").innerHTML = textLeft[0];
document.getElementById("captionRight").innerHTML = textRight[0];
document.getElementById("moreInfo").innerHTML = additionalText[0];

document.arrowLeft.onclick = function leftArrowLink1(){
changeImage(images[images.length - 1])
}

document.arrowRight.onclick = function rightArrowLink1(){
changeImage(images[1])
}

//check to see if we should get rid of the outline
for (j = 0; j<imagesNoOutline.length; j++){
if (imagesNoOutline[j] == images[0])
break;
}
if (imagesNoOutline[j] == images[0]){
document.mainImage.style.color = "#ffffff";
} else {
document.mainImage.style.color = "#a9a9a9";
}
}

// make the thumbnail gallery!
function drawGallery(start,stop){
for (g=start; g<stop; g++){
thumbnail = "<a href='#' onClick = 'changeImage(\""
thumbnail += images[g]
thumbnail += "\")'>";

//check to see if the thumbnail is in the no outline array
for (h = 0; h<imagesNoOutline.length; h++){
if (imagesNoOutline[h] == images[g])
break;
}
// determine the thumbnail style
if (images[g] == imagesNoOutline[h]){
thumbnail += "<img class='galHoverWht galleryThumbnail' src='"
} else {
thumbnail += "<img class='galHoverGry galleryThumbnail' src='"
}

thumbnail += imgDirectory
thumbnail += images[g]
thumbnail += "_sm.jpg'>";
thumbnail += "</a>";

document.write(thumbnail);
}
}


//change the content
function changeImage(newImage) {
for (i = 0; i<images.length; i++){
if (images[i] == newImage)
break;
}

document.mainImage.src = imgDirectory + newImage + ".jpg";
document.getElementById("captionLeft").innerHTML = textLeft[i];
document.getElementById("captionRight").innerHTML = textRight[i];
document.getElementById("moreInfo").innerHTML = additionalText[i];

//change the left arrow link
if (i == 0){
previousImage = images[images.length - 1];
} else {
previousImage = images[i - 1];
}
document.arrowLeft.onclick = function leftArrowLink2(){
changeImage(previousImage);
}

//change the right arrow link
if (i == images.length - 1){
nextImage = images[0];
} else {
nextImage = images[i + 1];
}
document.arrowRight.onclick = function rightArrowLink2(){
changeImage(nextImage);
}

//check to see if we should get rid of the outline
if (imagesNoOutline){
for (j = 0; j<imagesNoOutline.length; j++){
if (imagesNoOutline[j] == newImage)
break;
}
if (imagesNoOutline[j] == newImage){
document.mainImage.style.color = "#ffffff";
} else {
document.mainImage.style.color = "#a9a9a9";
}
}

}



Each gallery page then loads a .js file defining the arrays into which you insert all the content for each item in your gallery. In this case, the "paintings.js." file

images = new Array();
textLeft = new Array();
textRight = new Array();
additionalText = new Array();

images[0] = "maxAndMichael";
textLeft[0] = "<i>Max &amp; Michael</i><br>oil on linen, 80 x 50 cm";
textRight[0] = "2005";
additionalText[0] = "";

images[1] = "whoreMadonna1";
textLeft[1] = "<i>Whore Madonna 1</i><br>oil on canvas, 110 x 174 cm";
textRight[1] = "2006";
additionalText[1] = "";

images[2] = "bananaSplit";
textLeft[2] = "<i>Banana Split</i><br>oil on canvas, 122 x 162 cm";
textRight[2] = "2005";
additionalText[2] = "";

imagesNoOutline = new Array();
imagesNoOutline[0] = "maxAndMichael";
imagesNoOutline[1] = "whoreMadonna1";

imgDirectory = "images/paintings/";