[b]finishing up slideshow[/b] 1

isilkin · Feb 17, 2008

Hi, thanks to everyone who helped me with this slideshow.
I am now adding some finishing touches to it and I run into a problem. for some reason javascript doesn't want to load my initLinks function.
I am pretty sure that the function itself it good and fine cos I tested it but in combination with the rest of the code it doesn't run. Thanks to everyone in advance.

here is javascript:

window.onload = newShow;

var myThumbnails = new Array("thumbnails/1.jpg","thumbnails/2.jpg","thumbnails/3.jpg");
var thisPic = 0;
var bigSample = new Array("samples/1.jpg","samples/2.jpg","samples/3.jpg");

function newShow() {//generates new thumbnails
for (var i=0; i<3; i++) {
setSquare(i);
}

}
function setSquare(thisSquare) {//populates thumbnails in the table cells
var currSquare = "square" + thisSquare;

document.getElementById(currSquare).src = myThumbnails[thisSquare];

}

function bigPicture(smallID)//gets large image for this particular thumbnail
{
var picindex = smallID.replace('square', '');
document.getElementById("bigPic").src = bigSample[picindex];
}

function bigOver(obj){//changes border color
obj.style.border = '2px solid #ff0000';

}
function bigOut(obj){
obj.style.border = '';

}

function initLinks() {//initiate links: next and back

document.getElementById("prevLink").onclick = processPrevious;
document.getElementById("nextLink").onclick = processNext;
}

function processPrevious() {
if (thisPic == 0) {
thisPic = bigSample.length;
}
thisPic--;
document.getElementById("bigPic").src = bigSample[thisPic];
return false;
}

function processNext() {
thisPic++;
if (thisPic == bigSample.length) {
thisPic = 0;
}
document.getElementById("bigPic").src = bigSample[thisPic];
return false;
}

and here is HTML

<body>
<table>
<tr>
<td width="64"><img src="" width="64" height="64" id="square0" onclick="bigPicture(this.id);" onmouseover="bigOver(this);" onmouseout="bigOut(this)"/></td>
<td width="64"><img src="" width="64" height="64" id="square1" onclick="bigPicture(this.id);" onmouseover="bigOver(this);" onmouseout="bigOut(this)"/></td>
<td width="64"><img src="" width="64" height="64" id="square2" onclick="bigPicture(this.id);" onmouseover="bigOver(this);" onmouseout="bigOut(this)"/></td>
</tr>
</table>
<h2><a href="previous.html" id="prevLink">« Previous</a>  <a href="next.html" id="nextLink">Next »</a></h2>
<img src="samples/1.jpg" id="bigPic" height="300" />
</body>

tsuji · Feb 18, 2008

I don't see initLinks() is ever called.
[tt]
function newShow() {//generates new thumbnails
[red]initLinks();[/red]
for (var i=0; i<3; i++) {
setSquare(i);
}
}[/tt]

isilkin · Feb 18, 2008

Will this work to run two unrelated functions?

window.onload = start;

function start() {
newShow();
initLinks();
}

kaht · Feb 18, 2008

Will this work to run two unrelated functions?

window.onload = start;

function start() {
newShow();
initLinks();
}

Yes, but you can even cut it down a bit. If you don't plan on calling the start() function any other time besides when the page loads, then you can just declare the onload function like this:

Code:

window.onload = function () {
   newShow();
   initLinks();
};

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small] <.[/small]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

[b]finishing up slideshow[/b] 1

isilkin

Technical User

tsuji

Technical User

isilkin

Technical User

kaht

Programmer

Similar threads

Part and Inventory Search

Sponsor