[Erledigt] bildrotation, fadein/out ersetzung

Screeze · 20.02.2009, 15:06

Ich will ein Bild alle x minuten ersetzen lassen durch ein zufälliges anderes.
Zurzeit ruf ich das ganze zum testen noch per linkKlick auf statt mit interval ect.

Aber leider faded das nicht so wie ich möchte.

Das script ruft eine php datei auf, welche als antwort den Link zu einem zufälligen Bild schickt. (das klappt) dann soll das Bild schonmal vorgeladen werden, damit es dann sofort vorhanden ist. (hier hab ich ein kleines script im netz gefunden)
Sobald das fertig ist, soll das alte bild weggefaded, und das neue reingefaded werden.
Und hier hängts. Statt zu faden, wird das Bild einfach ersetzt.

Hier mal mein Script:

Code:

<script type="text/javascript">
        var xmlhttp;
        var load_img;
        var timerid;
        function preloadImg() {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                imgpath = xmlhttp.responseText;
                load_img = new Image();
                load_img.src = imgpath;
                timerid = setInterval("replace_img()", 2000);
            }
        }
        function replace_img(){
            if (load_img.complete) {
                clearInterval(timerid);
                delete(timerid);
                img_fadeout(load_img.src);
            }
        }
        function img_fadeout(img) {
            for(var x=9; x>=0; x--){
                document.getElementById("gallery_rotate").style.filter = "alpha(opacity=" + x + "0)";
                document.getElementById("gallery_rotate").style.MozOpacity = "0." + x;
            }
            img_fadein(img);
        }
        function img_fadein(img) {
            document.getElementById("gallery_rotate").src = img;
            for(var x=0; x<=10; x++){
                if(x != 10) {
                    document.getElementById("gallery_rotate").style.filter = "alpha(opacity=" + x + "0)";
                    document.getElementById("gallery_rotate").style.MozOpacity = "0." + x;
                }
                else {
                    document.getElementById("gallery_rotate").style.filter = "alpha(opacity=100)";
                    document.getElementById("gallery_rotate").style.MozOpacity = "1.0";
                }
            }
        }
        function getRandImg() {
            var nocache = Math.random();
            xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET", '/0.2/randpicture.php?para=' + nocache, true);
            xmlhttp.onreadystatechange = preloadImg;
            xmlhttp.send(null);
        }
    </script>

Das bild ist auf der seite so definiert:

Code:

<div id="img_rot">
        <img id="gallery_rotate" height="163" width="154" src="img/1.jpg" style="filter:alpha(opacity=80);-moz-opacity:0.8"/>
</div>

Und aufgerufen wird das ganze damit

Code:

 <a href="javascript:getRandImg();">test</a>

Wie bekomm ich jetzt einen schönen fade effekt hin? Ich versuche ja das opacity runter- & raufzuscalieren, aber anscheinend klappt das nicht.

Screeze · 20.02.2009, 15:48

Ok Fehler war, dass das ja sofort hintereinander hoch und runtergezählt wurde, wenn man das mit intervallen löst klappts

Code:

function fade(direction) {
            theobject = document.getElementById("gallery_rotate");
            if(direction == 0)
                highlighting = setInterval("decrease(theobject)",50);
            else {
                clearInterval(highlighting);
                highlighting = setInterval("increase(theobject)",50);
            }
        }
        function decrease(img) {

            if (img.style.MozOpacity > 0)
                img.style.MozOpacity = parseFloat(img.style.MozOpacity) - 0.1;
            else if (img.style.MozOpacity == 0) {
                 img.src = load_img.src;
                 fade(1);
            }
            else if (img.filters && img.filters.alpha.opacity > 0)
                img.filters.alpha.opacity -= 10;
            else if (img.filters && img.filters.alpha.opacity == 0) {
                img.src = load_img.src;
                fade(1);
            }
            else if (window.highlighting)
                clearInterval(highlighting);
        }
        function increase(img) {
            if (img.style.MozOpacity < 1)
                img.style.MozOpacity = parseFloat(img.style.MozOpacity) + 0.1;
            else if (img.filters && img.filters.alpha.opacity < 100)
                img.filters.alpha.opacity += 10;
            else if (window.highlighting)
                clearInterval(highlighting);
        }

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Wildcard - Ersetzung von unbekanntem	Unimatrix_0	PHP Tipps 2008	18	26.09.2008 16:34
Ersetzung in einem Array übernehmen	seven-12	PHP Tipps 2007	13	24.11.2005 13:55


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten