# Slideshow mit Fade-Effekt



## flushbomb (15. Dezember 2009)

hallo..

vorweg möchte ich sagen das ich ein anfänger im programmieren bin..

ich habe mich mal daran versucht eine slideshow zu bauen in der jedes bild erst einfadet dann ausfadet und schliesslich wechselt.

ich wollte es so lösen das ich meine zu slidenden bilder in ein array speichere und dieses mit einer for each schleife durchlaufe. 
Bei jedem durchlauf soll das gegenwärtig gelieferte objekt an eine funktion fadeIn() und danach an eine funktion fadeOut() übergeben werden die dann jeweils entweder den opacity wert des bildes mit hilfe der setInterval() Funktion inkremen- bzw. dekrementiert.

Dabei stiess ich also auf folgendes problem: bei jedem schleifendurchlauf finden die funktionsaufrufe von fadeIn() und fadeOut() unmittelbar statt ohne das beide funktionen jeweils komplett ausgeführt wurden... ehe fadeIn() überhaupt fertig ist beginnt schon fadeOut() mit der arbeit...

schliesslich habe ich versucht fadeIn() und fadeOut() neben dem zu fadenden Objekt als Parameter auch noch ein callback zu übergeben welchem ich bei fadeIn() als callback gleich noch fadeOut() übergeben habe... das funktioniert auch..
die for each schleife wartet trotzdem nicht sondern startet einfach schnell die funktion und rattert bis zum ende durch...

wüsste jemand einen lösungsansatz für meine methode? eine möglichkeit das die for each schleife bis zum nächsten durchlauf so lange wartet bis fadeIn() und fadeOut() wirklich fertig sind

hier der code: (init() ist an das onload-event gebunden)


```
var images;

function init(){
images = new Array();

var pic1 = new Image();
pic1.src = "http://www.tutorials.de/forum/images/pic1.jpg";
var pic2 = new Image();
pic2.src = "http://www.tutorials.de/forum/images/pic2.jpg";
var pic3 = new Image();
pic3.src = "http://www.tutorials.de/forum/images/pic3.jpg";

images.push(pic1);
images.push(pic2);
images.push(pic3);

	for each(var tmp in images){
		document.getElementById("images").appendChild(tmp);
		fadeIn(tmp, function(){
			fadeOut(tmp, function(){
			});
		});
	}
}

function fadeIn(element, callback){
var i = 0;
	var timer = setInterval(function(){
		if(i < 1){
			i += 0.05;
			element.style.opacity = i;
		}
		else{
			clearInterval(timer);
			callback();
		}
	}, 50);
}

function fadeOut(element, callback){
var i = 1.0;
	var timer = setInterval(function(){
		if(i > 0){
			i -= 0.05;
			element.style.opacity = i;
		}
		else{
			clearInterval(timer);
			callback();
		}
	}, 50);
}
```


----------



## Quaese (17. Dezember 2009)

Hi,

zunächst möchte ich dich darum bitten, die Gross- und Kleinschreibung wie in der Netiquette in Punkt 15 zugestimmt, einzuhalten. Besten Dank im Voraus.

Zum Problem
Das Problem besteht darin, dass die Funktion weiterläuft und nicht auf das Ende der Methode *setInterval* wartet.

Stattdessen musst du die Funktion *fadeIn* erstmalig anstossen. Von da an wird sie periodisch aufgerufen bis keine Transparenz mehr vorhanden ist. Jetzt kann die *fadeOut*-Funktion aufgerufen werden.

Diese wird ebenso periodisch abgearbeitet wie zuvor *fadeIn*. Bei voller Transparenz wird wieder die erste Routine angestossen.

Das wird solange wiederholt, bis das Bildarray durchlaufen wurde, wobei die aktuelle Position in einer globalen Variable gesichert wird.

Beispiel (mit setTimeout als periodische Methode):

```
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
var arrImages = new Array();
var intCount = 0;  // Zählvariable für Bilder intCount={0 .. arrImages.length-1}
var hTimer = null; // Timerhandle

function init(){
  var pic1 = new Image();
  pic1.src = "http://www.tutorials.de/forum/images/pic1.jpg";
  pic1.style.opacity = 0;
  var pic2 = new Image();
  pic2.src = "http://www.tutorials.de/forum/images/pic2.jpg";
  pic2.style.opacity = 0;
  var pic3 = new Image();
  pic3.src = "http://www.tutorials.de/forum/images/pic3.jpg";
  pic3.style.opacity = 0;

  arrImages.push(pic1);
  arrImages.push(pic2);
  arrImages.push(pic3);

  document.getElementById("images_id").appendChild(arrImages[intCount]);

  fadeIn(arrImages[intCount], 0);
}

function fadeIn(element, opac){
  if(opac < 1){
    opac += 0.05;
    element.style.opacity = opac;
    hTimer = window.setTimeout(function(){fadeIn(element, opac);},50);
  }
  else{
    element.style.opacity = 1;
    // Fadeout-Funktion für aktuelles Bild aufrufen
    //hTimer = window.setTimeout(function(){fadeOut(element, 1);}, 50);
    fadeOut(element, 1);
  }
}

function fadeOut(element, opac){
  if(opac > 0){
    opac -= 0.05;
    element.style.opacity = opac;
    hTimer = window.setTimeout(function(){fadeOut(element, opac);},50);
  }
  else{
    // Solange noch nicht alle Bilder gefadet wurden
    if(intCount<arrImages.length-1){
      intCount++;
      document.getElementById("images_id").replaceChild(arrImages[intCount], element);
      fadeIn(arrImages[intCount], 0);
    }
  }
}

window.onload = function(){
  init();
}
 //-->
</script>
</head>
<body>
<div id="images_id"></div>
</body>
</html>
```
 
Ciao
Quaese


----------



## lordofscotland (12. März 2010)

Hallo,

habe mir das Script mal hier angesehen und finde das es super ist.
Nun hab ich, da ich leider mit Javascript keine Erfahrung habe, noch Fragen.

Kann man das ganze auch so steuern das die Tranzparenz als Endlosschleife funktioniert?


Danke

lordofscotland


----------



## Quaese (12. März 2010)

Hi,

es sollte reichen, wenn du in der fadeout-Routine die Zählvariable wieder auf Null setzt, wenn das Ende des Bilderarrays erreicht wurde.

```
function fadeOut(element, opac){
  if(opac > 0){
    opac -= 0.05;
    element.style.opacity = opac;
    hTimer = window.setTimeout(function(){fadeOut(element, opac);},50);
  }
  else{
    // Solange noch nicht alle Bilder gefadet wurden
    if(intCount<arrImages.length-1)
      intCount++;
    else
      intCount=0;

    document.getElementById("images_id").replaceChild(arrImages[intCount], element);
    fadeIn(arrImages[intCount], 0);
  }
}
```
 
Ciao
Quaese


----------



## rh-balingen (13. Juli 2010)

Prima Script!

Nur - wie macht man es auch für den IE fit?

( -: roland :- )


----------



## Quaese (13. Juli 2010)

Hi,

so trifft man sich wieder ;-)

Wenn das Script crossbrowserfähig gemacht wird, dann richtig:

```
function fadeIn(element, opac){
  if(opac < 1){
    opac += 0.05;
    // IE
    element.style.filter = "alpha(opacity="+parseInt(opac*100)+")";
    // Safari<1.2, Konqueror
    element.style.KHTMLOpacity = opac;
    // Older Mozilla and Firefox
    element.style.MozOpacity = opac;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    element.style.opacity = opac;
    hTimer = window.setTimeout(function(){fadeIn(element, opac);},50);
  }
  else{
    element.style.opacity = 1;
    // Fadeout-Funktion für aktuelles Bild aufrufen
    //hTimer = window.setTimeout(function(){fadeOut(element, 1);}, 50);
    fadeOut(element, 1);
  }
}

function fadeOut(element, opac){
  if(opac > 0){
    opac -= 0.05;
    // IE
    element.style.filter = "alpha(opacity="+parseInt(opac*100)+")";
    // Safari<1.2, Konqueror
    element.style.KHTMLOpacity = opac;
    // Older Mozilla and Firefox
    element.style.MozOpacity = opac;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    element.style.opacity = opac;
    hTimer = window.setTimeout(function(){fadeOut(element, opac);},50);
  }
  else{
    // Solange noch nicht alle Bilder gefadet wurden
    if(intCount<arrImages.length-1)
      intCount++;
    else
      intCount=0;

    document.getElementById("images_id").replaceChild(arrImages[intCount], element);
    fadeIn(arrImages[intCount], 0);
  }
}
```
 
Ciao
Quaese


----------



## reacend (3. September 2010)

Hi,
wie kann man die Bilder anklickbar machen bzw. mit einem Link versehen.

und meine zweite Frage, wie kann man die Bilder eine gewisse zeit anzeigen also zwischen fadin und fade out einen timeout das der Benutzer sich auch das Bild ansehen kann?


Wäre genial wenn ihr die 2 Punkte noch hinbekommt.

LG
reacend


----------



## Quaese (3. September 2010)

Hi,

du könntest die Bild-Objekte um einige Eigenschaften erweitern:
- Link-Adresse
- style für Rahmen

Weiterhin erstellst du ein Ankerelement, in das die Bildobjekte eingehängt werden. Das Ankerelement selbst wird in das Zielelement eingehängt.

Ist nun ein Fade-Durchgang erreicht, werden Bildobjekt und Link-Adresse geändert.

Das längere Anzeigen eines Bildes nach dessen Einfaden kann über ein zeitverzögertes Aufrufen (setTimeout) der Funktion realisiert werden. Über die Variable *intDelay* kann die Anzahl der Sekunden angegeben werden, die ein Bild angezeigt werden soll, ehe es wieder ausgefadet wird.

Alles Weitere kann den Kommentaren im Script entnommen werden.

```
var arrImages = new Array();
var intDelay = 1;    // Anzahl Sekunden, die ein Bild angezeigt werden soll, bis es wieder ausgefadet wird
var intCount = 0;    // Zählvariable für Bilder intCount={0 .. arrImages.length-1}
var hTimer = null;   // Timerhandle
var objAncor = null; // Referenz für Anker-Element

function init(){
  var pic1 = new Image();
  pic1.src = "bild1.gif";
  pic1.style.opacity = 0;
  pic1.style.border = "0 none";
  pic1.lnk = "http://www.tutorials.de/";
  var pic2 = new Image();
  pic2.src = "bild2.gif";
  pic2.style.opacity = 0;
  pic2.style.border = "0 none";
  pic2.lnk = "http://www.canvas.quaese.de/";
  var pic3 = new Image();
  pic3.src = "bild3.gif";
  pic3.style.opacity = 0;
  pic3.style.border = "0 none";
  pic3.lnk = "http://www.quaese.de/";

  arrImages.push(pic1);
  arrImages.push(pic2);
  arrImages.push(pic3);

  // Anker-Element erstellen und in Zielelement einhängen
  objAncor = document.createElement("a");
  document.getElementById("images_id").appendChild(objAncor);
  // Link-Adresse eintragen
  objAncor.href = arrImages[intCount].lnk;
  objAncor.style.border = "none";
  // Bild in Anker einhängen
  objAncor.appendChild(arrImages[intCount]);

  //document.getElementById("images_id").appendChild(arrImages[intCount]);

  fadeIn(arrImages[intCount], 0);
}

function fadeIn(element, opac){
  if(opac < 1){
    opac += 0.05;
    // IE
    element.style.filter = "alpha(opacity="+parseInt(opac*100)+")";
    // Safari<1.2, Konqueror
    element.style.KHTMLOpacity = opac;
    // Older Mozilla and Firefox
    element.style.MozOpacity = opac;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    element.style.opacity = opac;
    hTimer = window.setTimeout(function(){fadeIn(element, opac);},50);
  }
  else{
    element.style.opacity = 1;
    // Fadeout-Funktion für aktuelles Bild aufrufen
    hTimer = window.setTimeout(function(){fadeOut(element, 1);}, intDelay*1000);
  }
}

function fadeOut(element, opac){
  if(opac > 0){
    opac -= 0.05;
    // IE
    element.style.filter = "alpha(opacity="+parseInt(opac*100)+")";
    // Safari<1.2, Konqueror
    element.style.KHTMLOpacity = opac;
    // Older Mozilla and Firefox
    element.style.MozOpacity = opac;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    element.style.opacity = opac;
    hTimer = window.setTimeout(function(){fadeOut(element, opac);},50);
  }
  else{
    // Solange noch nicht alle Bilder gefadet wurden
    if(intCount<arrImages.length-1)
      intCount++;
    else
      intCount=0;

    // Link-Adresse ändern
    objAncor.href = arrImages[intCount].lnk;
    // Nächstes Bild in Anker einhängen
    objAncor.replaceChild(arrImages[intCount], element);
    // Einfaden
    fadeIn(arrImages[intCount], 0);
  }
}
```
Ciao
Quaese


----------



## Philip März (22. Februar 2012)

Schon mal vorweg: Geniales, verständliches Script!
Mich würde aber noch interessieren, wie man es anstellt, dass die fading-Farbe nicht schwarz, sondern weiß ist...

Lg
P.M.


----------

