Czasem na jednej podstronie trzeba umieścić dwie galerie zdjęć, tak jak na naszej stronie fotografowaniedozwolone.org. Próbowałem znaleźć w sieci prosty mechanizm, z minimalną ilością kodu w dodatku oparty o Dojo Toolkit Framework.

Wydaje się, co mogłoby być prostsze? Przecież w sieci jest pełno gotowych bibliotek z otwartym kodem – bierz i korzystaj! Niestety w każdej coś mi się nie podobało. W końcu zrezygnowałem z poszukiwań i postanowiłem odpowiednią bibliotekę stworzyć samodzielnie.

Przyjąłem następujące założenia:

• biblioteka powinna być oparta o Dojo Toolkit
• użycie galerii powinno być proste i szybkie
• kod powinien obsługiwać nieograniczoną ilość galerii na jednej stronie (chodzi o to, że większość dostępnych bibliotek ma z tym duży problem)
• slajdem może być dowolny kod HTML.

Reszta, jak zawsze – minimum zaśmiecania kodu HTML samej witryny, pełna skalowalność, szybkość działania.

Po kilku godzinach pracy z przyjemnością chcę Państwu zaprezentować Urfin’s Everything Slider  , za pomocą którego możecie łatwo tworzyć proste przewijanie zdjęć na każdej stronie. Jest to kod na tyle prosty i przejrzysty, że z łatwością możecie go rozbudować o dodatkowe efekty i funkcje. Udostępniam go na warunkach GPL. Jednocześnie zachęcam do rozwijania kodu i umieszczanie linków do swoich dzieł w komentarzach do tego wpisu. W ten sposób ułatwimy innym użytkownikom poszukiwania.

Pobierz Urfin’s Everything Slider v1.0

Oto krótka instrukcja obsługi:

1. Wypakowujemy zawartość udostępnionej paczki do odpowiednich folderów (komentarz: zawsze trzymam się zasady, że pliki muszą być odseparowane od siebie według typu zawartości).

2. Linkujemy styl CSS biblioteki – plik slider.css (komentarz: należy pamiętać o tym, że CSS ładujemy przed JavaScript, gdyż CSS ładuje się asynchronicznie, a skrypty synchronicznie, co daje efekt „zawieszania” witryny):

<link href="css/slider.css" media="screen" rel="stylesheet" type="text/css" />

3. Linkujemy z CDN bibliotekę Dojo (komentarz: zalecam podłączanie bibliotek zewnętrznych przez CDN np. Googla albo Yahoo ze względu na cachowanie – jest duże prawdopodobieństwo, że użytkownik już ma załadowaną tę bibliotekę z innej witryny):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>

(komentarz: pewnie zauważyliście, iż ładuję wersję 1.6.1, a nie 1.7? Tak niestety jest, bo 1.7 zawiera jeszcze zbyt dużo błędów)

4. Podłączamy skrypt samej biblioteki:

<script type="text/javascript" src="js/Urfin/EverythingSlider.min.js"></script>

5. W treści witryny tworzymy markup dla galerii, który jest intuicyjnie prosty (komentarz: nie należy zmieniać nazw klas CSS):

<div class="slider">
    <div class="slides">
        <div class="slide">
            <img src="obrazek_1.jpg" alt="Obrazek 1" />
        </div>
        <div class="slide">
            <img src="obrazek_2.jpg" alt="Obrazek 2" />
        </div>
        <div class="slide">
            <img src="obrazek_3.jpg" alt="Obrazek 3" />
        </div>
    </div>
</div>

Teraz galeria jest gotowa do użytku!