$(document).ready(function(){
$('#news ul').innerfade({
animationtype:'slide',
speed:750,
timeout:3000,
type:'random'
});
});
/* =========================================================
// 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>
*
* $('#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($) {
$.fn.innerfade = function(options) {
return this.each(function() {
$.innerfade(this, options);
});
};
$.innerfade = function(container, options) {
var settings = {
'animationtype': 'fade',
'speed': 'normal',
'type': 'sequence',
'timeout': 2000,
'containerheight': 'auto',
'runningclass': 'innerfade',
'children': null
};
if (options)
$.extend(settings, options);
if (settings.children === null)
var elements = $(container).children();
else
var elements = $(container).children(settings.children);
if (elements.length > 1) {
$(container).css('position', 'relative').css('height', settings.containerheight).addClass(settings.runningclass);
for (var i = 0; i < elements.length; i++) {
$(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
};
if (settings.type == "sequence") {
setTimeout(function() {
$.innerfade.next(elements, settings, 1, 0);
}, settings.timeout);
$(elements[0]).show();
} 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 );
$.innerfade.next(elements, settings, current, last);
}, settings.timeout);
$(elements[last]).show();
} else if ( settings.type == 'random_start' ) {
settings.type = 'sequence';
var current = Math.floor ( Math.random () * ( elements.length ) );
setTimeout(function(){
$.innerfade.next(elements, settings, (current + 1) % elements.length, current);
}, settings.timeout);
$(elements[current]).show();
} else {
alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
}
}
};
$.innerfade.next = function(elements, settings, current, last) {
if (settings.animationtype == 'slide') {
$(elements[last]).slideUp(settings.speed);
$(elements[current]).slideDown(settings.speed);
} else if (settings.animationtype == 'fade') {
$(elements[last]).fadeOut(settings.speed);
$(elements[current]).fadeIn(settings.speed, function() {
removeFilter($(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() {
$.innerfade.next(elements, settings, current, last);
}), settings.timeout);
};
})(jQuery);
// **** remove Opacity-Filter in ie ****
function removeFilter(element) {
if(element.style.removeAttribute){
element.style.removeAttribute('filter');
}
}
#news {
display: block;
height: 70px;
}
#news ul {
list-style-type: none;
}
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>StarTrackr!</title>
<link rel="stylesheet" href="../../css/base.css" type="text/css" media="screen" charset="utf-8"/>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" charset="utf-8"/>
<script src="../../lib/jquery-1.7.1.min.js" type="text/javascript" ></script>
<script src="jquery.innerfade.js" type="text/javascript" ></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1>StarTrackr!</h1>
</div>
<div id="content">
<h2>
Welcome!
</h2>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Buy Now!</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Gift Ideas</a></li>
</ul>
<p id="intro">
Welcome to <strong>StarTrackr!</strong> the planet's premier celebrity tracking and monitoring service. Need to know where in the world the best bands, musicians or producers are within 2.2 square meters? You've come to the right place. We have a very special special on B-grade celebs this week, so hurry in!
</p>
<p id="disclaimer">
Disclaimer! This service is not intended for the those with criminal intent. Celebrities are kind of like people so their privacy should be respected.
</p>
<div id="news">
<h2>News</h2>
<ul>
<li><a href="#">Barron Von Jovi spotted downtown LA, with entourage</a></li>
<li><a href="#">Mo'Fat signs up-and-coming New York rapper Ice Trey to three-record deal</a></li>
<li><a href="#">Glendatronix rumored to be considering movie roles</a></li>
<li><a href="#">Area man claims to be Darth Fader's son</a></li>
</ul>
</div>
<div id="celebs">
<h2 class="heading">Our Celebrities</h2>
<p class="info">
We have an ever changing roster of newly chipped celebrities. But it can take as little as a week for the little critters to realise they've been tagged - so you have to be fast!
</p>
<table class="data">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Occupation</th>
<th>Approx. Location</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>203A</td>
<td>Johny Stardust (<a href="../../images/johnny_400.jpg" class="lightbox">pic</a>)</td>
<td>Front-man</td>
<td>Los Angeles</td>
<td>$39.95</td>
</tr>
<tr>
<td>141B</td>
<td>Beau Dandy (<a href="../../images/beau_400.jpg" class="lightbox">pic</a>)</td>
<td>Singer</td>
<td>New York</td>
<td>$39.95</td>
</tr>
<tr>
<td>2031</td>
<td>Mo' Fat (<a href="../../images/mofat_400.jpg" class="lightbox">pic</a>)</td>
<td>Producer</td>
<td>New York</td>
<td>$19.95</td>
</tr>
<tr>
<td>007F</td>
<td>Kellie Kelly (<a href="../../images/kellie_400.jpg" class="lightbox">pic</a>)</td>
<td>Singer</td>
<td>Omaha</td>
<td>$11.95</td>
</tr>
<tr>
<td>8A05</td>
<td>Darth Fader (<a href="../../images/fader_400.jpg" class="lightbox">pic</a>)</td>
<td>DJ</td>
<td>London</td>
<td>$19.95</td>
</tr>
<tr>
<td>6636</td>
<td>Glendatronix (<a href="../../images/glenda_400.jpg" class="lightbox">pic</a>)</td>
<td>Keytarist</td>
<td>London</td>
<td>$39.95</td>
</tr>
</tbody>
</table>
</div>
<div id="comment">
<h2>Leave a comment</h2>
name:<br />
<input type="text" /><br/>
comment:<br/>
<textarea rows="5" cols="30"></textarea>
</div>
<h2>Fine Print</h2>
<p id="fine_print">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="footer">
<p>
© Copyright 2010 CelebriTracker Productions
</p>
</div>
</div>
</body>
</html>
