Slideshow of Image, Text and Links *Has this been done before?*

[PoonahLove]

Trying to put together a slideshow that will change the image, the title, description and HREF. Getting closer but still not working.

Getting the following errors:

slide_num is not defined

I've also been told that the

document.getElementById('projectLinks').innerHTML = tmp;

will throw up an error because it will run before the div "projectLinks" has been rendered

Here is the JS and the HTML

var num=0;


// format: projectImage, projectTitle, projectDesc, projectLinks
imgArray = [
['images/pc_bookCover.jpg', 'A Life Inspired', 'book cover design 45th anniversary', 'projects/pc.html#bookCover'],
['images/pc_acco.jpg', 'Accomplishments', 'Peace Corps annual report', 'projects/acco.html'],
['images/pc_bookMarks.jpg', 'Bookmarks', 'Peace Corps bookmarks', 'projects/pcWeek.html#bookmarks'],
['images/pc_bookCover.jpg', 'A Life Inspired', 'book cover design, 45th anniversary', 'projects/pc.html#bookCover']
]

function slideshow(slide_num) {
document.getElementById('projectImage').src=imgArray[slide_num][0];
document.getElementById('projectTitle').innerHTML=imgArray[slide_num][1];
document.getElementById('projectDesc').innerHTML=imgArray[slide_num][2];
document.getElementById('projectLinks').location.href=imgArray[slide_num][3];

}

var tmp = '<a href="#" onClick="location.href=imgArray[slide_num][3];return false">';
tmp += imgArray[slide_num][3]+'</a>';
document.getElementById('projectLinks').innerHTML = tmp;

<div class="projectInfo">
<div id="projectTitle" class="projectTitle">1. A Life Inspired</div>
<div id="projectDesc" class="projectDesc"> book cover design for Peace Corps's volunteer stories</div>
<div id="projectLinks" class="projectLinks"> <a href="#"> VIEW PROJECT</a></div>
</div>

<div id="subLoader"></div>
<div class="projectImage" id="projectImage"></div>