Test Index   ·   Photo Borders   ·   Table of sliced images - Rounded corners   ·   Sliced images and manually linked   ·   Overlap Images   ·   Create a Watermark   ·   Gif Png Transparency   ·   Buttons-Image Links   ·   Image Names   ·   Image Theft   ·   Lake Applet   ·   Other applets   ·   Slideshow1   ·   Slideshow2   ·   Slideshow3   ·   Galleries   ·   DD Thumbnail Viewer   ·   image map   ·   xara thumbnail   ·   Random Image   ·   LOGO BRANDING   ·   Animated Image   ·   photo with sound


Implement the Slideshow 1                          Another Slideshow implementation
As requested by visitor on the CSB web board.  (similar to this one)
This script comes from Dynamic Drive, modified to run in CSB by Samantha (added extra images also)
This script can:
use same or different size images
automatically flips (at speed you set)
allows linking from images, and
has optional comment below image  

NOTE:  This style slideshow scrolls upwards with the page.  If you want a slideshow as part of the background so the text scrolls beside it or over it, then check out the backgrounds area.





EASY STEPS:
1. Choose images.

2. Modify code:   put ^GEMDIR/ in code before each image!  (CSB3 still uses GEMDIR)

3. Insert the code: into Insert > HTML (Webgem )

4. Insert photo files into Webcomponents (Gem files )
Make sure capitalization is same as you used in the code (step 2)!



Download ORIGINAL Script from Dynamic Drive

THE CODE BELOW IS MODIFIED FOR USE IN CSB:
To capture the code, press Select All then COPY the contents.
Place code into an insert > HTML (webgem in Trellix)
MUST change each gEMDIR to GEMDIR before using code!
Select All
I have made notes in code below and it will effect functionality!
Use the Select All choice above!


NOTE: Change items in red to match yours
<script language="JavaScript1.2">

/***********************************************
* Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var variableslide=new Array()

//variableslide[x]=["^GEMDIR/path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]
variableslide[0]=['^GEMDIR/1.jpg', '', 'Angel Oak on Johns Island, SC']
variableslide[1]=['^GEMDIR/2.jpg', 'http://www.americanforests.org/htr/view_tree.php?tree_id=45', 'Angel Oak is on National Tree Registry.']
variableslide[2]=['^GEMDIR/3.jpg', '', '1500+ years old!']
variableslide[3]=['^GEMDIR/4.jpg', '', '17100 sq ft shade']
variableslide[4]=['^GEMDIR/5.jpg', '', '']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth='360px' //set to width of LARGEST image in your slideshow
var slideheight='480' //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor='#D8DCD8'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=5000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById

for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}

var currentslide=0

function rotateimages(){
contentcontainer='<center>'
if (variableslide[currentslide][1]!="")
contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
if (variableslide[currentslide][1]!="")
contentcontainer+='</a>'
contentcontainer+='</center>'
if (variableslide[currentslide][2]!="")
contentcontainer+=variableslide[currentslide][2]

if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility="show"
rotateimages()
}

if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider

</script>

<ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>