Link to image in an array

I have a website I am working on that I have added a small javascript photogallery to. What I want to do is to have a normal html link bring me to a specific picture in my photo gallery on another page. I'm guessing that I have to add a onclick attirbute to the link on one page and add some sort of function to my script but I am un sure of where to go from there. Here is the javascript for my gallery:

window.onload = initAll;

var currImg = 0;
var captionText = new Array(
"Caption 1",
"Caption 2",
"Caption 3 <a href=\"foo.html\">with link</a>"
)
var captionTitle = new Array(
"Title 1",
"Title 2",
"Title 3"
)

function initAll() {
document.getElementById("imgTitle").innerHTML = captionTitle[0];
document.getElementById("imgText").innerHTML = captionText[0];
document.getElementById("prevLink").onclick = processPrevious;
document.getElementById("nextLink").onclick = processNext;
}

function processPrevious() {
newSlide(-1);
}

function processNext() {
newSlide(1);
}

function newSlide(direction) {
var imgCt = captionText.length;

currImg = currImg + direction;
if (currImg < 0) {
currImg = imgCt-1;
}
if (currImg == imgCt) {
currImg = 0;
}
document.getElementById("slideshow").src = "images/slideImg" + currImg + ".jpg";
document.getElementById("imgText").innerHTML = captionText[currImg];
document.getElementById("imgTitle").innerHTML = captionTitle[currImg];
}

Here is a link to the gallery I am working on:

<snip>

and a link to the page I want to put the link on:

<snip>

I know that this script is starting the gallery with the first image and text/title when the window loads. What I need to figure out is how to have this happen, but overide it when this page is linked to from the other page and have the correct image become the first image displayed instead of the default.

Thanks for any advice you might have!

[edited by: DrDoc at 4:36 pm (utc) on July 22, 2008]
[edit reason] Stripped down, removed specifics and URIs. [/edit]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Untitled</title>
</head>
<body>
<div id="imgTitle"></div>
<div id="imgText"></div>
<div id="prevLink"></div>
<div id="nextLink"></div>

<script type="text/javascript">
var currImg = 0;
var captionText = [
"Caption 1",
"Caption 2",
"Caption 3 <a href=\"foo.html\">with link</a>"
];
var captionTitle = [
"Title 1",
"Title 2",
"Title 3"
];
function processPrevious() {
newSlide(-1);
}
function processNext() {
newSlide(1);
}
function newSlide(direction) {
var imgCt = captionText.length;
currImg = currImg + direction;
if (currImg < 0) {
currImg = imgCt-1;
}
if (currImg == imgCt) {
currImg = 0;
}
document.getElementById("slideshow").src = "images/slideImg" + currImg + ".jpg";
document.getElementById("imgText").innerHTML = captionText[currImg];
document.getElementById("imgTitle").innerHTML = captionTitle[currImg];
}
function initAll() {
var s = window.location.search;
var aParams = [], aMap = [], i, nId = 0;
if (s.length > 0) {
s = s.substr(1); // Strip off ?
}
if (s.length > 0) {
aParams = s.split('&'); // [id=1,foo=bar,...]
}
for (i = 0; i < aParams.length; i++) {
aMap[aMap.length] = aParams[i].split('=');
}
for (i = 0; i < aMap.length; i++) {
if (aMap[i][0] == 'id') {
nId = aMap[i];
break;
}
}
document.getElementById("imgTitle").innerHTML = captionTitle[nId];
document.getElementById("imgText").innerHTML = captionText[nId];
document.getElementById("prevLink").onclick = processPrevious;
document.getElementById("nextLink").onclick = processNext;
}
window.onload = initAll;
</script>
</body>
</html>

Link to image in an array

html link to particular image in javascript photogallery

fayevictus1

Fotiman

fayevictus1

Fotiman

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week