Bilder ineinander einfaden

Im nachstehenden Beispiel werden Bilder ineinander eingefadet. Ist das Ende der Bilder erreicht, wird beim Ersten erneut begonnen.

Anwendung

Es reicht, ein Objekt zu initialieren und dabei die gültige ID eines existierenden Elements, das die Bilder enthalten soll, zu übergeben. Weiterhin wird dem Objekt ein Array mit Bildquellen bereitgestellt.

Das Initialisieren erfolgt, indem die gewünschten Optionen in Form eines Objekts übergeben werden (siehe Quellcode). Im Einzelnen stehen folgende Optionen zur Verfügung:

• id
  ID des Holderelements
• imgs
  Array der Bildquellen (src)
• w (optional, default: 120)
  (integer, optional) Breite der Bilder
• h (optional, default: 120)
  (integer, optional) Höhe der Bilder
• timer (optional, default: 2000)
  (integer, optional) Zeit zwischen den Fade-Vorgängen
• delay (optional, default: 10)
  (integer, optional) Geschwindigkeit des Fadevorgangs (kleiner = schneller)
• step (optional, default: 0.01)
  (float, optional) Schrittweite beim Faden (grösser = schneller)
• cls_img (optional, default: 'my_img')
  (string, optional) CSS-Klasse zum Auszeichnen der Bilder

Weiterhin wird beim Initialisieren ein Objekt zurückgegeben, über welches Zugriff auf eine kleine API möglich ist.

• stop()
  Stoppt das Faden
• start()
  Startet das Faden bzw. setzt es an der gestoppten Stelle fort
• restart()
  Setzt die Bilder sowie den Fader auf den Initialisierungszustand zurück und startet erneut
• stop()
  Setzt die Bilder sowie den Fader auf den Initialisierungszustand zurück

Quellcode (mit Beispiel-Initialisierung)

/* ****************************************************************************************** *
 * Das Script kann frei verwendet werden, dieser Kommentar sowie die Nennung des Nicks
 * müssen jedoch erhalten bleiben.
 *
 *                                                               Quaese (www.quaese.de), 2010
 * ****************************************************************************************** */
 var Fader = function(objOpts){
  var settings = {
    w: 120,
    h: 120,
    delay: 10,
    imgs: [],
    timer: 1000,
    cls_img: null,
    handle: null,
    step: 0.01
  }

  var _this = this;

  for(var strKey in objOpts)
    settings[strKey] = objOpts[strKey];

  if((typeof settings.id == "undefined") || (settings.imgs.length==0)) return settings;

  var init = function(){
    initFader();

    //fadeImgs();
    settings.handle = window.setTimeout(function(){fadeImgs();}, settings.timer);
  }

  var initFader = function(){
    // Bilderzähler initialisieren
    settings.counter = 0;

    settings.wrapper = document.getElementById(settings.id);
    settings.holder = document.createElement("div");
    settings.wrapper.appendChild(settings.holder);
    settings.holder.style.position = "relative";
    settings.holder.style.height = settings.h + "px";

    // Unteres Bild
    settings.img1 = new Image();
    settings.img1.src = settings.imgs[settings.counter+1];
    settings.holder.appendChild(settings.img1);
    imgStyles(settings.img1, 1);
    if(settings.cls_img != null) settings.img1.className = settings.cls_img;

    // Oberes Bild
    settings.img2 = new Image();
    settings.img2.src = settings.imgs[settings.counter];
    settings.holder.appendChild(settings.img2);
    imgStyles(settings.img2, 2);
    if(settings.cls_img != null) settings.img2.className = settings.cls_img;

    settings.opac = 1.0;
  }

  // Bilder mit CSS absolut positionieren
  var imgStyles = function(objImg, strZIndex){
    objImg.style.position = "absolute";
    objImg.style.top  = "0px";
    objImg.style.left = "0px";
    objImg.style.width = settings.w + "px";
    objImg.style.height = settings.h + "px";
    objImg.style.zIndex = strZIndex;
  }

  // Fade-Funktion
  var fadeImgs = function(){
    settings.opac -= settings.step;
    setOpacity();

    if(settings.opac>0){
      settings.handle = window.setTimeout(function(){fadeImgs();}, 10);
    }else{
      // Bilder tauschen
      //settings.img2.style.display = "none";
      settings.img2.src = settings.img1.src;
      settings.opac = 1.0;
      setOpacity();

      // Falls Bildarraygrenze erreicht wurde -> resetten
      if(++settings.counter >= settings.imgs.length-1)
        settings.counter = -1;

      // Quelle des unteren Bildes aktualisieren
      settings.img1.src = settings.imgs[settings.counter+1];

      // Zeitverzögert starten
      settings.handle = window.setTimeout(function(){fadeImgs();}, settings.timer);
    }
  }


  // Transparenzwerte setzen
  var setOpacity = function(){
    settings.img2.style.MozOpacity = settings.opac;
    settings.img2.style.opacity = settings.opac;
    settings.img2.style.filter = "alpha(opacity="+(settings.opac*100)+")";
  }


  /* ***** [Public/API] *************** */
  // Stoppen des Faders
  settings.stop = function(){
    window.clearTimeout(settings.handle);
    settings.handle = null;
  }

  // Starten des Faders
  settings.start = function(){
    if(settings.handle != null) return;

    fadeImgs();
  }

  // Zurücksetzen und erneutes Starten des Faders
  settings.restart = function(){
    window.clearTimeout(settings.handle);
    settings.handle = null;

    settings.wrapper.innerHTML = "";

    init();
  }

  // Zurücksetzen und erneutes Starten des Faders
  settings.reset = function(){
    window.clearTimeout(settings.handle);
    settings.handle = null;

    settings.wrapper.innerHTML = "";

    initFader();
  }

  // Objekt initialisieren und Faden anstossen
  init();

  return settings;
}

// Beispiel-Array mit Bildquellen
var arrImgs = ["../bilder/muenze_1.gif", "../bilder/muenze_2.gif", "../bilder/muenze_3.gif"];

window.onload = function(){
  // Fader-Objekt initialisieren
  objFader = Fader({
    id: "img_holder",  // ID des Holderelements
    imgs: arrImgs,     // Array der Bildquellen (src)
    w: 120,            // (integer, optional) Breite der Bilder
    h: 120,            // (integer, optional) Höhe der Bilder
    timer: 2000,       // (integer, optional) Zeit zwischen den Fade-Vorgängen
    delay: 10,         // (integer, optional) Geschwindigkeit des Fadevorgangs (kleiner = schneller)
    step: 0.01,        // (float, optional) Schrittweite beim Faden (grösser = schneller)
    cls_img: 'my_img'  // (string, optional) CSS-Klasse zum Auszeichnen der Bilder
  });
}