innerfade.js

/* =========================================================

// jquery.innerfade.js

// Datum: 2008-02-14
// Firma: Medienfreunde Hofmann & Baldes GbR
// Author: Torsten Baldes
// Mail: t.baldes@medienfreunde.com
// Web: http://medienfreunde.com

// based on the work of Matt Oakes http://portfolio.gizone.co.uk/applications/slideshow/
// and Ralf S. Engelschall http://trainofthoughts.org/

 *
 *  <ul id="news">
 *      <li>content 1</li>
 *      <li>content 2</li>
 *      <li>content 3</li>
 *  </ul>
 *
 *  jQuery('#news').innerfade({
 *    animationtype: Type of animation 'fade' or 'slide' (Default: 'fade'),
 *    speed: Fading-/Sliding-Speed in milliseconds or keywords (slow, normal or fast) (Default: 'normal'),
 *    timeout: Time between the fades in milliseconds (Default: '2000'),
 *    type: Type of slideshow: 'sequence', 'random' or 'random_start' (Default: 'sequence'),
 *      containerheight: Height of the containing element in any css-height-value (Default: 'auto'),
 *    runningclass: CSS-Class which the container get’s applied (Default: 'innerfade'),
 *    children: optional children selector (Default: null)
 *  });
 *

// ========================================================= */


(function(jQuery) {

  jQuery.fn.innerfade = function(options) {
    return this.each(function() {
      jQuery.innerfade(this, options);
    });
  };

  jQuery.innerfade = function(container, options) {
    var settings = {
      'animationtype':    'fade',
      'speed':            'normal',
      'type':             'sequence',
      'timeout':          2000,
      'containerheight':  'auto',
      'runningclass':     'innerfade',
      'children':         null
    };

    if (options) {
      jQuery.extend(settings, options);
    }

    if (settings.children === null) {
      var elements = jQuery(container).children();
    }
    else {
      var elements = jQuery(container).children(settings.children);
    }

    if (elements.length > 1) {
      jQuery(container).css('position', 'relative').css('overflow', 'hidden').addClass(settings.runningclass);
      var biggestHeight=0;
      for (var i = 0; i < elements.length; i++) {
        jQuery(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
        if (jQuery(elements[i]).height() > biggestHeight) {
          biggestHeight = jQuery(elements[i]).height();
        }
      }
      if (settings.type == "sequence") {
        setTimeout(function() {
          jQuery.innerfade.next(container,elements, settings, 1, 0);
        }, settings.timeout);
        jQuery(elements[0]).show();
        jQuery(container).css('height', biggestHeight);
      }
      else if (settings.type == "random") {
        var last = Math.floor ( Math.random () * ( elements.length ) );
        setTimeout(function() {
          do {
            current = Math.floor ( Math.random () * ( elements.length ) );
          } while (last == current );
          jQuery.innerfade.next(container,elements, settings, current, last);
        }, settings.timeout);
        jQuery(elements[last]).show();
      }
      else if ( settings.type == 'random_start' ) {
        settings.type = 'sequence';
        var current = Math.floor ( Math.random () * ( elements.length ) );
        setTimeout(function(){
          jQuery.innerfade.next(container,elements, settings, (current + 1) %  elements.length, current);
        }, settings.timeout);
        jQuery(elements[current]).show();
      }
      else {
        alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
      }
    }
  };

  jQuery.innerfade.next = function(container,elements, settings, current, last) {
    if (settings.animationtype == 'slide') {
      if(jQuery(elements[current]).outerHeight() > jQuery(container).outerHeight()) {
        jQuery(container).css('height', jQuery(elements[current]).outerHeight());
      }
      jQuery(elements[last]).slideUp(settings.speed);
      jQuery(elements[current]).slideDown(settings.speed);
    }
    else if (settings.animationtype == 'fade') {
      jQuery(elements[last]).fadeOut(settings.speed);
      jQuery(elements[current]).fadeIn(settings.speed, function() {
        removeFilter(jQuery(this)[0]);
      });
    }
    else {
      alert('Innerfade-animationtype must either be \'slide\' or \'fade\'');
    }

    if (settings.type == "sequence") {
      if ((current + 1) < elements.length) {
        current = current + 1;
        last = current - 1;
      }
      else {
        current = 0;
        last = elements.length - 1;
      }
    }
    else if (settings.type == "random") {
      last = current;
      while (current == last) {
        current = Math.floor(Math.random() * elements.length);
      }
    }
    else {
      alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
    }

    setTimeout((function() {
      jQuery.innerfade.next(container,elements, settings, current, last);
    }), settings.timeout);
  };

})(jQuery);

// **** remove Opacity-Filter in ie ****
function removeFilter(element) {
  if(element.style.removeAttribute){
    element.style.removeAttribute('filter');
  }
}