PDA

View Full Version : Dynamic Fade In Slide Show



muffin
02-01-2005, 12:39 AM
I am trying to place this script into my site - but I am placing it into a cell of a table. It seems to work fine outside the table. Is it designed to work in a table? I am a real novice so I am sorry for asking what may be a dumb question.

many thanks

simonf
02-01-2005, 11:52 AM
.

What are you trying to do??? move it around the page??? try placing in a seperate layer and position the layer.

casibbald
03-02-2005, 04:31 PM
I am trying to get the following fadaway to work...with no luck.

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

This is what i have in my page.

<table style="text-align: left; border-collapse: separate; width: 523px; height: 400px;" width="523" height="400" cellspacing="0" cellpadding="2" border="0"><tbody><tr><td style=" width: 1px; text-align: left; vertical-align: top; height: 157px;"><br />
</td><td style=" width: 522px; vertical-align: top; height: 157px;" rowspan="1" colspan="3"><br />
</td><td style=" width: 1px; vertical-align: top; height: 157px;" align="left"><br />
</td></tr><tr><td style=" text-align: center; vertical-align: top; height: 20px;"><br />
</td><td style=" vertical-align: top; height: 20px;" align="center"><font color="#768ea5"><strong>Solve Difficult Problems</strong></font><br />
</td><td style=" vertical-align: top; height: 20px;" align="center"><font color="#768ea5"><strong>Maximise Return on Investment</strong></font><br />
</td><td style=" vertical-align: top; height: 20px;" align="center"><font color="#768ea5"><strong>Improve Visibility &amp; Control</strong></font><br />
</td><td style=" vertical-align: top; height: 20px;" align="undefined"><br />
</td></tr><tr><td style=" width: 1px; text-align: left; vertical-align: top; height: 80px;"><br />
</td><td style=" width: 118px; vertical-align: top; height: 80px;" align="undefined" rowspan="1" colspan="1">
SOHO Gateway &amp; VPN Security
<br />
Browser-Based File Access
<br />
Secure Extranet Applications
<br />
</td><td style=" vertical-align: top; height: 80px;" align="left" colspan="1">
Reduce IT Costs
<br />
Better Utilise Bandwidth </td><td style=" vertical-align: top; height: 80px;" align="left">
Manage Bandwidth
<br />
Monitor Utilisation
<br />
Optimize Multiple Connections
</td><td style=" vertical-align: top; height: 80px;" align="center"><br />
</td></tr><tr><td style=" text-align: center; vertical-align: top; height: 20px;"><br />
</td><td style=" vertical-align: top; height: 20px;" align="center"><font color="#768ea5"><strong>What Customers Say</strong></font><br />
</td><td style=" vertical-align: top; height: 20px;" align="center"><font color="#768ea5"><strong>Experts Opinions</strong></font><br />
</td><td style=" vertical-align: top; height: 20px;" align="center"><font color="#768ea5"><strong>News</strong></font><br />
</td><td style=" vertical-align: top; height: 20px;" align="undefined"><br />
</td></tr><tr><td style=" width: 1px; text-align: left; vertical-align: top; height: 115px;"><br />
</td><td style=" width: 173px; vertical-align: top; height: 115px;" align="left">
<script language="JavaScript1.2" type="text/javascript">
/***********************************************
* Fade-in 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 slideshow_width=&#039;140px&#039; //SET IMAGE WIDTH
var slideshow_height=&#039;225px&#039; //SET IMAGE HEIGHT
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="http://www.inventigo.co.uk/tickers/logo_arabtec.gif"
fadeimages[1]="photo2.jpg"
fadeimages[2]="photo3.jpg"
////NO need to edit beyond here/////////////
var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}
var ie4=document.all
var dom=document.getElementById
if (ie4||dom)
document.write(&#039;<div style="position:relative;width:&#039;+slideshow_width+&#039;;height:&#039;+slideshow_height+&#039;;overflow:hidden"><div id="canvas0" style="position:absolute;width:&#039;+slideshow_width+&#039;;height:&#039;+slideshow_height+&#039;;top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:&#039;+slideshow_width+&#039;;height:&#039;+slideshow_height+&#039;;top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>&#039;)
else
document.write(&#039;<img name="defaultslide" src="&#039;+fadeimages[0]+&#039;">&#039;)
var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/101
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=&#039;<img src="&#039;+fadeimages[nextimageindex]+&#039;">&#039;
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
var tempobj2=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj2.style.visibility="hidden"
setTimeout("rotateimage()",pause)
}
}
function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
tempobj.style.visibility="visible"
var temp=&#039;setInterval("fadepic()",50)&#039;
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}
function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/101
}
function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML=&#039;<img src="&#039;+fadeimages[curimageindex]+&#039;">&#039;
rotateimage()
}
if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)
</script><br />
</td><td style=" width: 173px; vertical-align: top; height: 115px;" align="left" rowspan="1" colspan="1">
<iframe width="165" scrolling="no" height="114" frameborder="1" id="tickermain" src="/tickers/news.htm" marginwidth="0" marginheight="0" hspace="0" vspace="0"></iframe> <br />
</td><td style=" width: 173px; vertical-align: top; height: 115px;" align="left">
<iframe width="165" scrolling="no" height="114" frameborder="1" id="tickermain" src="/tickers/news.htm" marginwidth="0" marginheight="0" hspace="0" vspace="0"></iframe> <br />
</td><td style=" vertical-align: top; height: 115px;" align="undefined"><br />
</td></tr></tbody></table>