PDA

View Full Version : Help with Blending Image Slideshow



ck2977
08-02-2007, 07:17 PM
1) Script Title: Blending Image Slideshow

2) (see script below)
Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/image4.htm

3) Describe problem:
could anyone tell me how i can change the speed of the motion halfway through? basically i want the text to read quickly and the images to read slowly so I need to change the motion speed at 'fade image 17' of this script below, any hints/alternatives greatly appreciated. x

<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='650px' //500
var slideshow_height='180px' //475
var pause=250//SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array()
//SET 1) IMAGE PATHS, 2) optional link, 3), optional link target:
fadeimages[0]=["images/if.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[1]=["images/you.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[2]=["images/could.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[3]=["images/describe.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[4]=["images/yourself.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[5]=["images/through.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[6]=["images/art.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[7]=["images/comma.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[8]=["images/which.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[9]=["images/style.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[10]=["images/would.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[11]=["images/you2.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[12]=["images/chose.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[13]=["images/dot.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[14]=["images/dot2.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[15]=["images/dot3.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[16]=["images/questionmark.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[17]=["images/Ad1.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax[/b]fadeimages[18]=["images/Ad2.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[19]=["images/Ad3.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[20]=["images/Ad4.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[21]=["images/Ad5.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[22]=["images/Ad6.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[23]=["images/Ad7.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[24]=["images/Ad9.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax
fadeimages[25]=["images/Ad10.jpg", "http://www.commissionyourown.com/exhibition.htm", ""] //image with link syntax




////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][0]
}

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(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;visibility: hidden"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0][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=insertimage(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 insertimage(i){
var tempcontainer=fadeimages[i][1]!=""? '<a href="'+fadeimages[i][1]+'" target="'+fadeimages[i][2]+'">' : ""
tempcontainer+='<img src="'+fadeimages[i][0]+'" border="0">'
tempcontainer=fadeimages[i][1]!=""? tempcontainer+'</a>' : tempcontainer
return tempcontainer
}

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][0]
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=insertimage(curimageindex)
rotateimage()
}

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

</script>

ck2977
08-03-2007, 02:47 AM
basically, i want to change the configurations of this code:

var pause=250//SET PAUSE BETWEEN SLIDE (3000=3 seconds)

after fade image 16...anyone have any ideas...?

jscheuer1
08-03-2007, 04:13 AM
That's not Blending Image Slideshow. In fact, it is an old script that has been replaced by this one:

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

Now, I'm not sure what you want, exactly. You could use any given image twice or more right after each other in the array to get the effect of it lasting longer, if that helps.

ck2977
08-03-2007, 01:16 PM
Of Course!! Repeating The Images Worked! Thank You Sooo Much.