var Showcase = new Class({
Implements: [Options],
options: {
auto_start: false,
auto_interval: 5000
},
initialize: function(wrapper, controllers, options) {
this.setOptions(options);
this.wrapper = $(wrapper);
this.current = 0;
this.slides = this.wrapper.getChildren();
this.slides[this.current].addClass('active');
this.ctrls = controllers;
this.ctrls.each(function(c, ind) {
c.addEvent('click', function() {
this.set(ind);
}.bind(this));
}.bind(this))
this.ctrls[this.current].addClass('on');
if(this.options.auto_start) {
this.timeout = setTimeout(this.autoSet.bind(this), this.options.auto_interval);
}
// if true does nothing when clicking a controller
this.idle = false;
},
set: function(index) {
if(this.options.auto_start) {
clearTimeout(this.timeout);
}
if(!this.idle) {
// content fade
var myfx = new Fx.Tween(this.slides[this.current], {'property': 'opacity'});
current_zindex = this.slides[this.current].getStyle('z-index');
this.slides[this.current].setStyle('z-index', current_zindex.toInt() + 1);
this.slides[index].setStyle('z-index', current_zindex);
myfx.start(1,0).chain(function() {
this.slides[this.current].setStyle('z-index', current_zindex.toInt() - 1);
myfx.set(1);
this.slides[this.current].removeClass('active');
this.slides[index].addClass('active');
this.current = index;
this.idle = false;
}.bind(this));
// controllers animation
var current = this.current;
var next = current;
var i = 0;
// chain, loop over every intermediate state
while(i < Math.abs(index - next)) {
var prev = next;
next = index > current ? next + 1 : next - 1;
var self = this;
// closure to pass prev and next by value
(function(c, n) {
setTimeout(function() { self.setCtrl(n, c) }, 100 * (Math.abs(n-current) - 1));
})(prev, next)
}
}
if(this.options.auto_start) {
this.timeout = setTimeout(this.autoSet.bind(this), this.options.auto_interval);
}
},
setCtrl: function(next, current) {
// current transition, fwd or rwd
this.ctrls[current].removeClass('on');
this.ctrls[current].addClass(next > current ? 'fwd' : 'rwd');
// next transition
this.ctrls[next].addClass('on');
// prepare all controllers for the next transition
for(var i = next + 1; i < this.ctrls.length; i++) {
this.ctrls[i].removeClass('fwd');
this.ctrls[i].addClass('rwd');
}
for(var i = next - 1; i >= 0; i--) {
this.ctrls[i].removeClass('rwd');
this.ctrls[i].addClass('fwd');
}
// avoid click actions till the chain as finished
if(next == this.current) {
this.idle = false;
}
else {
this.idle = true;
}
},
autoSet: function() {
if(this.current >= this.slides.length - 1) {
var index = 0;
}
else {
var index = this.current + 1;
}
this.set(index);
}
});
var myshowcase = new Showcase('showcase_items', $$('.scase_sym'), {auto_start: true});
<h1>Showcase pagination</h1>
<div id="showcase_items">
<div class="showcase_item active" style="display: block;z-index:4" id="item_0">
<article>
<h1>My first item</h1>
<p>Quisque non placerat nibh! Etiam lacinia turpis id ipsum molestie vestibulum. Fusce consectetur diam vitae tortor scelerisque ac mattis lacus blandit. Fusce arcu purus, sagittis sit amet sodales in, iaculis...</p>
</article>
</div>
<div class="showcase_item" style="display: block;z-index:3" id="item_1">
<article>
<h1>Second item</h1>
<p>Praesent dapibus dolor nunc, vel euismod quam? Integer id fermentum urna. Duis mi lacus, facilisis eu elementum eu, facilisis eget dolor. Nam dictum facilisis mi vel ullamcorper. Etiam nec libero nunc...</p>
</article>
</div>
<div class="showcase_item" style="display: block;z-index:2" id="item_2">
<article>
<h1>Third item</h1>
<p>Donec id nibh purus, condimentum tincidunt nisi. Vestibulum vestibulum mollis scelerisque. Donec felis metus, posuere sed posuere et, consequat vel lacus. Suspendisse turpis turpis, molestie a tempus...</p>
</article>
</div>
<div class="showcase_item" style="display: block;z-index:1" id="item_3">
<article>
<h1>Fourth item</h1>
<p>Nunc at est nulla. Nullam eget leo lectus. Curabitur condimentum sollicitudin semper! Vivamus et justo et dolor laoreet dictum vel vitae diam. Cras et dui nisi. Donec molestie semper libero; eu fringilla...</p>
</article>
</div>
</div>
<!-- CONTROLLERS -->
<table>
<tr>
<td><div class="scase_sym"><span></span></div></td>
<td><div class="scase_sym"><span></span></div></td>
<td><div class="scase_sym"><span></span></div></td>
<td><div class="scase_sym"><span></span></div></td>
</tr>
</table>
/* general */
body {
padding: 20px;
font: normal 75%/150% Arial;
background: #f1f1f1;
}
h1 {
font-weight: bold;
font-size: 1.6em;
margin: 1em 0;
}
/* structure */
#showcase_items {
height: 300px;
width:600px;
margin:auto;
overflow: hidden;
position: relative;
}
.showcase_item {
height: 100%;
position: absolute;
width: 100%;
}
/* controllers */
table {
margin: auto;
}
table td {
padding: 20px 8px;
}
.scase_sym {
background: #ccc;
border-radius: 50%;
cursor: pointer;
height: 20px;
width: 20px;
overflow: hidden;
box-shadow: 0 1px 1px #333 inset, 0 1px 1px #fff;
}
.scase_sym:hover {
background: #aaa;
}
.scase_sym span {
-moz-transition: all 100ms ease 0s;
-webkit-transition: all 100ms ease 0s;
background: #9d4e4e;
border-radius: 50%;
margin-left: -20px;
cursor: pointer;
height: 20px;
width: 20px;
display:inline-block;
box-shadow: 0 1px 2px #333 inset, 0 1px 1px #FFFFFF;
}
.scase_sym.on span {
margin: 0 !important;
}
.scase_sym.fwd span {
margin-left: 20px;
}
.scase_sym.rwd span {
margin-left: -20px;
}
/* contents */
article {
padding: 10px;
background: #333;
opacity:0.9;
color: #fff;
position: absolute;
bottom: 0;
width: 580px;
border-top: 1px solid #ccc;
}
article h1 {
font-weight: bold;
text-shadow: 2px 2px 2px #000;
font-size: 1.4em;
margin: 0.5em 0;
}
#item_0 {
background: url('http://lorempixel.com/600/300/');
}
#item_1 {
background: url('http://placekitten.com/600/300/');
}
#item_2 {
background: url('http://www.castellosanmarco.it/wp-content/uploads/2011/10/etna-sicilia-600x200.jpg');
}
#item_3 {
background: url('http://www.freepcgamesvane.com/wp-content/uploads/2012/11/Microsoft-Flight-Simulator-X-Deluxe-Free-Game-Download-600x200.jpg');
}