Try out this demo, if you add more table cells/images to display, you must create the new table cells in the HTML code and assign them incremental id's (highlighted red) as in this demo (see additional notes at bottom):
Code:
<html>
<head>
<title>TESTING ROTATION</title>
<style type="text/css">
/*set CSS for SPAN tag surrounding each image*/
.seqslidestyle{
}
</style>
</head>
<body bgcolor="black">
<br><br>
<center>
<table width="740" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="740" colspan="4" bgcolor="#000000"> </td>
</tr>
<tr>
<td id="m0" width="185" valign="top" bgcolor="#cccccc"><img src="images/alligator.jpg" width="185" height="200" class="main"></td>
<td width="185" valign="top" bgcolor="#000000"> </td>
<td id="m1" width="185" valign="top" bgcolor="#cccccc"><img src="images/bird.jpg" width="185" height="200" class="main"></td>
<td width="185" valign="top" bgcolor="#000000"> </td>
</tr>
<tr>
<td width="185" valign="top" bgcolor="#000000"> </td>
<td id="m2" width="185" valign="top" bgcolor="#cccccc"><img src="images/portrait.jpg" width="185" height="200" class="main"></td>
<td width="185" valign="top" bgcolor="#000000"> </td>
<td id="m3" width="185" valign="top" bgcolor="#cccccc"><img src="images/window.jpg" width="185" height="200"class="main"></td>
</tr>
<tr>
<td width="740" colspan="4" bgcolor="#000000"> </td>
</tr>
</table>
<script type="text/javascript">
/***********************************************
* MultiFrame Image Slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var seqslides=new Array()
//Set Path to Image plus optional URL ("" for no URL):
seqslides[0]=["images/alligator.jpg", ""]
seqslides[1]=["images/bird.jpg", ""]
seqslides[2]=["images/bee.jpg", ""]
seqslides[3]=["images/window.jpg", ""]
seqslides[4]=["images/bird.jpg", ""]
//Set pause between each image display (7000=7 second):
var slidedelay=3000
//Set how many images to show at once (must be less than total # of images above):
var slidestoreveal=4
//Specify code to insert between each slide (ie: "<br>" to insert a line break and create a vertical layout)
//"" for none (or horizontal):
var slideseparater=""
//Set optional link target to be added to all images with a link:
var optlinktarget="secwindow"
//Set image border width:
var imgborderwidth=0
//Set opacity value of each image when it's "dimmed", and when it's not, respectively (1=100% opaque/normal).
//Change 0.2 to 0 to completely hide image when it's dimmed:
var opacityvalues=[0.2,1]
///No need to edit beyond here///////////
function processimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}
var curslide=1 //var to track current slide (total: slidestoreveal)
var curimgindex=0 //var to track current image (total: seqslides.length)
var isfirstcycle=1 //boolean to indicate whether this is the first cycle
if (document.getElementById){
for (i=0;i<slidestoreveal;i++)
document.getElementById('m'+i).innerHTML='<span id="seqslide'+i+'" class="seqslidestyle">'+processimgcode(seqslides[i])+'</span>'+slideseparater
curimgindex=slidestoreveal
illuminateslide(0,opacityvalues[1])
}
function illuminateslide(slideindex, amt){
var slideobj=document.getElementById("seqslide"+slideindex).getElementsByTagName("IMG")[0]
if (slideobj.filters)
slideobj.filters.alpha.opacity=amt*100
else if (slideobj.style.MozOpacity)
slideobj.style.MozOpacity=amt
}
function displayit(){
if (curslide<slidestoreveal){
if (!isfirstcycle)
changeimage(curslide)
illuminateslide(curslide, opacityvalues[1])
curslide++
}
else{
isfirstcycle=0
for (i=0;i<slidestoreveal;i++)
illuminateslide(i, opacityvalues[0])
changeimage(0)
illuminateslide(0, opacityvalues[1])
curslide=1
}
}
function changeimage(slideindex){
document.getElementById("seqslide"+slideindex).innerHTML=processimgcode(seqslides[curimgindex])
curimgindex++
if (curimgindex>=seqslides.length)
curimgindex=0
}
if (document.getElementById)
setInterval("displayit()",slidedelay)
</script>
</body>
</html>
Notes: Script is edited, do not use the original. The style section at the top of this demo is no longer needed, unless you want to use it for something else. The script must follow the table container in the code as shown above. The actual images in the table are just placeholders now but, should remain for non-javascript enabled browsers. If you want the dark background for the images when they are washed out, set it to #000000 in the table cells.
New Comer (less than 5 posts)
Location of images in script?
Posting Permissions
Reply With Quote
Bookmarks