effect aan script toevoegen

Stormbringer · 2 nov 2012

goedemorgen!

Ik heb het volgende script om van plaatje 1 naar plaatje 2 te wisselen:

<IMG id="plaatje" SRC="indexheader.JPG" HEIGHT="460" WIDTH="720" BORDER="0">
<script type="text/javascript">
setTimeout(function(){document.getElementById('plaatje').src = 'PP.JPG';}, 3000);
</script>

Het script werkt prima, maar ik vraag me af of er niet een soort van overvloei-effect aan kan worden toegevoegd, zodat de
overgang van plaatje 1 naar 2 niet zo statisch verloopt?

Wie oh wie??

Robin S · 2 nov 2012

Ik kan je wel de basis voor een fade-effect geven. Daarvoor de volgende onderdelen:
- Image preloading. Het tweede plaatje moet beschikbaar zijn voor het effect kan beginnen.
- Vertraagde bewerking van de opacity-eigenschap van een element (zie functie startEffect)

Kijk gewoon maar eens of je 't script snapt, en als je iets wil weten hoor ik het wel. Je kunt dit gewoon vervangen door het script dat je nu al hebt. Ik heb 'm vast getest voor je

Er wordt eerst 3 seconden (3000ms) gewacht, en dán begint een fade-effect dat 400ms duurt.

Overigens: in tegenstelling tot wat in een ander topic gesuggereerd werd, is voor de (function(){})();-constructie geen jQuery nodig. Het is simpelweg een anonieme functie die direct uitgevoerd wordt. Deze constructie wordt gebruikt om de bovenliggende (in dit geval de globale) scope te schermen van variabelen die binnen de functie gedefinieerd worden.

[JS](function() {

var Settings = {
DURATION: 400,
INTERVAL: 20
};

var buffer = [],
imgLoaded = false,
newImg = new Image(),
oldImg = document.getElementById("plaatje");

addEvent(newImg, "load", onLoad, false);
newImg.src = "PP.JPG";

setTimeout(function(){
if (!imgLoaded)
buffer.push(startEffect);
else
startEffect();
}, 3000);

function addEvent(obj, type, callback, useCapture) {
if (obj.addEventListener)
obj.addEventListener(type, callback, useCapture);
else if (obj.attachEvent)
obj.attachEvent("on" + type, callback);
else
console.warn("Failed to add " + type + "-event, ", obj);
}
function onLoad() {
imgLoaded = true;
while (buffer.length)
buffer.shift()();
}
function startEffect() {

newImg.style.opacity = 0;
oldImg.parentNode.insertBefore(newImg, oldImg);

var dT = 0;
var timer = setInterval(function() {

dT += Settings.INTERVAL;
newImg.style.opacity = dT / Settings.DURATION;
oldImg.style.opacity = 1 - dT / Settings.DURATION;

if (dT == Settings.DURATION)
clearInterval(timer);

}, Settings.INTERVAL);
}

})();[/JS]

Stormbringer · 2 nov 2012

re:

Uhhhhh... is het de bedoeling dat dit hele script in de <body> komt op dezelfde plaats als "mijn" script nu staat?

En ik zie ook niet de afmetingen van de plaatjes gedefiniëerd..... ?

Robin S · 2 nov 2012

Uhhhhh... is het de bedoeling dat dit hele script in de <body> komt op dezelfde plaats als "mijn" script nu staat?

Ja. Dat ene regeltje worden er 54

(Met 'script' bedoelen we dus hetgeen tussen de <script>-tags staat he?

)

En ik zie ook niet de afmetingen van de plaatjes gedefiniëerd..... ?

Als je dat bij het laden van nieuwe afbeeldingen niet aangeeft, zullen ze de afmetingen aannemen die ze van nature hebben. Maar als je ze wil schalen of 'bijsnijden' kan dat natuurlijk ook met Javascript

Gr. Robin

Stormbringer · 2 nov 2012

re:

Ok, dan is mijn vraag of je de afmetingen aub erbij wil plaatsen... ?

Robin S · 2 nov 2012

Tuurlijk

Hieronder (regel 14 en 15) worden voor het nieuwe plaatje gewoon de afmetingen van het oude plaatje genomen. Als je liever een andere bewerking hebt hoor ik 't wel

[JS](function() {

var Settings = {
DURATION: 400,
INTERVAL: 20
};

var buffer = [],
imgLoaded = false,
newImg = new Image(),
oldImg = document.getElementById("plaatje");

addEvent(newImg, "load", onLoad, false);
newImg.width = oldImg.width;
newImg.height = oldImg.height;
newImg.src = "img/img2.jpg";

setTimeout(function(){
if (!imgLoaded)
buffer.push(startEffect);
else
startEffect();
}, 3000);

function addEvent(obj, type, callback, useCapture) {
if (obj.addEventListener)
obj.addEventListener(type, callback, useCapture);
else if (obj.attachEvent)
obj.attachEvent("on" + type, callback);
else
console.warn("Failed to add " + type + "-event, ", obj);
}
function onLoad() {
imgLoaded = true;
while (buffer.length)
buffer.shift()();
}
function startEffect() {

newImg.style.opacity = 0;
oldImg.parentNode.insertBefore(newImg, oldImg);

var dT = 0;
var timer = setInterval(function() {

dT += Settings.INTERVAL;
newImg.style.opacity = dT / Settings.DURATION;
oldImg.style.opacity = 1 - dT / Settings.DURATION;

if (dT == Settings.DURATION)
clearInterval(timer);

}, Settings.INTERVAL);
}

})();[/JS]

Stormbringer · 2 nov 2012

re:

Als je het niet heeeel erg vind...ik heb liever de afmetingen erbij staan van beide plaatjes......

Robin S · 2 nov 2012

Dus de code inclusief de HTML? De klant is koning...

Dit is de code van m'n testpagina. Ik heb overigens nog wat extra functionaliteit toegevoegd, zodat ook rekening word gehouden met de positionering van de plaatjes. Bewerkingen op het nieuwe plaatje staan aan het begin van de functie startEffect.

Gr. Robin

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title></title>
    </head>
    <body>
        <img id="plaatje" src="indexheader.JPG" height="460" width="720" border="0"/>
        <script type="text/javascript">
        
        (function() {

            var Settings = {
                    DELAY: 3000,
                 DURATION: 400,
                 INTERVAL: 20,
                 NEWIMAGE: "PP.JPG",
                OLDIMG_ID: "plaatje"
            };
            
            var buffer = [],
                imgLoaded = false,
                newImg = new Image(),
                oldImg = document.getElementById(Settings.OLDIMG_ID);
                
            addEvent(newImg, "load", onLoad, false);
            newImg.src = Settings.NEWIMAGE;
            
            setTimeout(function(){
                if (!imgLoaded)
                    buffer.push(startEffect);
                else
                    startEffect();
            }, Settings.DELAY);
            
            function addEvent(obj, type, callback, useCapture) {
                if (obj.addEventListener)
                    obj.addEventListener(type, callback, useCapture);
                else if (obj.attachEvent)
                    obj.attachEvent("on" + type, callback);
                else
                    console.warn("Failed to add " + type + "-event, ", obj);
            }
            function getOffset(el, rel) {
                var offsetX = 0, offsetY = 0;
                while (el != rel && el.offsetParent) {
                    offsetX += el.offsetLeft;
                    offsetY += el.offsetTop;
                    el = el.offsetParent;
                }
                return [offsetX, offsetY];
            }
            function getStyle(el, prop)  {
                var style, v;
                if (el.currentStyle)
                    v = el.currentStyle[prop];
                else if (window.getComputedStyle) {
                    style = document.defaultView.getComputedStyle(el, null);
                    v = style.getPropertyValue(prop.replace(/[A-Z]/g, function(x) {
                        return "-" + x.toLowerCase();
                    }));
                }
                return v;
            }
            function onLoad() {
                imgLoaded = true;
                while (buffer.length)
                    buffer.shift()();
            }
            function setStyle(el, style) {
                for (var k in style) {
                    var v = style[k];
                    switch (k) {
                    
                        case "top":
                        case "left":
                            el.style[k] = typeof v == "number" ? Math.round(v) + "px" : v;
                            break;
                        
                        default:
                            el.style[k] = v;
                    }
                }
            }
            function startEffect() {
                
                newImg.width = oldImg.width;
                newImg.height = oldImg.height;
                
                var offset = getOffset(oldImg);
                setStyle(newImg, {
                    opacity: 0,
                    position: "absolute",
                    top: offset[1],
                    left: offset[0]
                });
                
                oldImg.parentNode.insertBefore(newImg, oldImg);
                
                var dT = 0;
                var timer = setInterval(function() {
                    
                    dT += Settings.INTERVAL;
                    newImg.style.opacity = dT / Settings.DURATION;
                    oldImg.style.opacity = 1 - dT / Settings.DURATION;
                    
                    if (dT == Settings.DURATION) {
                        clearInterval(timer);
                        stopEffect();
                    }
                    
                }, Settings.INTERVAL);
            }
            function stopEffect() {
            
                var style = {
                    position: getStyle(oldImg, "position"),
                    top: getStyle(oldImg, "top"),
                    left: getStyle(oldImg, "left")
                };
                oldImg.parentNode.removeChild(oldImg);
                setStyle(newImg, style);
            }
            
        })();
        
        </script>
    </body>
</html>

Stormbringer · 2 nov 2012

re:

Wellicht ga ik nu wat zeurderig overkomen, maarrrrr...
ik heb het script geprobeerd en het werkt...hoewel...er is geen sprake van een vloeiende overgang / fade.....

Ik heb van de 400ms ook even 4000 gemaakt maar dat veranderd niets...

Dus: plaatje 1 verandert nog steeds statisch naar plaatje 2.............

Robin S · 2 nov 2012

Geen punt hoor, ik ben hier immers om te helpen ^^

Ik heb nog een kleine aanpassing gedaan, maar zonder zou het script ook moeten werken.

Kijk even op deze pagina: http://robins.awardspace.com/helpmij/Stormbringer/effect_aan_script_toevoegen/
Als die 't wel doet ligt is je cache gewoon niet leeg.
Als 'ie het niet doet: welke browser gebruik je? Ik heb getest in IE, FF, Chrome, Safari en Opera.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Effect aan script toevoegen</title>
    </head>
    <body>
        <p>
            <img alt="" id="plaatje" src="indexheader.JPG" height="460" width="720" />
        </p>
        <script type="text/javascript">
        
        (function() {

            var Settings = {
                     DELAY: 3000,
                  DURATION: 400,
                  INTERVAL: 20,
                NEWIMG_SRC: "PP.JPG",
                 OLDIMG_ID: "plaatje"
            };
            
            var buffer = [],
                imgLoaded = false,
                newImg = new Image(),
                oldImg = document.getElementById(Settings.OLDIMG_ID);
                
            addEvent(newImg, "load", onLoad, false);
            newImg.src = Settings.NEWIMG_SRC;
            
            setTimeout(function(){
                if (!imgLoaded)
                    buffer.push(startEffect);
                else
                    startEffect();
            }, Settings.DELAY);
            
            function addEvent(obj, type, callback, useCapture) {
                if (obj.addEventListener)
                    obj.addEventListener(type, callback, useCapture);
                else if (obj.attachEvent)
                    obj.attachEvent("on" + type, callback);
                else
                    console.warn("Failed to add " + type + "-event, ", obj);
            }
            function getOffset(el, rel) {
                var offsetX = 0, offsetY = 0;
                while (el != rel && el.offsetParent) {
                    offsetX += el.offsetLeft;
                    offsetY += el.offsetTop;
                    el = el.offsetParent;
                }
                return [offsetX, offsetY];
            }
            function getStyle(el, prop)  {
                var style, v;
                if (el.currentStyle)
                    v = el.currentStyle[prop];
                else if (window.getComputedStyle) {
                    style = document.defaultView.getComputedStyle(el, null);
                    v = style.getPropertyValue(prop.replace(/[A-Z]/g, function(x) {
                        return "-" + x.toLowerCase();
                    }));
                }
                return v;
            }
            function insertAfter(el, ref) {
                if (ref.nextSibling)
                    ref.parentNode.insertBefore(el, ref.nextSibling);
                else
                    ref.parentNode.appendChild(el);
            }
            function onLoad() {
                imgLoaded = true;
                while (buffer.length)
                    buffer.shift()();
            }
            function setStyle(el, style) {
                for (var k in style) {
                    var v = style[k];
                    switch (k) {
                    
                        case "top":
                        case "left":
                            el.style[k] = typeof v == "number" ? Math.round(v) + "px" : v;
                            break;
                        
                        default:
                            el.style[k] = v;
                    }
                }
            }
            function startEffect() {
                
                newImg.width = oldImg.width;
                newImg.height = oldImg.height;
                
                var offset = getOffset(oldImg);
                setStyle(newImg, {
                    opacity: 0,
                    position: "absolute",
                    top: offset[1],
                    left: offset[0]
                });
                
                insertAfter(newImg, oldImg);
                
                var dT = 0;
                var timer = setInterval(function() {
                    
                    dT += Settings.INTERVAL;
                    newImg.style.opacity = dT / Settings.DURATION;
                    
                    if (dT == Settings.DURATION) {
                        clearInterval(timer);
                        stopEffect();
                    }
                    
                }, Settings.INTERVAL);
            }
            function stopEffect() {
            
                var style = {
                    position: getStyle(oldImg, "position"),
                    top: getStyle(oldImg, "top"),
                    left: getStyle(oldImg, "left")
                };
                oldImg.parentNode.removeChild(oldImg);
                setStyle(newImg, style);
            }
            
        })();
        
        </script>
    </body>
</html>

Stormbringer · 2 nov 2012

re:

Wat ik zie op jou pagina zie ik bij mij ook

Kijk eens naar de manier waarop op onderstaande pagina plaatje 1 veranderd in plaatje 2....dát is wat ik bedoel

http://users.skynet.be/javascript/images/overvloeier3.htm

Robin S · 2 nov 2012

Dat is precies wat ik steeds te zien krijg xP
Ik heb een kleine aanpassing gedaan in het zetten van de opacity-eigenschap, ms is dat het.. Zou wel het gedrag verklaren

Aanpassing staat op de pagina die ik noemde in de vorige post.

Stormbringer · 2 nov 2012

re:

Helaas...van overvloeien van plaatje 1 naar 2 is geen sprake...
De overgang gaat gewoon strak...

Robin S · 3 nov 2012

Wat een gedoe, dat cross-browser. Nog een update gedaan. Ik durf 't bijna niet te vragen... Hoe doet ie 't nu?

Anders moet ik echt even je browser weten. Zoeken naar fouten is makkelijker als je de fout te zien krijgt

http://robins.awardspace.com/helpmij/Stormbringer/effect_aan_script_toevoegen/

Stormbringer · 3 nov 2012

re:

Hij werkt!!! Je bent een held :thumb:

Heel hartelijk dank!

effect aan script toevoegen

Stormbringer

Gebruiker

Robin S

Gebruiker

Stormbringer

Gebruiker

Robin S

Gebruiker

Stormbringer

Gebruiker

Robin S

Gebruiker

Stormbringer

Gebruiker

Robin S

Gebruiker

Stormbringer

Gebruiker

Robin S

Gebruiker

Stormbringer

Gebruiker

Robin S

Gebruiker

Stormbringer

Gebruiker

Robin S

Gebruiker

Stormbringer

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy