Thumbnail Navigator - JavaScript Made Easy

Metachecker.net

FontsMadeEasy.com

RankChecker.net

Learn Java Script Today

Over 5000 Free Fonts

Tutorials

Javascript Forum

Other Javascript Resources

Advance DHTML Tutorial

Thumbnail Navigator

Allows the visitor to easily browse with Previous and Next through several thumbnail images (all of which are preloaded so they show up instantly). Then they can click the Go button to be taken to the selected thumbnail's full size image.

Thumbnail Navigator

Browse to a picture you like and click "GO".

Insert into <HEAD>

<!-- Begin
prev1 = new Image (32,18);
prev1.src = "prev1.jpg";
prev2 = new Image (32,18);
prev2.src = "prev2.jpg";

next1 = new Image (32,18);
next1.src = "next1.jpg";
next2 = new Image (32,18);
next2.src = "next2.jpg";

go1 = new Image (48,24);
go1.src = "go1.jpg";
go2 = new Image (48,24);
go2.src = "go2.jpg";

maxPic = 5;

p1 = new Image (144,96);
p1.src = "1-thumb.jpg";
link1 = "1-full.jpg";

p2 = new Image (144,96);
p2.src = "2-thumb.jpg";
link2 = "2-full.jpg";

p3 = new Image (144,96);
p3.src = "3-thumb.jpg";
link3 = "3-full.jpg";

p4 = new Image (144,96);
p4.src = "4-thumb.jpg";
link4 = "4-full.jpg";

p5 = new Image (144,96);
p5.src = "5-thumb.jpg";
link5 = "5-full.jpg";

count = 1;
function next() {
count++;
if (count > maxPic) {
count = 1;
}
eval("document.p.src=p" + count + ".src");
}
function back() {
count--;
if (count == 0) {
count = maxPic;
}
eval("document.p.src=p" + count + ".src");
}
function link() {
location.href=eval("link" + count);
}
//  End -->
</script>

Insert into <BODY>

Other Options