• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Diashow starten nach dem Bilder geladen sind

M

mr_xxl

Neues Mitglied
Hallo alle zusammen,

ich wollte eine Diashow ertellen, der Code dafür habe ich gefunden

Code: 
var global_transitions=[ //array of IE transition strings
        "progid:DXImageTransform.Microsoft.Barn()",
        "progid:DXImageTransform.Microsoft.Blinds()",
        "progid:DXImageTransform.Microsoft.CheckerBoard()",
        "progid:DXImageTransform.Microsoft.Fade()",
        "progid:DXImageTransform.Microsoft.GradientWipe()",
        "progid:DXImageTransform.Microsoft.Inset()",
        "progid:DXImageTransform.Microsoft.Iris()",
        "progid:DXImageTransform.Microsoft.Pixelate(maxSquare=15)",
        "progid:DXImageTransform.Microsoft.RadialWipe()",
        "progid:DXImageTransform.Microsoft.RandomBars()",
        "progid:DXImageTransform.Microsoft.RandomDissolve()",
        "progid:DXImageTransform.Microsoft.Slide()",
        "progid:DXImageTransform.Microsoft.Spiral()",
        "progid:DXImageTransform.Microsoft.Stretch()",
        "progid:DXImageTransform.Microsoft.Strips()",
        "progid:DXImageTransform.Microsoft.Wheel()",
        "progid:DXImageTransform.Microsoft.Zigzag()"
]
 
function flashyslideshow(setting){
        this.wrapperid=setting.wrapperid
        this.imagearray=setting.imagearray
        this.pause=setting.pause
        this.transduration=setting.transduration/1000 //convert from miliseconds to seconds unit to pass into el.filters.play()
        this.currentimg=0
        var preloadimages=[] //temp array to preload images
        for (var i=0; i<this.imagearray.length; i++){
               preloadimages[i]=new Image()
               preloadimages[i].src=this.imagearray[i][0]
        }
        document.write('<div id="'+this.wrapperid+'" class="'+setting.wrapperclass+'"><div id="'+this.wrapperid+'_inner" style="width:100%">'+this.getSlideHTML(this.currentimg)+'</div></div>')
        var effectindex=Math.floor(Math.random()*global_transitions.length) //randomly pick a transition to utilize
        var contentdiv=document.getElementById(this.wrapperid+"_inner")
        if (contentdiv.filters){ //if the filters[] collection is defined on element (only in IE)
               contentdiv.style.filter=global_transitions[effectindex] //define transition on element
               this.pause+=setting.transduration //add transition time to pause
        }
        this.filtersupport=(contentdiv.filters && contentdiv.filters.length>0)? true : false //test if element supports transitions and has one defined
        var slideshow=this
        flashyslideshow.addEvent(contentdiv, function(){slideshow.isMouseover=1}, "mouseover")
        flashyslideshow.addEvent(contentdiv, function(){slideshow.isMouseover=0}, "mouseout")
        setInterval(function(){slideshow.rotate()}, this.pause)
}
 
flashyslideshow.addEvent=function(target, functionref, tasktype){
        if (target.addEventListener)
               target.addEventListener(tasktype, functionref, false);
        else if (target.attachEvent)
               target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
},
 
flashyslideshow.setopacity=function(el, degree){ //sets opacity of an element (FF and non IE browsers only)
        if (typeof el.style.opacity!="undefined")
               el.style.opacity=degree
        else
               el.style.MozOpacity=degree
        el.currentopacity=degree
},
 
flashyslideshow.prototype.getSlideHTML=function(index){
        var slideHTML=(this.imagearray[index][1])? '<a href="'+this.imagearray[index][1]+'" target="'+this.imagearray[index][2]+'">\n' : '' //hyperlink slide?
        slideHTML+='<img src="'+this.imagearray[index][0]+'" />'
        slideHTML+=(this.imagearray[index][1])? '</a><br />' : '<br />'
        slideHTML+=(this.imagearray[index][3])? this.imagearray[index][3] : '' //text description?
        return slideHTML //return HTML for the slide at the specified index
}
 
flashyslideshow.prototype.rotate=function(){
        var contentdiv=document.getElementById(this.wrapperid+"_inner")
        if (this.isMouseover){ //if mouse is over slideshow
               return
        }
        this.currentimg=(this.currentimg<this.imagearray.length-1)? this.currentimg+1 : 0
        if (this.filtersupport){
               contentdiv.filters[0].apply()
        }
        else{
               flashyslideshow.setopacity(contentdiv, 0)
        }
        contentdiv.innerHTML=this.getSlideHTML(this.currentimg)
        if (this.filtersupport){
               contentdiv.filters[0].play(this.transduration)
        }
        else{
               contentdiv.fadetimer=setInterval(function(){
                       if (contentdiv.currentopacity<1)
                               flashyslideshow.setopacity(contentdiv, contentdiv.currentopacity+0.1)
                       else
                               clearInterval(contentdiv.fadetimer)
               }, 50) //end setInterval
        }
}
 
 
///Sample call on your page
/*
var flashyshow=new flashyslideshow({ //create instance of slideshow
        wrapperid: "myslideshow", //unique ID for this slideshow
        wrapperclass: "flashclass", //desired CSS class for this slideshow
        imagearray: [
               ["summer.jpg", "http://en.wikipedia.org/wiki/Summer", "_new", "Such a nice Summer getaway."],
               ["winter.jpg", "http://en.wikipedia.org/wiki/Winter", "", "Winter is nice, as long as there's snow right?"],
               ["spring.jpg", "", "", "Flowers spring back to life in Spring."],
               ["autumn.jpg", "", "", "Ah the cool breeze of autumn."]
        ],
        pause: 2000, //pause between slides (milliseconds)
        transduration: 1000 //transition duration (milliseconds)
})

Er mach eigentlich das, was ich brauche. Aber wie kann ich es machen, dass das Diashow erts dann startet, wenn alle Bilder geladen sind. Ich habe die Bilder im Internet gespeichert und wenn ich die Seite (lokal auf dem Rechner gespeichert) aufrufe, vergeht eine Zeit bis alle Bilder angezeigt werden. Wie kann man es verhindern?
 
danke für die Hilfe!

aber ich dachte die Bilder werden hier vorgeladen!?
Code: 
var preloadimages=[] //temp array to preload images
 for (var i=0; i<this.imagearray.length; i++){  
        preloadimages[i]=new Image()        
        preloadimages[i].src=this.imagearray[i][0]   
      }
ich habe viele Bilder und habe alle auf vier Array aufgeteilt. am anfang werden nur die Bilder im 1. Array gezeigt und in den restlichen sind nur "Icons" mit der Beschriftung zusehen. Bis alle angezeigt werden, vergehen bis zu 5 Zyklen. Ich habe mir schon überlegt die Bilder in ein Array zu packen und sie zufällig ausgeben. Vielleicht wird es die Sache einbischen beschleunigen!?
 
Zuletzt bearbeitet:
Danke für den Link.
Da wird man auf eine Seite geleitet, solange die Bilder nicht geladen sind. Ich will versuchen die Bilder anhalten biss sie alle geladen sind. Habe da an clearInterval gedacht. Wird der Code dann etwa so aussehen?

Code: 
var loaded = new Array()                  
 for (var i=0; i<this.imagearray.length; i++){
        preloadimages[i]=new Image()
        preloadimages[i].src=this.imagearray[i][0]
        }
    for (i = 0; i < preloadimages.length; i++) { 
            loaded[i] = false
    }
    checkLoad()

function checkLoad() {

if (currCount == preloadimages.length) { 
        setInterval(function(){slideshow.rotate()}, this.pause)
        return
    }
    for (i = 0; i <= preloadimages.length; i++) {
        if (loaded[i] == false && preloadimages[i].complete) {
            loaded[i] = true
         clearInterval(function(){slideshow.rotate()}, this.pause)
            currCount++
        }
    }
}
 
Hallo,
ich hatte mir eher vorgestellt, dass man den Funktionsaufruf für das Starten der Slideshow
Code: 
var flashyshow=new flashyslideshow({ //create instance of slideshow
         wrapperid: "myslideshow", //unique ID for this slideshow
         wrapperclass: "flashclass", //desired CSS class for this slideshow
         imagearray: [
                ["summer.jpg", "http://en.wikipedia.org/wiki/Summer", "_new", "Such a nice Summer getaway."],
                ["winter.jpg", "http://en.wikipedia.org/wiki/Winter", "", "Winter is nice, as long as there's snow right?"],
                ["spring.jpg", "", "", "Flowers spring back to life in Spring."],
                ["autumn.jpg", "", "", "Ah the cool breeze of autumn."]
         ],
         pause: 2000, //pause between slides (milliseconds) 
        transduration: 1000 //transition duration (milliseconds) })
erst dann absetzt, wenn alle Bilder geladen sind, d. h. dort, wo im Originalskript die neue Seite geladen wird. Scheint mir am einfachsten zu sein.
Dann brauchst Du nicht in die Innereien des Skripts einzusteigen.
 
Danke für den Tip,
muss es also etwa so aussehen?
Code: 
function checkLoad() {
    if (currCount == preloadimages.length) { 
     

var flashyshow=new flashyslideshow({ //create instance of slideshow     
     wrapperid: "myslideshow", //unique ID for this slideshow      
    wrapperclass: "flashclass", //desired CSS class for this slideshow    
      imagearray: [       
              ["summer.jpg", "http://en.wikipedia.org/wiki/Summer", "_new", "Such a nice Summer getaway."],  
               ["winter.jpg", "http://en.wikipedia.org/wiki/Winter", "", "Winter is nice, as long as there's snow right?"],     
              ["spring.jpg", "", "", "Flowers spring back to life in Spring."],           
              ["autumn.jpg", "", "", "Ah the cool breeze of autumn."]      
    ],     
     pause: 2000, //pause between slides (milliseconds)     
     transduration: 1000 //transition duration (milliseconds) })  
  }
  
  for (i = 0; i <= preloadimages.length; i++) {
        if (loaded[i] == false && preloadimages[i].complete) {
            loaded[i] = true           
clearInterval(function(){slideshow.rotate()}, this.pause)   
         currCount++
        }
    }
    
}
 
Zuletzt bearbeitet:
Ja, so würde ich es machen. Aber IMO brauchst Du dann das
Code: 
clearInterval(function(){slideshow.rotate()}, this.pause)
nicht mehr. "this" wäre an dieser Stelle wahrscheinlich auch nicht gültig.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben