Js fade

[michey]

Hi

habe ein JS Crossbrowser-Fade gefunden und versucht es in meine Galerie einzubinden.
Aber entweder rufe ich die fadeIn-Funktion nicht ganz richtig auf oder vielleicht müsste man im Script noch eine kleine Anpassung vornehmen, jedenfalls ist es so, dass bevor dass neue Bild eingefadet wird, dass alte nochmal kurz aufblendet.
Sind die Bilder mal im Cache, wird sofort eingefadet.

Wäre nett, wenn mir jemand helfen könnte das Ganze feinzutunen.

PHP-Code:

function onClick(imgName) {
    
    // deactivate old image

    if(actualName != "") {
        img = eval(actualName + "Off.src");
        document[actualName].src = img;
        
    }
    
    // activate new image
    img = eval(imgName + "On.src");
    document[imgName].src = img;
    actualName = imgName;
    
// big picture
    document["bigDisplay"].src = path + imgName + "Big.jpg";
    fadeIn('big');
    
// text
    var text = infos["gal" + galleryNr + "_" + imgName];
    document.getElementById('info').innerHTML = text;
    fadeIn('info');
}


function setOpacity(eID, opacityLevel) {
    var eStyle = document.getElementById(eID).style;
    eStyle.opacity = opacityLevel / 100;
    eStyle.filter = 'alpha(opacity='+opacityLevel+')';
}


function fade(eID, startOpacity, stopOpacity, duration) {
    var speed = Math.round(duration / 100);
    var timer = 0;
    if (startOpacity < stopOpacity){ // fade in
        for (var i=startOpacity; i<=stopOpacity; i++) {
            setTimeout("setOpacity('"+eID+"',"+i+")", timer * speed);
            timer++;
        } return;
    }
    for (var i=startOpacity; i>=stopOpacity; i--) { // fade out
        setTimeout("setOpacity('"+eID+"',"+i+")", timer * speed);
        timer++;
    }
}


function getElm(eID) {
    return document.getElementById(eID);
}
function show(eID) {
    getElm(eID).style.display='block';
}
function hide(eID) {
    getElm(eID).style.display='none';
}
function fadeIn(eID) {
    setOpacity(eID, 0); show(eID); var timer = 0;
    for (var i=1; i<=100; i++) {
        setTimeout("setOpacity('"+eID+"',"+i+")", timer * 5);
        timer++;
    }
}
function fadeOut(eID) {
    var timer = 0;
    for (var i=100; i>=1; i--) {
        setTimeout("setOpacity('"+eID+"',"+i+")", timer * 3);
        timer++;
    }
    setTimeout("hide('"+eID+"')", 310);
} 


[tobee]

Da lade die Bilder doch einfach im Voraus:
Preload Images - Images vorladen mit HTML oder CSS

[michey]

Danke, tobee, aber die Bilder werden bereits vorgeladen.
Im html der Galerie-Seiten steht:

PHP-Code:

<script language="JavaScript" type="text/javascript">
            preloadImages(1, 16, "../gfx/gallery1/");
            createGallery();
            loadImage();
        </script> 


und das JS für die Galerie:

PHP-Code:

* --- variables --- */ 
 
actualName = ""; 
galleryNr = 0; 
galleryPath = "../gfx/gallery/"; 
totalCount = 16; 
 
infos = new Array(); 
 
 
 
infos["gal1_nr1"]  = "Information 1.01"; 
infos["gal1_nr2"]  = "Information 1.02"; 
infos["gal1_nr3"]  = "Information 1.03"; 
 
infos["gal2_nr1"]  = "Information 2.01"; 
infos["gal2_nr2"]  = "Information 2.02"; 
infos["gal2_nr3"]  = "Information 2.03"; 
 
 
 
/* --- functions --- */ 
 
function preloadImages(galleryNr_, count_, path_) { 
     
    // set variables 
    galleryNr = galleryNr_; 
    count = count_; 
    path = path_; 
     
    // default images 
    thumbOff = new Image(110, 110); thumbOff.src = galleryPath + "clearThumb.gif"; 
    bigOff   = new Image(300, 300); bigOff.src   = galleryPath + "clearBig.gif"; 
     
    // buttons 
    for (i=1; i<=count; i++) { 
         
        this["nr"+i+"Off"] = new Image(20, 20); 
        this["nr"+i+"Off"].src = galleryPath + "nr" + i + "Off.gif"; 
         
        this["nr"+i+"On"] = new Image(20, 20); 
        this["nr"+i+"On"].src = galleryPath + "nr" + i + "On.gif"; 
         
        this["nr"+i+"Over"] = new Image(20, 20); 
        this["nr"+i+"Over"].src = galleryPath + "nr" + i + "Over.gif"; 
         
        this["nr"+i+"Thumb"] = new Image(110, 110); 
        this["nr"+i+"Thumb"].src = path + "nr" + i + "Thumb.jpg"; 
         
    } 
} 
 
 
function createGallery() { 
     
    // big images 
    document.write("<div id='galleryHolderLeft'>"); 
    document.write("<div class='lineH'></div>"); 
    document.write("<div id='big'><img src='" + galleryPath + "clearBig.gif' width='300' height='300' name='bigDisplay' /></div>"); 
     
    document.write("<div id='info'>&nbsp;</div>"); 
     
    document.write("</div>"); 
     
     
    // thumbs 
    document.write("<div id='galleryHolderRight'>"); 
    document.write("<div class='lineH'></div>"); 
    document.write("<div id='thumb'><img src='" + galleryPath + "clearThumb.gif' width='108' height='108' name='thumbDisplay' /></div>"); 
    document.write("<div class='lineH'></div>"); 
    document.write("<div id='buttons'>"); 
     
     
    // buttons 
    for (i=1; i<=count; i++) { 
         
        if(i <=count) { 
            document.write("<div class='navImage'>"); 
            document.write("<a href='#' onmouseover='onRollOver(\"nr" + i + "\")' onmouseout='onRollOut(\"nr" + i + "\")' onclick='onClick(\"nr" + i + "\")' onfocus='if(document.all) this.blur()'>"); 
            document.write("<img src='" + galleryPath + "nr" + i + "Off.gif' width='20' height='20' name='nr" + i + "' /></a></div>"); 
        } else { 
            document.write("<div class='navImage'><img src='" + galleryPath + "clearButton.gif' width='20' height='20' /></a></div>"); 
        } 
         
         
    } 
     
    document.write("</div>"); 
    document.write("</div>"); 
     
     
     
} 
 
 
function loadImage() { 
    onRollOver('nr1'); 
    onClick('nr1'); 
} 
 
 
function onRollOver(imgName) { 
     
    if(imgName != actualName) { 
         
        // button 
        img = eval(imgName + "Over.src"); 
        document[imgName].src = img; 
         
        // thumb 
        img = eval(imgName + "Thumb.src"); 
        document['thumbDisplay'].src = img; 
         
    } 
 
} 
 
 
function onRollOut(imgName) { 
     
    if(imgName != actualName) { 
         
        // button 
        img = eval(imgName + "Off.src"); 
        document[imgName].src = img;     
         
        // thumb 
        if(actualName == "") { 
            document['thumbDisplay'].src = thumbOff.src; 
        } else { 
            img = eval(actualName + "Thumb.src"); 
            document['thumbDisplay'].src = img; 
        } 
         
    } 
     
} 
 
 
function onClick(imgName) { 
     
    // deactivate old image 
    if(actualName != "") { 
        img = eval(actualName + "Off.src"); 
        document[actualName].src = img;         
    } 
     
    // activate new image 
    img = eval(imgName + "On.src"); 
    document[imgName].src = img; 
    actualName = imgName; 
     
    // big picture 
    document["bigDisplay"].src = path + imgName + "Big.jpg"; 
     
     
// text 
    var text = infos["gal" + galleryNr + "_" + imgName]; 
    document.getElementById('info').innerHTML = text; 
     
} 


[tobee]

Sorry, dann kann ich nicht mehr weiterhelfen.
Ich kann dir höchstens den Ratschlag geben ein JS Framework mit einem Plugin zu benutzen

[michey]

Danke für die Hilfsbereitschaft.
Das mit einem jquery Plugin zu lösen, hatte ich auch schon in Betracht gezogen.
Ist zumindest ein Versuch wert.
Würde aber trotzdem gern wissen ob es mit JS doch geht.

[michey]

Kann mir jemand sagen ob es etwas nützen würde hier

PHP-Code:

document.write("<div id='big'><img src='" + galleryPath + "clearBig.gif' width='300' height='300' name='bigDisplay' /></div>"); 


daraus eine unordentliche Liste zu machen und was folglich geändert werden müsste im Galeriescript?

Ich vermute dass dies sowohl für ein jquery als auch für ein js fade Voraussetzung ist.