Simple JavaScript Slide Show Using script.aculo.us
Apr
17
Simple JavaScript slide shows are a very useful way of slickly displaying images on any site. I recently found my way on to DZone Snippets which provided a nice little article on creating a slide show, so, I thought it would be nice to take that script and add to it slightly making it easier for anyone to add it to their site.
the code
The code is very simple, requiring the inclusion of the following JavaScript files prototype.js, scriptaculous.js, effects.js and simple-slide-show.js. These provide the foundation of the slide show with very little HTML and CSS needed to complete the example.
HTML
The HTML consists of a div containing an unordered list (ul) of the required images. Both the containing div and ul have an id assigned to allow for easy styling without clashes.
<ul id="slide-images">
<li><img src="images/one.jpg" alt="One" title="One" /></li>
<li><img src="images/two.jpg" alt="Two" title="Two" /></li>
<li><img src="images/three.jpg" alt="Three" title="Three" /></li>
<li><img src="images/four.jpg" alt="Four" title="Four" /></li>
</ul>
</div>
CSS
The CSS is also very simple. The ul is given a width and a height defining the size of the slide show area and finally the li tags are absolutely positioned one on top of the other and that’s it. The rest is all done with JavaScript magic.
position:relative;
display:block;
margin:0px;
padding:0px;
width:400px;
height:300px;
overflow:hidden;
}
#slide-images li{
position:absolute;
display:block;
list-style-type:none;
margin:0px;
padding:0px;
background-color:#FFFFFF;
}
#slide-images li img{
display:block;
background-color:#FFFFFF;
}
example
Please click to see the Simple JavaScript Slide Show example.
download
Please feel free to download the Simple JavaScript Slide Show code.
This reduced code sets compatibility with latest prototype, simplifies the inner loop by removing useless variables, fixes the flashing on initial load and fixes the layer ordering bug when switching from the last back to the first frame by shifting the LI elements through its parent instead of trying to fade the old frame away which looked ugly anyway. With this version you can also remove background:white from the CSS. And it finally does not break if your document contains no slide show.
var delay = 4000;
var start_frame = 0;
function start_slideshow(delay) {
setTimeout(fadeInOut(delay), delay);
}
function fadeInOut(delay) {
return(function() {
lis = $$(‘#slide-images>li’);
new Effect.Appear(lis[1], { duration: 2, afterFinish: function(obj) {
lisFade = lis[0].remove();
lisFade.hide();
$(‘slide-images’).appendChild(lisFade);
start_slideshow(delay);
}});
})
}
Event.observe(document, ‘dom:loaded’, function() {
var lis = $$(‘#slide-images>li’);
if(lis.length > 1) for(i = 1; i li’).length > 1) start_slideshow(delay);
});
Last comment misses part of my script version. Here is the missing part:
Event.observe(document, ‘dom:loaded’, function() {
var lis = $$(‘#slide-images>li’);
if(lis.length > 1) for(i = 1; i li’).length > 1) start_slideshow(delay);
});
This comment box is totally broken when posting specific character combinations. Here’s my code snippet again:
http://gist.github.com/244894
Профессиональная раскрутка сайта в Москве в кратчайшие сроки. Финансовые гарантии результата, бесплатный аудит для потенциальных клиентов, подбор запросов, индивидуальный подход! Нужно раскрутить сайт – доверься профессионалам.
Yandex, Google, Rambler – только “белые” методы раскрутки сайтов от компании Weboptimize.
Очень полезный скрипт, попробую установить на своем сайте про путешествия тоже.
Описание анкоров сайтов.
simple. perfect.
Is there a way to make it go slower? Otherwise, fantastic!
Excelent! Thanks!