 |
|
|
Search this site!
|
 |
 |
|
Slideshow Script
|
Description:
|
Thi slideshow script will display several images, one at a time on your page. It comes from our friends at Dynamic Drive!
|
How to use:
|
1. Select the images you wish to use. It's best if all images are fairly equal in size. Identify the width and height of the largest of your images.
For my test, I used 4 thumbnail photos (size: 100x68). Images are named pic1.jpg, pic2.jpg, pic3.jpg, and pic4.jpg.
2. Startup CSB, and click on INSERT > HTML CODE. Then copy and paste the code provided at the bottom of this page. Edit the code for names of your images, as well as the width & height.
3. Click on Files for this Component, and add in the image files you are using.
4. Close, save and publish!
|
Example:
|
Free DHTML scripts provided by |
Download the code
right click on link, then click on 'Save target (or frame) as'
|
|
Other information:
|
|
Source code: (as modified for this page)
<script language="JavaScript1.2">
/*
Modified for use with CuteSITE Builder by Kevin Weilbacher 1-1-2003
Left-Right image slideshow Script-
By Dynamic Drive (www.dynamicdrive.com)
For full source code, terms of use, and 100's more scripts, visit http://dynamicdrive.com
*/
///////configure the below four variables to change the style of the slider///////
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth=100
var scrollerheight=70
var scrollerbgcolor='white'
//3000 miliseconds=3 seconds
var pausebetweenimages=3000
//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]='<img src="^GEMDIR/pic1.jpg" border=0"></a>'
slideimages[1]='<img src="^GEMDIR/pic2.jpg">'
slideimages[2]='<img src="^GEMDIR/pic3.jpg">'
slideimages[3]='<img src="^GEMDIR/pic4.jpg">'
//extend this list
///////Do not edit pass this line///////////////////////
if (slideimages.length>1)
i=2
else
i=0
function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.left>0&&tlayer.left<=5){
tlayer.left=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.left>=tlayer.document.width*-1){
tlayer.left-=5
setTimeout("move1(tlayer)",100)
}
else{
tlayer.left=scrollerwidth+5
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.left>0&&tlayer2.left<=5){
tlayer2.left=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.left>=tlayer2.document.width*-1){
tlayer2.left-=5
setTimeout("move2(tlayer2)",100)
}
else{
tlayer2.left=scrollerwidth+5
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move3(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelLeft>0&&tdiv.style.pixelLeft<=5){
tdiv.style.pixelLeft=0
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(second2)",pausebetweenimages)
return
}
if (tdiv.style.pixelLeft>=tdiv.offsetWidth*-1){
tdiv.style.pixelLeft-=5
setTimeout("move3(tdiv)",100)
}
else{
tdiv.style.pixelLeft=scrollerwidth
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move4(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelLeft>0&&tdiv2.style.pixelLeft<=5){
tdiv2.style.pixelLeft=0
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(first2)",pausebetweenimages)
return
}
if (tdiv2.style.pixelLeft>=tdiv2.offsetWidth*-1){
tdiv2.style.pixelLeft-=5
setTimeout("move4(second2)",100)
}
else{
tdiv2.style.pixelLeft=scrollerwidth
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function startscroll(){
if (document.all){
move3(first2)
second2.style.left=scrollerwidth
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.left=scrollerwidth+5
document.main.document.second.visibility='show'
}
}
window.onload=startscroll
</script>
<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; visibility=hide>
<layer id="first" left=1 top=0 width=&{scrollerwidth}; >
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[1])
</script>
</layer>
</ilayer>
<script language="JavaScript1.2">
if (document.all){
document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1;top:0;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')
}
</script>
<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
|