sexy slideshow with prototype and script.aculo.us
this here is a little slideshow made in prototype javascript and scriptaculous
- 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; }
