PDA

Volledige versie bekijken : [javascript] slideshow met fade


ZebraMan
%Europe/Berlin %465 %2010, 11:10
Hallo,

Zit hier terug met een probleempje, ik probeer in javascript een simpele slideshow te maken met een simpele fade overgang. Nu heb ik naa heel wat knip en plak werk de slideshow kunnen maken en ook een werkende fade functie. Maar probleem is nu dat de volgende foto telkens Onder de vorige verschijnt, waar ze natuurlijk boven elkaar moeten geplaatst worden. IK vermoedt dat ik ergens in mijn code de vorige foto moet verwijderen. Of misschien heeft het iets te maken met die: image.style.display = 'block';

Iemand enig idee ?

Foute galerij kan hier 'bewondert' worden: http://desnuffelhoek.be/

Code:

<script language="JavaScript" type="text/javascript">
//<!--
//<![CDATA[
first = 1;
last = 4;
current = 1;

function nextPicture() {
imageId = 'slide'+current;
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = 'visible';
fadeIn(imageId,0);
if (current == last) { current = 1; }
else { current++ }
image = document.getElementById('slide' + current);
image.style.display = 'block';
setTimeout(nextPicture, 2500);
}

function previousPicture() {
// Hide current picture
image = document.getElementById('slide' + current);
image.style.display = 'none';
image.style.visibility = 'invisible';

if (current == first) { current = last; }
else { current--; }
image = document.getElementById('slide' + current);
image.style.display = 'block';
}

function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;

// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";

// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;

// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 20;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}
//]]>
// -->
</script>

ZebraMan
%Europe/Berlin %605 %2010, 14:32
Nevermind, na nog heel wat zoeken op the interwebz heb ik volgend scriptje gevonden: http://www.malsup.com/jquery/cycle/

Werkt uitstekend Grts !