Announcement

**vwphillips** · Jul 31, 2005, 02:09 PM

have you googled for Slide Show?

or

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
</head>

<body onload="sssInit('ThumbNails','sssMainImg','sssMessage');zxcRemoveTNails();">
<span class="Title2" >Simple Slide Show</span><br>
A Simple Slide Show which includes<br>
Display of a Large Image on Slide Show Forward or Back<br>
Display of a Large Image on Clicking The Thumb Nail Image<br>
Preloading of the Large Image before Displaying.<br>
Directory Swapping when preloading the large image.<br>
<br>
Script<br>
<br>
<br>
<table border=1 cellspacing=1 cell padding=1 bgcolor=#FFCC66>
  <tr height="20" >
    <td colspan="3" align="center" style="font-Size:12px;" >
     Click the Thumb Image to Enlarge<br>
     Click the Large Image<br>
     to View in Picture Frames
    </td>
  </tr>
  <tr height="200" >
    <td colspan="3" align="center" >
    <img id="sssMainImg" src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/Initial.gif"  >
    </td>
  </tr>
  <tr>
    <td width=70 align="center" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Left1.gif" width=20 height=20 onclick="sssSSBack();" ></td>
    <td id="sssMessage" width=60 align="center" style="font-Size:12px;" >&nbsp;</td>
    <td width=70 align="center" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Right1.gif" width=20 height=20 onclick="sssSSFwd();" ></td>
  </tr>
</table>

<table id="ThumbNails" >
  <tr>
    <td align="center" width="70"><img  src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbPortrait/picasso.jpg" width=50 height=60 ></td>
    <td align="center"  width="70"><img  src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbPortrait/Pic1.jpg" width=50 height=60 ></td>
    <td align="center"  width="70"><img  src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbPortrait/Pic2.jpg" width=50 height=60 ></td>
  </tr>
  <tr>
    <td align="center"><img  src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbLandScape/picasso.jpg" width=60 height=50 ></td>
    <td align="center" ><img  src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbLandScape/Pic1.jpg" width=60 height=50 ></td>
    <td align="center" ><img  src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbLandScape/Pic2.jpg" width=60 height=50 ></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
<script language="JavaScript" type="text/javascript">
<!--

function zxcRemoveTNails(){
  zxct=document.getElementById('ThumbNails');
  zxct.style.position='absolute';
  zxct.style.visibility='hidden';

}
//-->
</script>

<script language="JavaScript" type="text/javascript">
<!--
// Simple Slide Show sssPart1 (02-07-2005)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// A Simple Slide Show which includes
// Display of a Large Image on Slide Show Forward or Back
// Display of a Large Image on Clicking The Thumb Nail Image
// Preloading of the Large Image before Displaying
// Directory Swapping when preloading the large image.

// The Thumb Nail and Large Image must have the same file name but different directories.
// Directory Swapping is carried outwhen preloading the large image.

// Application Notes

// The ThumbNail Images are defined in HTML Code and nested within an Element
// e.g.
//<table id="*ThumbNails*" >
//  <tr>
//    <td align="center" width="70"><img  src="ThumbPortrait/picasso.jpg" width=50 height=60 ></td>
//    <td align="center"  width="70"><img  src="ThumbPortrait/Pic1.jpg" width=50 height=60 ></td>
//    <td align="center"  width="70"><img  src="ThumbPortrait/Pic2.jpg" width=50 height=60 ></td>
//  </tr>
//  <tr>
//    <td align="center"><img  src="ThumbLandScape/picasso.jpg" width=60 height=50 ></td>
//    <td align="center" ><img  src="ThumbLandScape/Pic1.jpg" width=60 height=50 ></td>
//    <td align="center" ><img  src="ThumbLandScape/Pic2.jpg" width=60 height=50 ></td>
//  </tr>
// </table>

// where:
// *ThumbNails* = a unique id name (string)

// The Large Image is Defined in HTML Code
// e.g.  <img id="*LargeImageID*" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" >

// where:
// *LargeImage* = a unique id name (string)
// A 'Blank' .gif is the initial image src.

// The Slide Show Controls are Defined in HTML Code
// e.g.
// <table>
//  <tr>
//    <td width=70 align="center" >
//      <img src="http://www.vicsjavascripts.org.uk/StdImages/Left1.gif" width=20 height=20 onclick="sssSSBack();" >
//    </td>
//    <td id="*Message*" width=60 align="center" style="font-Size:12px;" ></td>
//    <td width=70 align="center" >
//     <img src="http://www.vicsjavascripts.org.uk/StdImages/Right1.gif" width=20 height=20 onclick="sssSSFwd();" >
//    </td>
//  </tr>
// </table>

// The onclick event call functions 'sssSSBack();' and 'sssSSFwd();' control the Side Show
// A message to advise on Large Image preload statue is optional
// where:
// *Message* = a unique id name (string)

// The Script is initalised from a <BODY> on load event
// e.g. <body onload="sssInit('*ThumbNails*','*LargeImage*','*Message*');" >
// where:
// *ThumbNails* = a unique id name (string)
// *LargeImage* = a unique id name (string)
// *Message*    = a unique id name (string)

// Directory Swapping
// The Thumb Nail and Large Image must have the same file name
// but different directories.
// These Directories are defined in customising variables 'sssThumbDirectory' and 'sssLargeDirectory'
// To allow a number of directory applications the directories are specified in dimensioned arrays.
// When the directory of the Thumb Nail image matches a directory in 'sssThumbDirectory'
// the location of the Large image will be the corresponding field of 'sssLargeDirectory'

// All variable, function etc. names are prefixed with 'sss' to minimise conflicts with other JavaScripts.

// The Functional Code sssPart2(less than 1.5K) is best as an Extenal JavaScript


// Tested with IE6 and Mozilla FoxFire



// Customising Variables

var sssThumbDirectory = new Array('ThumbPortrait','ThumbLandScape');
var sssMainDirectory  = new Array('LargePortrait','LargeLandScape');


//-->
</script>

<script language="JavaScript" type="text/javascript">
<!--
// Simple Slide Show sssPart2 (02-07-2005)
// by Vic Phillips http://www.vicsjavascripts.org.uk


// Functional Code - NO Need to change
var sssTarget,sssImg,sssMess;
var sssImgAry=new Array();
var sssImage=new Array();

var sssCnt=-1;

function sssInit(tn,li,m){
 sssTarget=document.getElementById(li);
 sssImg=document.getElementById(tn).getElementsByTagName('IMG');
 sssMess=document.getElementById(m);
 for (sss0=0;sss0<sssImg.length;sss0++){
  sssImgAry[sss0]=sssImg[sss0];
  sssImg[sss0].nu=sss0-1;
  sssImg[sss0].onclick=function(){ sssCnt=this.nu; sssSSFwd(); }
 }
}

function sssSSBack(){
 sssCnt--;
 if (sssCnt<0){ sssCnt=sssImg.length-1; }
 sssLoad();
}

function sssSSFwd(){
 sssCnt++;
 if (sssCnt==sssImg.length){ sssCnt=0; }
 sssLoad();
}

function sssLoad(){
 if (sssImage[sssCnt]){
  sssTarget.src=sssImage[sssCnt].src;
 }
 else {
  if (sssMess){ sssMess.innerHTML='Please Wait'; }
  sssThisImg=sssImg[sssCnt];
  for (sss0=0;sss0<sssThumbDirectory.length;sss0++){
   sssImg[sssCnt].src=sssImg[sssCnt].src.replace(sssThumbDirectory[sss0],sssMainDirectory[sss0]);
  }
  sssImage[sssCnt]=new Image();
  sssImage[sssCnt].onload=function(){
                           if (sssMess){ sssMess.innerHTML='&nbsp;'; }
                           sssTarget.src=sssImage[sssCnt].src;
                          }
  sssImage[sssCnt].src=sssImg[sssCnt].src;
 }
}



//-->
</script>

</body>

</html>

I added function zxcRemoveTNails() to hide the thumbnails.
Remove this from the <BODY> onload call to see the thumbnails

These could be large images if you wish

**mw2005** · Aug 1, 2005, 04:15 AM

That's what i already have.

**mw2005** · Aug 1, 2005, 08:50 AM

Sorted!

**vwphillips** · Aug 1, 2005, 02:31 PM

http://www.vicsjavascripts.org.uk/Ba...hSlideShow.htm

**mw2005** · Aug 1, 2005, 02:43 PM

This is the code of the final product. For more thumbnails at the bottom move your mouse left and right on the thubnails. If you click on one of the thumbnails it appears in a larger picture above. It also has a preloaded image at the start before you click on a thumbnail.

NOTE: Currently it only works in IE

Code:

<style type="text/css">
img { border: 1px solid #000 }

#container {
text-align: center;
border: 0px solid #000;
margin: 0 auto;
height: 300px;
width: 600px;
padding: 20px
}

#leftcol img {
margin: 10px;
width: 100px;
height: 100px
}

#rightcol img {
margin: 10px;
width: 200px;
height: 200px;
}

</style>

<style>

#motioncontainer a img{ /*image border color*/
border: 1px solid #ccc;
}

#motioncontainer a:hover img{ /*image border hover color*/
border: 1px solid navy;
}

#motioncontainer a:hover{
color: red; /* Dummy definition to overcome IE bug */
}

#statusdiv{
position: absolute;
padding: 2px;
left: -300px;
background-color: lightyellow;
border: 0px solid gray;
visibility: hidden;
}
</style>

<script type="text/javascript">

/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* Last updated Mar 15th, 04'. Added "End of Gallery" message.
* This copyright notice must stay intact for legal use
***********************************************/

var restarea=6 //1) width of the "neutral" area in the center of the gallery in px
var maxspeed=7 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.
var endofgallerymsg="<span style='font-size: 11px'></span>" //3) message to show at end of gallery. Enter "" to disable message.

function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //set 500px to  default height
var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
window.open(path,"", winattributes)
}

////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById
var scrollspeed=0
var movestate=""

var actualwidth=''
var cross_scroll, ns_scroll
var loadedyes=0

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function creatediv(){
statusdiv=document.createElement("div")
statusdiv.setAttribute("id","statusdiv")
document.body.appendChild(statusdiv)
statusdiv=document.getElementById("statusdiv")
statusdiv.innerHTML=endofgallerymsg
}

function positiondiv(){
menuheight=parseInt(crossmain.offsetHeight)
mainobjoffsetH=getposOffset(crossmain, "top")
statusdiv.style.left=mainobjoffset+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px"
statusdiv.style.top=menuheight+mainobjoffsetH+"px"
}

function showhidediv(what){
if (endofgallerymsg!="")
statusdiv.style.visibility=what
}

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function moveleft(){
if (loadedyes){
movestate="left"
if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px"
showhidediv("hidden")
}
else
showhidediv("visible")
}
lefttime=setTimeout("moveleft()",10)
}

function moveright(){
if (loadedyes){
movestate="right"
if (iedom&&parseInt(cross_scroll.style.left)<0){
cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px"
showhidediv("hidden")
}
else
showhidediv("visible")
}
righttime=setTimeout("moveright()",10)
}

function motionengine(e){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var curposy=window.event? event.clientX : e.clientX? e.clientX: ""
curposy-=mainobjoffset-dsocx
var leftbound=(menuwidth-restarea)/2
var rightbound=(menuwidth+restarea)/2
if (curposy>rightbound){
scrollspeed=(curposy-rightbound)/((menuwidth-restarea)/2) * maxspeed
if (window.righttime) clearTimeout(righttime)
if (movestate!="left") moveleft()
}
else if (curposy<leftbound){
scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed
if (window.lefttime) clearTimeout(lefttime)
if (movestate!="right") moveright()
}
else
scrollspeed=0
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function stopmotion(e){
if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
if (window.lefttime) clearTimeout(lefttime)
if (window.righttime) clearTimeout(righttime)
movestate=""
}
}

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
menuwidth=parseInt(crossmain.style.width)
mainobjoffset=getposOffset(crossmain, "left")
cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("trueContainer").offsetWidth

crossmain.onmousemove=function(e){
motionengine(e)
}

crossmain.onmouseout=function(e){
stopmotion(e)
showhidediv("hidden")
}
}
loadedyes=1
if (endofgallerymsg!=""){
creatediv()
positiondiv()
}
}
window.onload=fillup
</script>
<div id="container" style="width: 859px; height: 520px">

<div id="rightcol">
<img id="ImageOnly" name="ImageOnly" src="CLIP.GIF" width="350" height="350" />
<p>&nbsp;</div>
<div id="motioncontainer" style="position:relative;width:500px;height:200px;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;" align="center">

<nobr id="trueContainer"><a href="#" onclick="ImageOnly.src='Coding/Other/image1.gif'">
<div id="leftcol">
<img src="Coding/Other/image1.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image2.gif'">
<img src="Coding/Other/image2.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image3.gif'">
<img src="Coding/Other/image3.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image1.gif'">
<img src="Coding/Other/image1.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image2.gif'">
<img src="Coding/Other/image2.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image3.gif'">
<img src="Coding/Other/image3.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image1.gif'">
<img src="Coding/Other/image1.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image2.gif'">
<img src="Coding/Other/image2.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image3.gif'">
<img src="Coding/Other/image3.gif" border=1 width="200" height="200"></a> <a href="#" onclick="ImageOnly.src='Coding/Other/image1.gif'">
</nobr>

</div>
</div>
<p>&nbsp;</p>

Announcement

image controls

image controls

Comment

Comment

Comment

Comment

Comment