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

Kein "Fade in" beim ersten Bild

Status
Für weitere Antworten geschlossen.

vivistar

Neues Mitglied
Hallo!

Ich habe hier ein Script gefunden, womit ich eine kleine Bildergallerie mit Ein und Ausfade Effekt erstellen kann.

Nun erscheint das erste Bild, verschwindet mit einem schönen Fade out und
es erscheint das nächste direkt ohne Fade in.

Wenn alle Bilder durch sind, erscheint dann das erste Bild erneut - alledings mit einem Fade-in Effekt, was bei den anderen nicht der Fall ist!

Da ich mich nicht gut auskenne mit Java, habe ich einfach mal ein wenig ausprobiert - leider ohne Erfolg! Perfekt wäre es natürlich, wenn ich alle Bilder mit einem Fade-in Effekt versehen könnte, wohlgleich es auch ausreicht, wenn das erste Bild diesen Effekt nicht mehr erzeugt, damit alle gleich sind.

Was muss ich tun? Hier der Code:

HTML:
<script type="text/javascript">
window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
    if(!d.getElementById || !d.createElement)return;

    // DON'T FORGET TO GRAB THIS FILE AND PLACE IT ON YOUR SERVER IN THE SAME DIRECTORY AS THE JAVASCRIPT!
    // http://slayeroffice.com/code/imageCrossFade/xfade2.css
    css = d.createElement("link");
    css.setAttribute("href","xfade2.css");
    css.setAttribute("rel","stylesheet");
    css.setAttribute("type","text/css");
    d.getElementsByTagName("head")[0].appendChild(css);

    imgs = d.getElementById("imageContainer").getElementsByTagName("img");
    for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
    imgs[0].style.display = "block";
    imgs[0].xOpacity = .99;
    
    setTimeout(so_xfade,3000);
}

function so_xfade() {
    cOpacity = imgs[current].xOpacity;
    nIndex = imgs[current+1]?current+1:0;

    nOpacity = imgs[nIndex].xOpacity;
    
    cOpacity-=.05; 
    nOpacity+=.05;
    
    imgs[nIndex].style.display = "block";
    imgs[current].xOpacity = cOpacity;
    imgs[nIndex].xOpacity = nOpacity;
    
    setOpacity(imgs[current]); 
    setOpacity(imgs[nIndex]);
    
    if(cOpacity<=0) {
        imgs[current].style.display = "none";
        current = nIndex;
        setTimeout(so_xfade,3000);
    } else {
        setTimeout(so_xfade,50);
    }
    
    function setOpacity(obj) {
        if(obj.xOpacity>.99) {
            obj.xOpacity = .99;
            return;
        }
        obj.style.opacity = obj.xOpacity;
        obj.style.MozOpacity = obj.xOpacity;
        obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
    }
    
}
</script>





Edit: Hat sich erledigt - kann gelöscht werden.
 
Zuletzt bearbeitet:
Werbung:
Status
Für weitere Antworten geschlossen.
Zurück
Oben