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.

<div id="slide-show">

    <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.

#slide-images{
    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.

59 Responses to “Simple JavaScript Slide Show Using script.aculo.us”

  1. hurikhan77 says:

    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);
    });

  2. hurikhan77 says:

    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);
    });

  3. hurikhan77 says:

    This comment box is totally broken when posting specific character combinations. Here’s my code snippet again:

    http://gist.github.com/244894

  4. SErG says:

    Профессиональная раскрутка сайта в Москве в кратчайшие сроки. Финансовые гарантии результата, бесплатный аудит для потенциальных клиентов, подбор запросов, индивидуальный подход! Нужно раскрутить сайт – доверься профессионалам.
    Yandex, Google, Rambler – только “белые” методы раскрутки сайтов от компании Weboptimize.

  5. Anka says:

    Очень полезный скрипт, попробую установить на своем сайте про путешествия тоже.

  6. Описание анкоров сайтов.

  7. None says:

    simple. perfect.

  8. Kat says:

    Is there a way to make it go slower? Otherwise, fantastic!

  9. Facundo says:

    Excelent! Thanks!

Leave a Reply