Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
gonE
Threadersteller
Dabei seit: 28.08.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 28.08.2006 23:40
Titel [Javascript] Diashow script |
|
|
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
Zuletzt bearbeitet von gonE am Mo 28.08.2006 23:40, insgesamt 1-mal bearbeitet
|
|
|
|
|
blueX
Dabei seit: 13.07.2006
Ort: Lüchow
Alter: 42
Geschlecht:
|
Verfasst Di 29.08.2006 04:50
Titel
|
|
|
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....
|
|
|
|
|
Anzeige
|
|
|
gonE
Threadersteller
Dabei seit: 28.08.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 29.08.2006 21:29
Titel
|
|
|
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
Dabei seit: 29.08.2006
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 29.08.2006 21:42
Titel
|
|
|
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
Dabei seit: 08.05.2003
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 02.04.2008 12:10
Titel
|
|
|
Hallo,
gibt es eigentlich eine Möglichkeit die fade-Länge bei dem script einzustellen?
Grüße, Torto
|
|
|
|
|
combategg
Dabei seit: 27.07.2008
Ort: Varel
Alter: -
Geschlecht: -
|
Verfasst So 27.07.2008 14:33
Titel
|
|
|
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
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 27.07.2008 18:14
Titel
|
|
|
combategg hat geschrieben: | eine kleine API geschrieben |
Naja, hauptsache mal ein wenig Werbung gemacht.
|
|
|
|
|
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 27.07.2008 21:49
Titel
|
|
|
m hat geschrieben: | combategg hat geschrieben: | eine kleine API geschrieben |
Naja, hauptsache mal ein wenig Werbung gemacht. |
öhm, ja und?
Ich sag mal danke hier dafür. Wunderbares, kompaktes Script
|
|
|
|
|
|
|
|
Ähnliche Themen |
[Script: JS] $_GET für Javascript
Javascript MouseOver Script
[Javascript] Hover und Aktiv Script
Mit JavaScript ein servergeneriertes Script unterdrücken.
Script zur Prüfung auf JavaScript gesucht
Javascript PopUp-Fenster Script -> Kompatiblität?
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|