Prosty pokaz slajdów w jQuery

Slideshow to bardzo prosty, a zarazem bardzo efektowny plugin jQuery realizujący automatyczny pokaz wykorzystując HTML/CSS/Javascript. Ważnym aspektem pluginu jest część HTML-owa, dzięki której wszystkie informacje są bezpośrednio na stronie, co pozostaje nie bez znaczenia dla szeroko pojętego SEO.

Napiszmy prosty pokaz slajdów przy użyciu jQuery, JavaScript i trochę CSS.

Na początek, naszym głównym celem powinno być utrzymanie czystości kodu.

<div id="slideshow">
    <img src="img/img1.jpg" alt="" class="active" />
    <img src="img/img2.jpg" alt="" />
    <img src="img/img3.jpg" alt="" />
</div>

Teraz możemy użyć CSS, aby umieścić zdjęcia jedno po drugim i wprowadzić aktywny obraz do najwyższego poziomu z z-index :

#slideshow {
    position:relative;
    height:350px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

Ze względu na pozycjonowanie bezwzględne, musimy określić wysokość bloku z pokazem slajdów. Należy pamiętać, że zdefiniowaliśmy trzy różne z-index. Wkrótce będziemy nimi manipulować używając jQuery.

W animacji slideshow będziemy przełączać z ustaloną prędkością pomiędzy każdym ze zdjęć. Zacznijmy więc, od napisania funkcji, która wprowadzi nowe zdjęcie na górę do ostatniego aktywnego obrazu:

function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    var $next = $active.next();    

    $next.addClass('active');

    $active.removeClass('active');
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

Tutaj ustawiamy interwał JavaScript, aby wywołać slideSwitch () co 5 sekund. Następnie slideSwitch () stosuje klasę CSS “active”, aby wprowadzić następny obraz na górę stosu. Ponieważ w slideSwitch () będziemy wybierać zdjęcia więcej niż raz, zdefiniujemy zmienne $active i $next dla wykonania wyboru .

Następnie, należy włączyć animację fade. Dla galerii takiej jak ta, fade in (rozjaśnianie) i fade out (ściemnianie) są identyczne:

function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    var $next = $active.next();

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

Zaczynamy od zastosowania klasy “last-active” zdefiniowanej wcześniej. Ponieważ “last-active” przypada w arkuszu stylów po “active”, z-index:9 ma pierwszeństwo, a „najwyższy” obraz spada na koniec. Następnie, ustawiamy przezroczystość nowego obrazu na 0, tak abyśmy mogli rozjaśnić go z wykorzystaniem funkcji animate(). Ostatecznie, usuwamy z-index z poprzedniego obrazu, aby dokończyć animację.

Mimo, że nasz slideshow działa dobrze, możemy sprawić, aby był bardziej solidny przez wbudowanie kilku domyślnych zmiennych. Po pierwsze, należy zdefiniować domyślny aktywny obraz. Poza tym, możemy użyć innych domyślnych zmiennych, aby zrobić pętlę animacji galerii.

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

Najpierw zdefiniujemy domyślny obraz dla zmiennej $active, która co ciekawe musi być ostatnim obrazem na stosie. To dlatego, że poprzez pozycjonowanie bezwzględne, ostatni obraz pojawia się na górze i musimy rozpocząć od niego, jeśli chcemy uniknąć migotania.

Jeśli chcesz poprawić tę funkcję, należy ustawić szybkość animacji. Poza tym ten slideshow łatwo przekształcić: zamiast obrazów (img) można „przewijać” bloki (div).

Plugin Slideshow/jQuery znalazł praktyczne zastosowanie w naszym projekcie www.estaco.pl, którym jest internetowym sklepem meblowym, stworzonym na potrzeby obsługi szczecińskiej firmy nowoczesnych mebli. Działalność firmy opiera się na wykonywaniu mebli na wymiar, aranżacji wnętrz i projektów mebli, przy wykorzystaniu nowej technologii produkcji i perfekcyjnym, estetycznym wykonaniu.

Download the complete slideshow here

Źródło: http://jonraasch.com/blog/a-simple-jquery-slideshow