publikacja: 6 października 2008, autor: , komentarzy 150 https://wpninja.pl/artykuly/zabawy-z-lightboksem-1-instalacja-skryptu/

Zabawy z „lightboksem” #1: instalacja skryptu

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):

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.htmjs/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.giflightbox-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') ?>
  6. 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.

  7. 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:

  • $('#gallery a').lightBox();
    Wszystkie odnośniki znajdujące się w boksie #gallery będą otwierały się lightboksem.
  • $('a.lightbox').lightBox();
    Wszystkie odnośniki z klasą „lightbox” będą otwierały się lightboksem.
  • $('a').lightBox();
    Wszystkie odnośniki na stronie będą otwierały się lightboksem.

Dodaj własny komentarz

Odnośniki z innych stron

Lista innych stron, które w jakiś sposób odnoszą się do opublikowanej tutaj treści:

  1. Zabawy z „lightboksem” #2: konfiguracja

    […] poprzedniej części miałeś okazję dowiedzieć się czym jest tzw. „efekt lightbox” i poznać dwa […]

  2. Krótkie podsumowanie: listopad 2008

    […] Zabawy z „lightboksem” #1: instalacja skryptu Czym jest „efekt lightboks”, w jaki sposób można go zaimplementować i dlaczego warto zrobić to własnoręcznie. Dla początkujących również instrukcja instalacji. […]

  3. Ostatnio diety i odchudzanie to bardzo modny temat. Postanowiłem sprawdzić jak to jest "Lekki" SEO i bezpieczny Wordpressz WordPressem. Należy mu się odchudzanie, czy nie? | Serwis4U

    […] Lightbox (ładne wyświetlanie plików jpg). Zamiast niego ręcznie wstawiłem efekt zgodnie z przepisem, a jak to skonfigurować jest […]

  4. Krótkie podsumowanie: luty 2009

    […] 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. […]

  5. Alternatywy dla Lightbox / Lightboks | IT Tech Blog

    […] / zamienników i alternatyw dla popularnego Lightboxa2. Tematem zainteresowałem się po wpisie na wpnija.pl traktującym o dostosowyaniu skryptu tak aby zajmował jak najmniej mniejsca a więc aby jak […]

  6. Dlaczego warto wybrać WordPress?

    […] potrzeb. Gdy jednak najdzie cię ochota na coś nowego (np. integrację z blipem czy efekt lightbox dla zdjęć) możesz doinstalować sobie odpowiednią wtyczkę […]

  7. Krótkie podsumowanie: marzec 2009

    […] 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. […]

  8. Krótkie podsumowanie: kwiecień 2009

    […] 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. […]

  9. Krótkie podsumowanie: maj/czerwiec 2009

    […] 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. […]