Zamienniki popularnego LightBox’a

Zobacz komentarze

WEBprojektant.plDzisiaj trudno znaleźć stronę WWW bez popularnego LightBox’a lub podobnemu mu skryptowi. Oryginalny LightBox jest już skryptem dosyć przestarzałym (ostatnią aktualizacje miał trzy lata temu) oraz powoduje konflikt z jQuery poprzez plik prototype.js, który wchodzi w skład skryptu. Problem ten można oczywiście rozwiązać stosując jQuery.noConflict, ale może warto poszukać zamienników LightBox’a właśnie w jQuery? W tym artykule przedstawię dwa najlepsze (według mnie) zamienniki LightBox’a. Oczywiście jest masa innych zamienników, ale ja skupię się na tych dwóch.

1. ShadowBox

Pierwszym i według mnie najlepszym zamiennikiem LightBox’a jest ShadowBox. ShadowBox wyświetli zarówno obrazy jak i filmiki, pliki flashowe czy strony WWW. Tak jak wspomniałem wyżej wtyczka wymaga zainstalowania jQuery na naszej stronie WWW. Instalacja jest bardzo prosta:

1. Ściągamy najnowszą wersję z oficjalnej strony: http://www.shadowbox-js.com/download.html

2. W pliku witryny umieszczamy następujący kod:

1 <link rel="stylesheet" type="text/css" href="shadowbox.css">
2 <script type="text/javascript" src="shadowbox.js"></script>
3 <script type="text/javascript">
4 Shadowbox.init();
5 </script>

A hiperłącze ma wyglądać następująco:

1 <a href="obraz.jpg" rel="shadowbox" title="Moj obraz">Moj obraz</a>

Jeśli chcemy zrobić slajdy hiperłącza muszą wyglądać następująco:

1 <a href="obraz.jpg" rel="shadowbox[Vacation]" title="Moj obraz">Moj obraz</a>
2 <a href="obraz2.jpg" rel="shadowbox[Vacation]" title="Moj obraz 2">Moj obraz 2</a>

Jest jeszcze wiele innych możliwości tego pluginu, o których możemy przeczytać tu: http://www.shadowbox-js.com/usage.html

2. LightBox jQuery

Jeśli komuś zależy na takim samym wyglądzie jaki ma oryginalny LightBox to polecam zainstalowanie wtyczki LightBox jQuery. Instalacja jest równie prosta jak instalacja ShadowBox’a.

1. Ściągamy wszystkie potrzebne pliki ze strony: http://leandrovieira.com/projects/jquery/lightbox/

2. W kodzie strony umieszczamy następujące kody:

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

Oraz aby plugin był aktywny:

01 <script type="text/javascript">
02 $(function() {
03 //wybieramy interesujaca nas opcje reszte usuwamy
04 $('a[@rel*=lightbox]').lightBox(); // wlacz dla wszystkich hiperlaczy z atrybutem rel=lightbox
05 // lub
06 $('#gallery a').lightBox(); // wlacz dla wszystkich hiperlaczy znajdujacych sie w #gallery
07 // lub
08 $('a.lightbox').lightBox(); // wlacz dla wszystkich hiperlaczy z klasa lightbox
09 // lub
10 $('a').lightBox(); // wlacz dla wszystkich hiperlaczy na stronie
11
12 });
13 </script>

Więcej o tym pluginie można przeczytać na oficjalnej stronie, której link umieściłem już wyżej.

Jeśli miałeś jakieś problemy z instalacją napisz o tym w komentarzu, a w wolnej chwili postaram się pomóc.

WEBprojektant.pl na YouTube!

Kanał WEBprojektant.pl na YouTubeMam przyjemność ogłosić, że działa nasz kanał na Yotube - WEBprojektant.pl - poradnik webmastera, gdzie możecie znaleźć nasze video tutoriale.

Może nie jest tam jeszcze porażająca ilość poradników dla webmasterów, ale postaram się aktualizować kanał w miarę możliwości. Proszę Was o tematykę jaką chcecie, aby poruszyć w kolejnych tutorialach. Łatwiej mi będzie wybrać na czym się skoncentrować.

Może się przydać

Top 3 webmaster

Nasze statystyki

Użytkowników:
130
Artykułów:
224
Odsłon artykułów:
3280104