Zabawy z „lightboksem” #1: instalacja skryptu

Lightbox to mieszanka JavaScriptu i CSS, za pomocą której w elegancki i przyjemny dla oka sposób możemy wyświetlić zdjęcia. Na pewno ją kojarzysz – po kliknięciu na miniaturkę ekran zostaje przyciemniony a na środku płynnie rozwija się okienko, do którego następnie ładowana jest grafika.

Lightboksowe wtyczki do WordPressa

Najszybszym sposobem integracji lightboksa z naszym ukochanym systemem do prowadzenia bloga jest aktywacja odpowiednich wtyczek (których jest od groma):

1. Lightbox 2

2. Lightview Plus

3. Shadowbox JS

4. Shutter Reloaded

5. Thumbnail Viewer

6. i masa innych…

Niepotrzebne zwiększanie wagi strony

Niestety (a może na szczęście? :-)) najszybciej wcale nie oznacza najlepiej.

Praktycznie wszystkie wtyczki są przeciążone niepotrzebnymi funkcjami lub załączają dodatkowe JavaScriptowe biblioteki. W rezultacie strona waży dużo więcej przez co wolniej się wczytuje.

Spójrzmy na obrazek po prawej stronie. Przedstawia on rozkład objętości przykładowego bloga na poszczególne pliki. Żółtym markerem zaznaczyłem te pliki JavaScript, które zostały załączone po aktywacji jednej z powyższych, lightboksowych wtyczek. Ważą one łącznie 187 KB (o zgrozo!).

Ręczna implementacja lightboksa

Jako zagorzały zwolennik ręcznych robótek pragnę się z Wami podzielić swoim sposobem takiej implementacji lightboksa, która po skompresowaniu i z pominięciem biblioteki jQuery waży zaledwie 3KB (z jQuery 33KB).

1. Pobieramy gotowy skrypt Skrypt ten (autorstwa Leandro Vieira Pinho) wykorzystuje do działania bibliotekę jQuery.

2. Usuwamy niepotrzebne pliki Z rozpakowanego katalogu kasujemy katalog photos, pliki index.htm,  js/jquery.js, js/jquery.lightbox-0.x.js oraz js/jquery.lightbox-0.x.pack.js.

3. Zmieniamy odnośniki do grafiki na bezwzględne Otwieramy plik js/jquery.lightbox-0.x.min.js i szukamy (CTRL+F) odwołań do plików znajdujących się w katalogu images (czyli lightbox-blank.gif, lightbox-btn-close.gif, lightbox-btn-next.gif, lightbox-btn-prev.gif i lightbox-ico-loading.gif). Zmieniamy odwołania do plików ze schematu: images/nazwa-pliku.gif na: http://bezwzgledny-adres-do-katalogu-z-grafika/nazwa-pliku.gif.

4. Przegrywamy katalog na serwer

5. Ładujemy bibliotekę jQuery Otwieramy plik header.php (katalog skórki) i przed funkcją <?php wp_head(); ?> dodajemy:

<?php wp_enqueue_script('jquery') ?> 

1. Dodajemy odwołanie do nowego pliku CSS i JS Otwieramy plik header.php (katalog skórki) i zaraz za funkcją <?php wp_head(); ?> dodajemy dwie linijki:

<link href="(...)" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="(...)"></script> 

W miejsce (…) powinieneś wpisać bezwzględną ścieżkę do pliku CSS oraz JS lightboksa.

1. Uruchamiamy skrypt W dalszym ciągu edytujemy plik header.php i tuż przed znacznikiem </head> dodajemy:

<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=lightbox]').lightBox()
})
</script> 

W punkcie 7. określiliśmy sposób w jaki JavaScript ma rozpoznawać odnośniki. Powyższy zapis oznacza, że odnośnik taki powinien mieć parametr rel="lightbox". Możemy wstawić go ręcznie poprzez edytor HTML lub klikając na wstawioną miniaturkę, następnie ikonę „edytuj obrazek” i uzupełniając w zakładce „ustawienia zaawansowane” rubrykę „Rel pliku” wartością „lightbox”.

Oczywiście możemy to zmienić i przykładowo edytując 3. linijkę z 7. punktu:

1. $('#gallery a').lightBox(); Wszystkie odnośniki znajdujące się w boksie #gallery będą otwierały się lightboksem.

2. $('a.lightbox').lightBox(); Wszystkie odnośniki z klasą „lightbox” będą otwierały się lightboksem.

3. $('a').lightBox(); Wszystkie odnośniki na stronie będą otwierały się lightboksem.

#galeria #jquery #lightbox