Log in

View Full Version : Blending image slideshow script


srb6101
12-30-2004, 10:44 PM
Warning- there is a lot of the code in here


I am attempting to use the blending image slideshow script:
http://www.dynamicdrive.com/dynamicindex14/image4.htm

to load 3 changing pictures on the same line:

i changed the variable names to corespond to a left center or right location on the script for my convience when looking at it:



this is the header information i have:


<!-- -->
<!-- -->
<!-- -->
<script language="JavaScript1.1">
<!--

//*****************************************
// Blending Image Slide Show Script-
// © Dynamic Drive (www.dynamicdrive.com)
// For full source code, visit http://www.dynamicdrive.com/
//*****************************************

//specify interval between slide (in mili seconds)
var leftslidespeed=3000

//specify images
var leftslideimages=new Array("image001.jpg","image002.jpg")

//specify corresponding links
var leftslidelinks=new Array("","")

var leftnewwindow=1 //open links in new window? 1=yes, 0=no

var leftimageholder=new Array()
var leftie=document.all
for (i=0;i<leftslideimages.length;i++){
leftimageholder[i]=new Image()
leftimageholder[i].src=leftslideimages[i]
}

function leftgotoshow(){
if (newwindow)
window.open(leftslidelinks[leftwhichlink])
else
window.location=leftslidelinks[leftwhichlink]
}

//-->
</script>
<!-- -->
<script language="JavaScript1.1">
<!--

//*****************************************
// Blending Image Slide Show Script-
// © Dynamic Drive (www.dynamicdrive.com)
// For full source code, visit http://www.dynamicdrive.com/
//*****************************************

//specify interval between slide (in mili seconds)
var centerslidespeed=3000

//specify images
var centerslideimages=new Array("image007.jpg","image008.jpg")

//specify corresponding links
var centerslidelinks=new Array("","")

var centernewwindow=1 //open links in new window? 1=yes, 0=no

var centerimageholder=new Array()
var centerie=document.all
for (i=0;i<centerslideimages.length;i++){
centerimageholder[i]=new Image()
centerimageholder[i].src=centerslideimages[i]
}

function centergotoshow(){
if (newwindow)
window.open(centerslidelinks[centerwhichlink])
else
window.location=centerslidelinks[centerwhichlink]
}

//-->
</script>

<!-- -->
<script language="JavaScript1.1">
<!--

//*****************************************
// Blending Image Slide Show Script-
// © Dynamic Drive (www.dynamicdrive.com)
// For full source code, visit http://www.dynamicdrive.com/
//*****************************************

//specify interval between slide (in mili seconds)
var rightslidespeed=3000

//specify images
var rightslideimages=new Array("image005.jpg","image006.jpg")

//specify corresponding links
var rightslidelinks=new Array("","")

var rightnewwindow=1 //open links in new window? 1=yes, 0=no

var rightimageholder=new Array()
var rightie=document.all
for (i=0;i<rightslideimages.length;i++){
rightimageholder[i]=new Image()
rightimageholder[i].src=rightslideimages[i]
}

function rightgotoshow(){
if (newwindow)
window.open(rightslidelinks[rightwhichlink])
else
window.location=rightslidelinks[rightwhichlink]
}

//-->
</script>

<!-- ************************************************************************ -->
<!-- ** ** -->
<!-- ** End of Web Page Header Section ** -->
<!-- ** ** -->
<!-- ************************************************************************ -->
<!-- -->
</HEAD>
<!-- -->

this is the body section


<body>

<!-- ************************************************************************** -->
<!-- ** ** -->
<!-- ** Web Page Body Section ** -->
<!-- ** ** -->
<!-- ************************************************************************** -->

<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- ************************************************************************** -->
<!-- ** ** -->
<!-- ** Blended image script ** -->
<!-- ** ** -->
<!-- ************************************************************************** -->
<P align=left>


<a href="javascript:leftgotoshow()"><img src="image001.jpg" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100>

<script language="JavaScript1.1">
<!--

var leftwhichlink=0
var leftwhichimage=0
var leftblenddelay=(leftie)? document.images.slide.filters[0].duration*1000 : 0
function leftslideit(){
if (!document.images) return
if (leftie) document.images.slide.filters[0].apply()
document.images.slide.src=leftimageholder[leftwhichimage].src
if (leftie) document.images.slide.filters[0].play()
leftwhichlink=leftwhichimage
leftwhichimage=(leftwhichimage<leftslideimages.length-1)? leftwhichimage+1 : 0
setTimeout("leftslideit()",leftslidespeed+leftblenddelay)
}
leftslideit()

//-->
</script>
</p>
<!-- -->

<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- ************************************************************************** -->
<!-- ** ** -->
<!-- ** Blended image script ** -->
<!-- ** ** -->
<!-- ************************************************************************** -->
<P align=center>


<a href="javascript:centergotoshow()"><img src="image007.jpg" name="slide" border=0 style="filter:blendTrans(duration=3)" position=right width=97 height=100>

<script language="JavaScript1.1">
<!--

var centerwhichlink=0
var centerwhichimage=0
var centerblenddelay=(centerie)? document.images.slide.filters[0].duration*1000 : 0
function centerslideit(){
if (!document.images) return
if (centerie) document.images.slide.filters[0].apply()
document.images.slide.src=centerimageholder[centerwhichimage].src
if (centerie) document.images.slide.filters[0].play()
centerwhichlink=centerwhichimage
centerwhichimage=(centerwhichimage<centerslideimages.length-1)? centerwhichimage+1 : 0
setTimeout("centerslideit()",centerslidespeed+centerblenddelay)
}
centerslideit()

//-->
</script>
</p>
<!-- -->

<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- -->
<!-- ************************************************************************** -->
<!-- ** ** -->
<!-- ** Blended image script ** -->
<!-- ** ** -->
<!-- ************************************************************************** -->
<P align=right>


<a href="javascript:rightgotoshow()"><img src="image005.jpg" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>

<script language="JavaScript1.1">
<!--

var rightwhichlink=0
var rightwhichimage=0
var rightblenddelay=(rightie)? document.images.slide.filters[0].duration*1000 : 0
function rightslideit(){
if (!document.images) return
if (rightie) document.images.slide.filters[0].apply()
document.images.slide.src=rightimageholder[rightwhichimage].src
if (rightie) document.images.slide.filters[0].play()
rightwhichlink=rightwhichimage
rightwhichimage=(rightwhichimage<rightslideimages.length-1)? rightwhichimage+1 : 0
setTimeout("rightslideit()",rightslidespeed+rightblenddelay)
}
rightslideit()

//-->
</script>
</p>





when i run it i receive the initial 3 pictures but ONLY the right picture changes
and that appears to occasionally load one of the other sets of pictures. (i think)

any idea what i might need to correct or change to fix it?
cr3ative
12-31-2004, 09:22 AM
Sorry, but you can only use one script per page. Using more than one is a "script customization" which takes a lot of time.

cr3ative
Minos
12-31-2004, 09:23 AM
well, to start with...the idea of six nearly identical javascripts in the same page is a little messy, and I might help clean it up a bit. For now, though, the only thing I've noticed is that your images are all called 'slide', as long as you're doing it this way, change the center and the right names, and it 'might' work...

*nods towards creative's post*
cr3ative
12-31-2004, 12:05 PM
Forgot to mention, there's a link in my signature "Management of 2+ scripts" which will help you undertake the process.

It's just very time consuming.. :)

Happy new year.
cr3ative
srb6101
01-01-2005, 05:18 PM
Minos ,

the tip about slide was the fix and i do appreciate it. now if i could just find out whats turnign on the underline in the middle i would have it made lol
Minos
01-02-2005, 09:09 AM
**FINAL**



<html>
<head>
<title>Untitled</title>
<script language="javascript">
<!--

//specify interval between slide (in mili seconds)
var slidespeed=1000

//specify images
var slideimages=new Array()
slideimages[0]=new Array("DSCF0075.JPG","DSCF0076.JPG")
slideimages[1]=new Array("DSCF0077.JPG","DSCF0078.JPG")
slideimages[2]=new Array("DSCF0078.JPG","DSCF0079.JPG")

//specify corresponding links
var slidelinks=new Array()
slidelinks[0]=new Array("","")
slidelinks[1]=new Array("","")
slidelinks[2]=new Array("","")

var newwindow=new Array()
newwindow[0]=1
newwindow[1]=1
newwindow[2]=1

var imageholder=new Array()
var ie=document.all
for (i=0;i<slideimages.length;i++)
imageholder[i]=new Array(slideimages[i].length)

for (i=0;i<slideimages.length;i++)
for (e=0; e<slideimages[i].length; e++){
imageholder[i][e]=new Image()
imageholder[i][e].src=slideimages[i][e]
}


function gotoshow(num){
if (newwindow[num])
window.open(slidelinks[num][whichlink[num]])
else
window.location=slidelinks[num][whichlink[num]]
}

//-->
</script>

</HEAD>


this is the body section


<body>

<P align=left>
<a href="javascript:gotoshow(0)"><img src="DSCF0075.JPG" name="slide0" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>
</p>

<P align=center>
<a href="javascript:gotoshow(1)"><img src="DSCF0076.JPG" name="slide1" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>
</p>

<P align=right>
<a href="javascript:gotoshow(2)"><img src="DSCF0077.JPG" name="slide2" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>
</p>

<script language="JavaScript">

var whichlink=new Array(slideimages.length)

var whichimage=new Array(slideimages.length)

var name="slide"

for (i=0; i<slideimages.length;i++){
whichlink[i]=0
name="slide" + i
whichimage[i]=0
blenddelay=(ie)? document.images[name].filters[0].duration*1000 : 0
}

var delay=slidespeed+blenddelay

function slideit(){
for (i=0;i<slideimages.length;i++){
name="slide" + i
if (!document.images) return
if (ie) document.images[name].filters[0].apply()
document.images[name].src=imageholder[i][whichimage[i]].src
if (ie) document.images[name].filters[0].play()
whichlink[i]=whichimage[i]
whichimage[i]=(whichimage[i]<slideimages[i].length-1)? whichimage[i]+1 : 0
}
setTimeout("slideit()",delay)
}

slideit();

</script>

</body>
</html>


oh, threw in my own links and images so I could work on it...
Please remember to get the copyright information back, I deleted it to save space while I was messing.
Minos
01-03-2005, 08:02 AM
Now the above code works, didn't notice I had the setTimeout in a loop. If you have any questions on how to get your stuff in, just ask, and I'll help.

The only thing is, the delay has to be the same for all three as is. If you need otherwise, I can see what I can do. But enjoy, nonetheless.