JavaScript 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.

Script Demo:

Demo

JavaScript Code:

Insert this code into <head> tags

<script language="javascript">
<!-- Original:  Daniel Smith (xalres@earthlink.net) -->
<!-- Web Site:  http://home.earthlink.net/~xalres -->

<!-- This script and many more are available free online at -->
<!-- Road to webmaster http://www.road2webmaster.com-->

<!-- 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 this code into <body> tags

<table bgcolor="#003366" border=0>
<tr>
<td align=center width=300>
<font color=white face="Arial, Helvetica" size="+1">Thumbnail Navigator</font>
<br><br>
<img name=p src="1-thumb.jpg" border=0 width=144 height=96>
<br>
<table border=0>
<tr>
<td><a href="javascript:back()" onmouseover="prev.src=prev2.src" onmouseout="prev.src=prev1.src"><img src="prev1.jpg"  width="32" height="18" border="0" name="prev"></td>
<td><a href="javascript:link()" onmouseover="go.src=go2.src" onmouseout="go.src=go1.src"><img src="go1.jpg" width="48" height="24" border="0" name="go"></td>
<td><a href="javascript:next()" onmouseover="next.src=next2.src" onmouseout="next.src=next1.src"><img src="next1.jpg" width="32" height="18" border="0" name="next"></td>
</tr>
</table>
<br>
<font color="#A3ACC9" size="2" face="Arial">
Browse to a picture you like and click "GO".</font>
</td>
</tr>
</table>

Instruction:

Change the following text:

prev1.jpg - "Previous" button normal image file URL.
prev2.jpg - "Previous" button mouse over image file URL.
next1.jpg - "Next" button normal image file URL
next2.jpg - "Next" button mouse over image file URL
go1.jpg - "Go" button normal image file URL.
go2.jpg - "Go" button mouse over image file URL.
maxPic = 5; - Number of pictures.
1-thumb.jpg - Image thumbnail URL.
1-full.jpg - Full image file or web page URL
(144,96) - (Width,Height) values in pixel.
Modify the table style and color to suit your site.

Webmaster » Web Programming » JavaScript » Navigation » Thumbnail Navigator

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links