Forum Moderators: open

Message Too Old, No Replies

Editing an image slideshow

Where to edit the duration of transition?

         

Stevie_B

11:02 am on Oct 26, 2005 (gmt 0)

10+ Year Member



I have been using a cross-browser compatible fading image slideshow, taken from a free scripts resource site. The script works well and is easily editable for the time an image displays before fading into the next - my question is, how do I tweak the duration of the fade transition itself?
Is it necessary / allowable to paste the full script on this forum? (it includes URL of resource site, for example - dont want to be accused of spamming!)

JAB Creations

11:05 am on Oct 26, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well can't help you without seeing some code. If it has the url then just remove it. :)

Stevie_B

11:07 am on Oct 26, 2005 (gmt 0)

10+ Year Member



Okay :))

Here goes:

<script language="JavaScript1.2" type="text/javascript">

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 1) IMAGE PATHS, 2) optional link, 3), optional link target:
fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "", "_new"] //image with link and target 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>

JAB Creations

11:20 am on Oct 26, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ok it ~looks~ like its here...

var temp='setInterval("fadepic()",50)'

Change the 50 to something radically different. If 50=half a second then change it to 500 or 5. Make sure you try with Gecko/IE/Opera at least. If you notice a difference in fade time then BINGO! Else, umm, look around for the word fade and a number nearby.

I'm no JS expert but I'm sure this is what you want.

EDIT* PS Welcome to WebmasterWorld! :)

Stevie_B

11:39 am on Oct 26, 2005 (gmt 0)

10+ Year Member



Bingo! - Terrfic, thank you.
I can control the duration of the transition now - but it is rather "jerky" ... Is there anything I can tweak to make it more smooth?

JAB Creations

11:50 am on Oct 26, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hmm, could be a bounch of reasons!

I have eight windows open and I'm running 21 proccesses with a 298mb out of 936mb load on my ram (with vm disabled, I only have 1024 physical total) so my system is DAM clean and a little overpowered for notepad (amd 3500/939) and Firefox. If your system IS clean and IS powerful enough I wouldn't be sure beyond that point.

Try tweaking it a bit. I'm really not a JS whiz but I can sure as hell edit small things like what you originally posted about.

Oh, to check your system (if you have windows XP) CTRL ALT DEL on your keyboard and tell me (with just Firefox/opera open (cuz I KNOW you wouldn't be using IE ;)) tell me how many proccesses you're running which the task manager will tell you at the bottom). Then also right click on the "my computer" icon on your desktop and tell me how much ram you have (usually 64, 128, 256, 512, 1024 are common numbers).

Stevie_B

12:58 pm on Oct 26, 2005 (gmt 0)

10+ Year Member



I have only 3 windows open - Task Manager says I have 44 processes running .... 512 of RAM ... Which means pretty much nothing to me.
What does it say to you? :)

JAB Creations

1:44 pm on Oct 27, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Ehh... way too much crap running on your system!

Do a search for "Startup Control Panel" on any of the big three search engines and you'll find a nifty tool that will let you easily manage startup programs.

512 mbs of ram is not enough really. You can add another 512 mbs for about 50 bucks after shipping from a reputable dealer or 1GB stick for about 100-105 after shipping.

Right click your "my computer" icon in windows XP. Then click the ADVANCED tab at the top. Next click the top SETTINGS button. Click the ADVACNED TAB. Lastly click the CHANGE button at the bottom.

This is where your virtual memory is REALLY hidden away at. If you disable all the junk starting up with your computer and disable virtual memory (I'd suggest not doing this unless you have 1024 mbs or more of memory though) your system should defintly run faster!

You should also check your computer for spyware and be cautious when installing any software. Even AIM installs spyware (weatherbug). Some people will debate my definition of spyware but I make it really simple. If something is sharing your information without your EXPLICIT conscent then it's spyware. My favorite free scanner is Adaware, download it, update the definitions, and run a full system scan.

Do all that and your computer should run top notch.