Slide show med tekst

Sådan måske -- det er brugt 20px i højde til teksten, så det kan blive et problem, hvis det er en lang tekst !-)

<script language="JavaScript1.2">

//Fade-in image slideshow- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var slideshow_width=450//SET IMAGE WIDTH
var slideshow_height=338 //SET IMAGE HEIGHT
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages= new Array()
var fadetexts= new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="pic0.jpg";
fadetexts[0] = "billede1"
fadeimages[1]="pic1.jpg"
fadetexts[1] = "billede2"




////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&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden;text-align:center;"><div  id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;text-align:center;"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;text-align:center;"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'"><br>'+fadetexts[curimageindex])

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/100
}
else{
tempobj.style.background='white';
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'"><br>'+fadetexts[nextimageindex];
imgst = tempobj.firstChild.style;
imgst.width=slideshow_width+'px';
imgst.height=slideshow_height-20+'px';
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
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/100
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'"><br>'+fadetexts[curimageindex];
imgst = crossobj.firstChild.style;
imgst.width=slideshow_width+'px';
imgst.height=slideshow_height-20+'px';
rotateimage()
}

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

</script>

-- i øvrigt har jeg i http://www.eksperten.dk/spm/478961 lavet en fadeover-udgave, som dog heller ikke understøtter text !-)

Ja det er jo godt det du har lavet der Roenving, hvilken del er det lige præcist som styrer teksten hvis jeg skal have ændret farve form osv.?

Ja den anden udgave du har lavet svare den ikke meget til den her, og nu skal det jo være med tekst.

men kom med et svar så jeg kan få fyret de point af. :O)

Rasmus

Hvis du skal ændre text-style skal du gøre det på de div'er, som hedder canvas0 og -1, som skrives ved initialiseringen, altså disse:

<div  id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;text-align:center;"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10;text-align:center;"></div>

Højden skal du finde de 2 steder hvor der i det ovenstående står -20+'px' !-)

-- og velbekomme '-)

-- og den store forskel på de to er, at der cross-fades på min den anden, hvilket bl.a. betyder, at man ikke behøver at forøge z-index for hver visning ...

-- og grunden til det er, at min fade-maskine understøtter et vilkårligt antal elementer, mens den, som dynamicdrive leverer, kun kan lave een fade-operation ad gangen !-)

-- og modellen jeg har brugt er iøvrigt også simplere, hvilket også betyder, at man ikke bare kan sætte tekst ind, som det er relativt nemt at gøre her !o]

Kunne se i http://www.eksperten.dk/spm/478961 af du havde ændret det så man ikke skal skrive hele stien for billeder med
for(i=0;40>i;i++)fadeimages[i]="images/menu_billeder/"+(i+1)+".jpg"

Kan den også bruges her?

Med alt det cross halløj så har du helt sikkert ret :O)

Tak for hjælpen

Ja, han havde jo alle billederne liggende som 1.jpg, 2.jpg ... 40.jpg, så kunne der med fordel laves en løkke ...

-- du kan forøvrigt se originaludgaven af min implementering af fade-maskinen her:

http://roenving.users.whitehat.dk/WD5Opacity.html

Roenving Er det muligt at fører den
for(i=0;40>i;i++)fadeimages[i]="images/menu_billeder/"+(i+1)+".jpg"
kode ind i det her javascript? Hvorskal det stå hvis det er?

Rasmus

Hvis du har alle billederne liggende som mboesen, skal du:

<snip af koden>
var fadeimages= new Array()
var fadetexts= new Array()
//SET IMAGE PATHS. Extend or contract array as needed
for(i=0;40>i;i++)fadeimages[i]="images/menu_billeder/"+(i+1)+".jpg"
fadetexts[1] = "billede1"
fadetexts[2] = "billede2"
...
fadetexts[40] = "billede40"
//Lav selv antallet !-)
//Bemærk, at de 40 både går igen i løkken og i antallet af texter !-)

////NO need to edit beyond here/////////////
</snip af koden>

Derudover skal 3 andre linjer ændres:

var curimageindex=1


nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 1


curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 1

Jeg synes ikke at den skifter med billederne. Når jeg har oploadet siden og vil bruge et billede er det så nok hvis det ligger i images at skive
for(i=0;40>i;i++)fadeimages[i]="images/"+(i+1)+".jpg" eller skal jeg bruge hele url. med http://.......?

Hvad mener du med at de 40 både går igen i løkken og i antallet af texter ??

RC

Jeg gad jo ikke skrive 40 tekster, derfor blev det gjort med en ellipse ...

Men filerne må _ikke_ have andre navne end præcis 1.jpg osv.

Okay, ja så er jeg med.

Det sidste jeg så undre mig over er at den der hedder 1.jpg ikke bliver vist den starter med nr. 2
Jeg kan selvfølgelig bare ændre alle billederne med et hak men når der er næsten 100 så kunne det jo være der var en nemmere løsning?

Som du skriver er der ikke plads til længere tekst, kan man lave det :O)

Argh, jeg havde jo også glemt, at jeg ikke ville ændre den del af det, så du skal starte fadetexts med nr. 0 og slutte ved nr. 39 (altså een mindre end antallet af billeder), og så skal du se bort fra de nederste 3 rettelser !-)

Så skal du ændre på de 20px, som jeg skrev i 18:28:59 ...

-- og tak for point ;~}