Sample Image Gallery
This is a sample of a gallery page you can create automatically for auctions, message boards, and anywhere that allows JavaScript.
Your auctions will load much faster, because only the smaller thumbnails are being loaded at first, and one full-sized image. The remainder of the full-sized images are loaded as the user clicks on the thumbnails!
Create HTML for a gallery page like the one below, by selecting images within an album page, and hitting the "Create Gallery Page" button, we'll build the HTML for you so you can cut and paste it. It's that easy!
| Mouse over the arrows to scroll through images. Click a thumbnail to zoom to full-sized image. |
|
|
 |
| Image Hosting and Pure Javascript Scrolling Zoom Gallery by VillagePhotos.com |
Gallery HTML
<table bgcolor=#dfdfdf border=0 cellpadding=0 cellspacing=0 style="border-top:1px solid #000000;border-bottom:1px solid #000000;border-right:1px solid #000000;border-left:1px solid #000000;"><tr bgcolor=#aaaaaa><td align=center><font size=1 face="verdana,arial"><b>Mouse over the arrows to scroll through images. Click a thumbnail to zoom to full-sized image.</b></font></td></tr><tr><td>
<script language="JavaScript1.2">
//<!--
var sliderwidth=600;
var sliderheight=155;
var slidespeed=8;
var timerDelay=20;
slidebgcolor="#eaeaea";
var animatetime;
var topRow='';
var bottomRow='';
var copyspeed=slidespeed;
var actualwidth='';
var actualheight='';
var cross_slide, ns_slide;
function jNull(){}
function stopanimation(){
window.clearInterval(animatetime);
}
function fillup(){
cross_slide=document.getElementById? document.getElementById("slidingGallery") : document.all.slidingGallery;
cross_slide.innerHTML=leftrightslide;
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth;
if (actualwidth==0) actualwidth=5000;
}
function startslideleft(){
if (cross_slide){
stopanimation();
animatetime=setInterval("slideleft()",timerDelay)
}
}
function startslideright(){
if (cross_slide){
stopanimation();
animatetime=setInterval("slideright()",timerDelay)
}
}
function slideleft(){
if (parseInt(cross_slide.style.left)>(-actualwidth+sliderwidth)){
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
}else stopanimation();
}
function slideright(){
if (parseInt(cross_slide.style.left)<0){
cross_slide.style.left=parseInt(cross_slide.style.left)+copyspeed+"px"
}else stopanimation();
}
htmlCode='<table><tr><td align=center><img src="http://www.villagephotos.com/images/spacer.gif" width=135 height=1><br><a href="javascript:jNull();"><img src="http://thumbs.villagephotos.com/8533053.jpg" border=0 onclick="scrollGalleryImage.src=\'http://img.villagephotos.com/p/2001-1/3/JBPPH-Spitfire Restore 015.jpg\';return false;"></a></td><td align=center><img src="http://www.villagephotos.com/images/spacer.gif" width=135 height=1><br><a href="javascript:jNull();"><img src="http://thumbs.villagephotos.com/8533051.jpg" border=0 onclick="scrollGalleryImage.src=\'http://img.villagephotos.com/p/2001-1/3/XXMLG-Spitfire Restore 016.jpg\';return false;"></a></td><td align=center><img src="http://www.villagephotos.com/images/spacer.gif" width=135 height=1><br><a href="javascript:jNull();"><img src="http://thumbs.villagephotos.com/8449355.jpg" border=0 onclick="scrollGalleryImage.src=\'http://img.villagephotos.com/p/2001-1/3/FRGYK-Spring 2004 063.jpg\';return false;"></a></td><td align=center><img src="http://www.villagephotos.com/images/spacer.gif" width=135 height=1><br><a href="javascript:jNull();"><img src="http://thumbs.villagephotos.com/8449348.jpg" border=0 onclick="scrollGalleryImage.src=\'http://img.villagephotos.com/p/2001-1/3/GUJGM-Spring 2004 062.jpg\';return false;"></a></td><td align=center><img src="http://www.villagephotos.com/images/spacer.gif" width=135 height=1><br><a href="javascript:jNull();"><img src="http://thumbs.villagephotos.com/8360398.jpg" border=0 onclick="scrollGalleryImage.src=\'http://img.villagephotos.com/p/2001-1/3/YPUJV-Spring 2004 001b.jpg\';return false;"></a></td><td align=center><img src="http://www.villagephotos.com/images/spacer.gif" width=135 height=1><br><a href="javascript:jNull();"><img src="http://thumbs.villagephotos.com/8360360.jpg" border=0 onclick="scrollGalleryImage.src=\'http://img.villagephotos.com/p/2001-1/3/YSHKN-Spring 2004 004.jpg\';return false;"></a></td><td align=center><img src="http://www.villagephotos.com/images/spacer.gif" width=135 height=1><br><a href="javascript:jNull();"><img src="http://thumbs.villagephotos.com/8360359.jpg" border=0 onclick="scrollGalleryImage.src=\'http://img.villagephotos.com/p/2001-1/3/NMOBB-Spring 2004 002.jpg\';return false;"></a></td><td align=center><img src="http://www.villagephotos.com/images/spacer.gif" width=135 height=1><br><a href="javascript:jNull();"><img src="http://thumbs.villagephotos.com/8360358.jpg" border=0 onclick="scrollGalleryImage.src=\'http://img.villagephotos.com/p/2001-1/3/TUQOX-Spring 2004 003.jpg\';return false;"></a></td><td align=center><img src="http://www.villagephotos.com/images/spacer.gif" width=135 height=1><br><a href="javascript:jNull();"><img src="http://thumbs.villagephotos.com/8313831.jpg" border=0 onclick="scrollGalleryImage.src=\'http://img.villagephotos.com/p/2001-1/3/ZZITX-DSC02859.JPG\';return false;"></a></td><td align=center><img src="http://www.villagephotos.com/images/spacer.gif" width=135 height=1><br><a href="javascript:jNull();"><img src="http://thumbs.villagephotos.com/8282432.jpg" border=0 onclick="scrollGalleryImage.src=\'http://img.villagephotos.com/p/2001-1/3/UEWUN-Spitfire Restore 010b.jpg\';return false;"></a></td><td align=center><img src="http://www.villagephotos.com/images/spacer.gif" width=135 height=1><br><a href="javascript:jNull();"><img src="http://thumbs.villagephotos.com/8282420.jpg" border=0 onclick="scrollGalleryImage.src=\'http://img.villagephotos.com/p/2001-1/3/TVJVU-Spitfire Restore 011b.jpg\';return false;"></a></td><td align=center><img src="http://www.villagephotos.com/images/spacer.gif" width=135 height=1><br><a href="javascript:jNull();"><img src="http://thumbs.villagephotos.com/8282418.jpg" border=0 onclick="scrollGalleryImage.src=\'http://img.villagephotos.com/p/2001-1/3/WFUWT-Spitfire Restore 012b.jpg\';return false;"></a></td></tr><tr><td valign=top align=center><font face="verdana,arial" size=2>Image #1</td><td valign=top align=center><font face="verdana,arial" size=2>Image #2</td><td valign=top align=center><font face="verdana,arial" size=2>Image #3</td><td valign=top align=center><font face="verdana,arial" size=2>Image #4</td><td valign=top align=center><font face="verdana,arial" size=2>Image #5</td><td valign=top align=center><font face="verdana,arial" size=2>Image #6</td><td valign=top align=center><font face="verdana,arial" size=2>Image #7</td><td valign=top align=center><font face="verdana,arial" size=2>Image #8</td><td valign=top align=center><font face="verdana,arial" size=2>Image #9</td><td valign=top align=center><font face="verdana,arial" size=2>Image #10</td><td valign=top align=center><font face="verdana,arial" size=2>Image #11</td><td valign=top align=center><font face="verdana,arial" size=2>Image #12</td></tr></table>';
leftrightslide=htmlCode;
document.write('<span id="temp" style="visibility:hidden; position:absolute;top:-10000px;left:-10000px;">'+ htmlCode +'</span>');
with (document){
write('<table border="0" cellspacing="0" cellpadding="0"><tr>');
write('<td bgcolor="#333333" onmouseover="startslideright();" onmouseout="stopanimation();"><font color=#ffffff face="comic,arial"> <b><<</b> </font></td>');
write('<td width=' + sliderwidth + '>');
write('<div id="divwrap" style="position:relative;width:'+ sliderwidth +'px;height:'+sliderheight+'px;overflow:hidden;background-color:'+slidebgcolor+';border-top:1px solid #000000;border-bottom:1px solid #000000;border-right:1px solid #000000;border-left:1px solid #000000;" onMouseover="stopanimation()">');
write('<div id="slidingGallery" style="vertical-align: middle;position:absolute;left:0px;top:0px"></div>');
write('</div>');
write('</td>');
write('<td bgcolor="#333333" onmouseover="startslideleft();" onmouseout="stopanimation();"><font color=#ffffff face="comic,arial"> <b>>></b> </font></td>');
write('</tr></table>');
}
window.onload=fillup;
//-->
</script>
</td></tr><tr><td align=center><img name="scrollGalleryImage" src="http://img.villagephotos.com/p/2001-1/3/JBPPH-Spitfire Restore 015.jpg" border=1 vspace=5 hspace=5></td></tr><tr bgcolor=#aaaaaa><td align=center><font size=1 face=verdana><b>Image Hosting and Pure Javascript Scrolling Zoom Gallery by <a href="http://www.villagephotos.com" target="_new">VillagePhotos.com</a></b></font></td></tr></table>
