jQuery: Lightbox

jQuery Lightbox jest skryptem dzięki któremu możemy wyświetlać nasze zdjęcia w galeriach. Po kliknięciu w miniaturkę zdjęcia pojawia się stylizowane okno z pełnym rozmiarem zdjęcia. Można spotkać podobne skrypty, ale ten wykorzystuję bibliotekę programistyczną dla języka JavaScript – jQuery.

Na początku musimy pobrać paczkę z naszym skryptem stąd. Następnie pliki w niej zawarte umieszczamy w katalogu głównym swojej strony, plik jquery.lightbox.js” w katalogu js/. Jeśli nie mamy jeszcze biblioteki jQuery, to ją też ściągamy stąd i wrzucamy do katalogu js/. W pliku, w którym wyświetlamy nasze miniaturki w sekcji <head>…</head> umieszczamy:

1
2
3
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen" />

Należy podać dokładne ścieżki do plików, jeśli postanowiłeś zmienić ich docelowe katalogu. Dodatkowo w sekcji <head>…</head> umieszczamy:

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
$(document).ready(function() {
    $(".lightbox").lightbox({
                fitToScreen: true,
                            imageClickClose: false
            });

});
</script>

W taki sposób jeśli do odnośnika dodamy atrybut class=”lightbox”, to nasz skrypt zadziała i wyświetli zdjęcie w maksymalnym rozmiarze. Obrazek dodatkowo jest dostosowywany do okna przeglądarki (linia 4) oraz kliknięcie w niego nie spowoduje zniknięcia obrazka (linia 5).

Działanie skryptu możecie zobaczyć tutaj.

Comments

Galeria z Lightbox’em | Arkadiusz Tobiasz

[…] na swojej stronie uruchomić Lightbox’a nie będę pisał kolejny raz. W tym celu odsyłam do wcześniejszego wpisu. Po wykonaniu kroków w nim zawartych możemy przystąpić do kolejnego. Musimy ściągnąć skrypt […]

Reply
S_P_E_C

Hej!
Wkradł się drobny błąd w prezentowanym kodzie. Po „fitToScreen: true” powinien być przecinek oddzielający następny atrybut.

Reply
    Arkadiusz Tobiasz

    dziękuje, tak brakowało przecinka, poprawka została już naniesiona

    Pozdrawiam,

    Reply
Jan

Dlaczego od razu plik jquery.lightbox.js nie jest umieszczony w katlogu js; dlaczego od razu nie ma załadowanej biblioteki i trzeba ją ściągnąć; jak ktosnie zna tego języka to nie za bardzo wie o co chodzi. Jeszcze kilka takich operacji i wyjdzie, że sam napisałem ten program …

Reply
    Arkadiusz Tobiasz

    Linki do wszystkich bibliotek są umieszczone. Czy takie trudne jest ich ściągnięcie i umieszczenie w katalogu js? Nie sądze.

    Reply

Leave a Comment

fifteen − nine =