[gonE]

suche nen einfaches diashow script...

dh mit bildern die alle 3 sekunden wechseln. Allerdings soll das Script nicht immer von vorne anfangen wenn ich nen link oder refresh drücke...

Ohne weiter und zurück ...

thx

[blueX]

hm das es nach nem seiten reload nicht nochmal von forn anfängt wird schwer umsetzbar weil der browser sich sämmtliche informationen neu holt und dann anfängt die js scripte aus zu führen .. will heissen , wenn du einen link klickst der das aktuelle browserfenster neu läd, dann werden auch die scripte nochmal neu geladen und neu gestartet. die einzige möglichkeit die mir einfallen würde wäre eine arbeit mit deinem Cooki , bei dem jedes abgelaufene bild darin gespeichert wir ... zb die bild id und das js dann dort weiter mach wo es die letzte id eingetragen hat...... dabei ist allerdingst wieder da problem das nich alle user cookies akteptieren.......

ansonsten könnte man sowas evtl mit ajax umsetzen. so das man in der datenbank mit seiner sessionid und dem aktuellen dias bild gespeichert wird.... und überajax wird dann immer auf den server geguckt welches bild als nächstes dranne ist , geladen und auf dem server die bildid neu eingetragen....... soviel u meiner theorie ^^

also normal werden solche sachen wieder von forne beginnen.. aber letzt endlich ist eigendlich nichts unmöglich... die frage ist nur ob ein solcher aufwand auch gerechtfertigt ist....

[gonE]

ich hatte mir schon überlegt mit sessions zu arbeiten... allerdings habe ich dann das problem, die javascript var in eine php var umzuwandeln.

dazu fehlt mir aber das wissen...

vllt weiss ja jmd wie sowas funktioniert...

würde mich aber auch freuen wenn mir jmd nen link schickt, der mich auf nen fertiges script mit nem random script verweist. ^^ es muss nur als diashow laufen sprich alle 3 sec das bild wechseln.

ist zwar nicht das gleiche aber habe dann auch andere bilde beim reload...

danke

[Smoerrebroed]

Here we go:

/***********************************************
* Ultimate Fade-In Slideshow (v1.5): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["img01.jpg", "", ""]
fadeimages[1]=["img02.jpg", "", ""]
fadeimages[2]=["img03.jpg", "", ""]
fadeimages[3]=["img04.jpg", "", ""]
fadeimages[4]=["img05.jpg", "", ""]
fadeimages[5]=["img06.jpg", "", ""]


var fadebgcolor="black"

////NO need to edit beyond here/////////////

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=obj.degree/100
}


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

</script>
</head>

<body>

<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 153, 88, 0, 3000, 0, "R")
</script>

</body>

Viel Spass damit!

[torto]

Hallo,

gibt es eigentlich eine Möglichkeit die fade-Länge bei dem script einzustellen?

Grüße, Torto

[combategg]

Ich hab selbst auch eine kleine API geschrieben, die eine einfache Diashow erzeugt.
Man kann einstellen, wie lange ein Fade dauern soll und wieviel Wartezeit zwischen den Bildern liegt, es kann der Reihe nach oder zufaellig die Bilder anzeigen. Schauts euch einfach mal an.

Dokumentation und Download gibts in meinem Blog-Artikel: imgFader - Bilder in JavaScript faden

[m]

[zweitaccount]