...

View Full Version : Multiple slideshow



jamie smith
03-25-2005, 08:57 PM
Hi

Ive found a fading slideshow that Im really happy with as it works in all browsers the problem is that I want 2 slideshows to appear on the page. I have been trying to adapt the script but it still isnt working.
Any advice would be greatly appreciated.
thanks

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
<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='140px' //SET IMAGE WIDTH
var slideshow_height='225px' //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]="photo1.jpg"
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('<div style="position:relative;width:'+slideshow_width+';height :'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height :'+slideshow_height+';top:0;left:0;filter:alpha(op acity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height :'+slideshow_height+';top:0;left:0;filter:alpha(op acity=10);-moz-opacity:10;visibility: hidden"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1


function 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='<img src="'+fadeimages[nextimageindex]+'">'
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='setInterval("fadepic()",50)'
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='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
</body>
</html>

Willy Duitt
03-25-2005, 09:54 PM
Answered here and possibly elsewhere:
http://www.webdeveloper.com/forum/showthread.php?t=60694

_com
03-25-2005, 10:54 PM
there is a good demo slideshow here

http://www.couloir.org/js_slideshow

vwphillips
03-26-2005, 01:22 AM
for info this is what I came up with



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

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
var ImgAry1=new Array('Zero.gif','One.gif','Two.gif','Three.gif','Four.gif','Five.gif')
var ImgAry2=new Array('One.gif','Two.gif','Three.gif')

// preload Images
var zxcImgAry=ImgAry1+ImgAry2;
var zxcSRCAry=new Array();

for (zxc0=0;zxc0>zxcImgAry.length;i++){
zxcSRCAry[zxc0]=new Image();
zxcSRCAry[zxc0].src=ImgPath+zxcImgAry[zxc0];
}

// Customise Speed
var zxcSpeed=10;

// NO NEED to Change
var zxcCnt=0;
var zxcInc=0;
var zxcSSAry=new Array();
var zxcBrow=navigator.userAgent.toLowerCase();

function zxcInitSlideShows(zxcid,zxcary){
zxcObj=document.getElementById(zxcid);
zxcSSAry[zxcCnt]=new Array();
zxcSSAry[zxcCnt][0]=zxcid;
zxcSSAry[zxcCnt][1]=zxcary.length-1;
zxcSSAry[zxcCnt][2]=0;
for (zxc0=0;zxc0<zxcary.length;zxc0++){
zxcSSAry[zxcCnt][zxc0+4]=zxcObj.cloneNode(true);
zxcSSAry[zxcCnt][zxc0+4].id=zxcid+zxc0;
zxcObj.parentNode.appendChild(zxcSSAry[zxcCnt][zxc0+4]);
zxcSSAry[zxcCnt][zxc0+4].style.position='absolute';
zxcSSAry[zxcCnt][zxc0+4].src=ImgPath+zxcary[zxc0];
zxcSSAry[zxcCnt][zxc0+4].style.top=zxcTop(zxcObj)+'px';
zxcSSAry[zxcCnt][zxc0+4].style.left=zxcLeft(zxcObj)+'px';
zxcOpacity(zxcSSAry[zxcCnt][zxc0+4],0);
}
zxcOpacity(zxcSSAry[zxcCnt][4],100);
zxcObj.parentNode.removeChild(zxcObj);
zxcCnt++;
}

function zxcOpacity(zxcobj,zxcOp){
zxcSt=zxcobj.style;
if (zxcBrow.indexOf('mozilla')>-1&&zxcBrow.indexOf('msie')==-1){
zxcSt.MozOpacity=zxcOp/100;
}
else {
if (document.all){ zxcSt.filter='alpha(opacity='+zxcOp+')' }
else { zxcSt.MozOpacity=zxcOp+'%'; }
}
}

function zxcFade(){
zxcInc+=zxcSpeed;
zxcOpacity(zxcB,zxcInc);
zxcOpacity(zxcF,100-zxcInc);
if (zxcInc<100){ zxcTO=setTimeout("zxcFade()",10); }
else { zxcOpacity(zxcB,100); zxcOpacity(zxcF,0); zxcInc=0; }
}

function zxcFindSS(zxcid,zxcdir){
if (zxcInc){ return; }
for (zxc0=0;zxc0<zxcSSAry.length;zxc0++){
if (zxcid==zxcSSAry[zxc0][0]){
zxcSSRotate(zxcSSAry[zxc0],zxcdir)
}
}
}

function zxcSSRotate(zxcary,zxcdir){
zxcF=zxcary[zxcary[2]+4];
if (zxcdir=='Fwd'){
zxcary[3]=zxcary[2]+1;
if (zxcary[3]>zxcary[1]){ zxcary[3]=0; }
}
if (zxcdir=='Back'){
zxcary[3]=zxcary[2]-1;
if (zxcary[3]<0){ zxcary[3]=zxcary[1]; }
}
zxcB=zxcary[zxcary[3]+4];
zxcFade();
zxcary[2]=zxcary[3];
}

function zxcLeft(zxc){
zxcObjLeft=zxc.offsetLeft;
while(zxc.offsetParent!=null){
zxcObjParent=zxc.offsetParent;
zxcObjLeft+=zxcObjParent.offsetLeft;
zxc=zxcObjParent;
}
return zxcObjLeft;
}

function zxcTop(zxc){
zxcObjTop=zxc.offsetTop;
while(zxc.offsetParent!=null){
zxcObjParent=zxc.offsetParent;
zxcObjTop+=zxcObjParent.offsetTop;
zxc=zxcObjParent;
}
return zxcObjTop;
}

//-->
</script>

</head>

<body onload="zxcInitSlideShows('SS1',ImgAry1);zxcInitSlideShows('SS2',ImgAry2);" >



<table width="200" border="1" style="text-align:center;">
<tr>
<td colspan="2" >Slide Show 1</td>
</tr>
<tr height="200">
<td colspan="2" align="center" valign="middle" >
<img id="SS1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="180" height="180">
</td>
</tr>
<tr>
<td width="50%" onclick="javascript:zxcFindSS('SS1','Fwd');" >Forward</td>
<td width="50%" onclick="javascript:zxcFindSS('SS1','Back');" >Back</td>
</tr>
</table>
<table width="200" border="1" style="text-align:center;">
<tr>
<td colspan="2" >Slide Show 2</td>
</tr>
<tr height="200">
<td colspan="2" align="center" valign="middle" >
<img id="SS2" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="180" height="180">
</td>
</tr>
<tr>
<td width="50%" onclick="javascript:zxcFindSS('SS2','Fwd');" >Forward</td>
<td width="50%" onclick="javascript:zxcFindSS('SS2','Back');">Back</td>
</tr>
</table>

</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum