sexy slideshow with prototype and script.aculo.us

this here is a little slideshow made in prototype javascript and scriptaculous

NatashaVojnovic-Rafael-JesusIsMyHomeboy-DavidLaChapelle-iD2003Sept-zob

Facebook profile can tell you if a person is extroverted, but not if they’re neurotic: http://ow.ly/IhQB
What is
“first instance of a nonhuman mammal changing its voice to advertise her peak of fertility”?
Dmbryonic Stem Cell Research Begins With $21 Million from Obama: http://ow.ly/HWoT via @ScienceInsider
IMice genetically derived
from two mothers are smaller and live 30% longer than normally bred mice. http://ow.ly/HUu2

©pictures by David LaChapelle

the only thing which needs to be there is the script of course and those little divs:

<div id="cover"></div>
<div id="slideshowWrapper"> </div>

the content of the slideshow is everything in a div:

<div class="article-content">
      <img title="rel. url" alt="" />
      <img title="rel. url" alt="" />
      ....
<ul>
	<li>quote</li>
	<li>quote1</li>
	<li>quote2</li>
...</ul>
.....</div>

the pictures inside #article-content are taken right away if they have a title with the relative url to the picture. the quotes are from a list like this:

...
images: $$('div.article-content img[title]'),
text:   $$('div.article-content ul li'),
container: $('slideshowWrapper'),
...

/*
@author: Nils M. Petersohn
*/
 
$$('div.article-content').each(function(el){el.hide();});	
 
if (Object.isUndefined(Cygl)) { var Cygl = { } }
 
Cygl.Slideshow = Class.create({
 
    initialize: function() {
        this.options = Object.extend({
            images: $$('div.article-content img[title]'),
            text:   $$('div.article-content ul li'),
            container: $('slideshowWrapper'),
            completeLoops: 3,
            duration: 4,
            showTime: 8
        }, arguments[0] || { });
 
        var that = this;
        this.start = true;
        this.faster = false;
        this.delay = 0;
        this.delayText = 0;
        this.orginalSize = this.options.container.getStyle('width').replace("px","");
 
        this.options.images.each(function(el){el.hide();});
        this.options.text.each(function(el){el.hide()});
 
        var cont = this.options.container;
        var z = this.options.images.length;
 
        this.options.text.each(function(el){
            internalContainer = new Element('div', { 'class': 'quoteContainer','style':'z-index:1000;display:none'})
            internalContainer.insert(new Element('span', { 'class': 'quote'  }).update(el.innerHTML));//
            cont.insert(internalContainer);
        });
        this.options.images.each(function(el){
            internalContainer = new Element('div', { 'class': 'imageContainer','style':'z-index:' + z-- })
            internalContainer.insert(new Element('img', { 'class': 'sildeshowImage', src: "/"+el.title }));
            cont.insert(internalContainer);
        });	
 
        this.loop();
 
    },
 
    loop: function(){
 
        var cont = this.options.container;
        var that = this;
        var switcher = false;
 
        var images = $$('div.imageContainer');
        var quotes = $$('div.quoteContainer');
        var j=1;
        $R(1 ,this.options.completeLoops * images.length ).each(function(i){
 
            images.each(function(el){ 
 
                if(el.getStyle('z-Index') != 1)  that.moveEl(el,switcher);
                if(j % that.options.images.length == 0)  switcher = !switcher;
 
                j++;
 
            });
 
            images.reverse();
 
            quotes.each(function(el){
                that.moveElText(el,switcher);
            });
 
        });
 
    },
 
    moveEl: function(el,direction){
 
        new Effect.Morph(el,{style: {width: ((!direction)?'0':this.orginalSize)+'px' }, delay:this.delay, duration:this.options.duration});
 
        this.delay = this.delay + this.options.duration + this.options.showTime;
 
        var that = this;
        if(this.start){
            $$('div.quoteContainer').each(function(el){
                that.moveElText(el,direction);
            });
            this.start = false;
        }
 
    },
 
    moveElText: function(el,direction){
 
        new Effect.Appear(el, { delay:this.delayText, duration:this.options.duration , queue: 'end' } );
        new Effect.Fade(el,  { delay:this.delayText + this.options.showTime / 2 , duration:this.options.duration, queue: 'end' });
        this.delayText = this.delayText + this.options.duration  ;
 
    }
});
 
Event.observe(window, 'load', function() {
  $$('div.article-content').each(function(el){el.show();});
  new Cygl.Slideshow() ;
  new Effect.Fade('cover', {duration:4});
});

#slideshowWrapper, .sildeshowImage, .imageContainer, .quoteContainer,#cover {
	height:500px;
	width:700px;
       -webkit-border-top-left-radius:10px;
	-webkit-border-top-right-radius:10px;
	-webkit-border-bottom-left-radius:10px;
	-webkit-border-bottom-right-radius:10px;
	-moz-border-radius: 10px;
	border-spacing: 0px;
}
.imageContainer{
	position:absolute;
	overflow:hidden;
}
#cover{
	height:503px;
	width:703px;
	position:absolute;
	z-index:2000;
	background:#ECE3BA;
}
#slideshowWrapper{
	border: 1px inset #ECE3BA;
	overflow:hidden;
 
}
#container img.sildeshowImage{
	margin:0px;
}
.quoteContainer{
	position:absolute;
	overflow:hidden;
}
.quote{
	-webkit-border-top-left-radius:10px;
	-webkit-border-top-right-radius:10px;
	-webkit-border-bottom-left-radius:10px;
	-webkit-border-bottom-right-radius:10px;
	-moz-border-radius: 10px;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	background-color:#333 ;
	color:white;
	font-weight:lighter;
	margin:20px;
	padding:10px;
	width:660px;
	font-size:50px;
	line-height:60px;
	-moz-opacity:0.4;
	filter:alpha(opacity=40);
	opacity: 0.4;
	position:absolute;
}
 
#debug{
	width:700px;
	height:200px;
}