|
EXAMPLE
Select the images with the next and
previous buttons and click on the thumbnail image to display a full size version
in a sized popup window.
1) Insert this script in the <HEAD> section of the page.
2) Insert this HTML code in
the <BODY> section where you want the slideshow to appear in the page.
3) Insert the onLoad event handler inside the
<BODY> tag as follows:
<body
onLoad="preloadImages('images/previous_on.gif','images/next_on.gif')",
followed by other tags such as bgcolor, etc..
4) Modify
these variables to define the location and the size of the slideshow and the
thumbnail images, the number of images used and the size of the popup window in this section of the script:
if(document.images) {
currentslide=1;
maxslides=4; // the number of
images used
slide = new Array(maxslides+1);
thumb = new Array(maxslides+1);
for(var n=1;n<=maxslides;n++) {
slide[n]=new Image(302,346); //
the size of the slideshow images
slide[n].src='images/slide_'+n+'.gif';
}
for(var n=1;n<=maxslides;n++) {
thumb[n]=new Image(80,120); //
the size of the thumbnail images
thumb[n].src='images/thumb_'+n+'.gif';
function showFullSize(){
openPictureWindow('images/slide_'+currentslide+'.gif', 302, 486, 'Full Size Image'); //
the size of the popup window
And in this section of the HTML
code:
<a href='javascript:showFullSize();'>
<img name='slide' width=80 height=120 border=0 hspace=0 vspace=0 alt='Click to view Fullsize Image'
src='images/thumb_1.gif'></a>
5) Name the images for the slideshow like this:
Thumbnail images: thumb_1.gif, thumb_2.gif, etc.
Full size images: slide_1.gif, slide_2.gif, etc.
6) Define
the images for the next and previous buttons in this section of the onLoad
tag:
onLoad="preloadImages('images/previous_on.gif','images/next_on.gif')"
And in this section of the HTML
code:
<a href="javascript:prevSlide()"
onMouseOut="swapImgRestore()" onMouseOver="swapImage('imgPrevious','','images/previous_on.gif',1)">
<img name="imgPrevious" border="0" src="images/previous.gif" width="35" height="18"></a></td>
<td height=5 align=right><a href="javascript:nextSlide()"
onMouseOut="swapImgRestore()" onMouseOver="swapImage('imgNext','','images/next_on.gif',1)">
<img name="imgNext" border="0" src="images/next.gif" width="35" height="18"></a>
For more information on this script, you can visit David
Miles' web
site.
|
