publikacja: 3 listopada 2008, autor: , komentarzy 79 https://wpninja.pl/artykuly/zabawy-z-lightboksem-2-konfiguracja/

Zabawy z „lightboksem” #2: konfiguracja

Zabawy z „lightboksem” #2: konfiguracja

poprzedniej części miałeś okazję dowiedzieć się czym jest tzw. „efekt lightbox” i poznać dwa sposoby na jego integrację ze swoim WordPressem. Teraz dowiesz się jak dopieścić jego wizualną stronę w paru prostych krokach.

Dopieszczać, nie dopieszczać?

Możesz zastanawiać się po co w ogóle dalej majstrować przy naszym lighboksie. W końcu działa on tak jak należy. I tutaj masz całkowitą rację – wszystkie opisane poniżej czynności nie są obowiązkowe i równie dobrze możesz je pominąć. Jestem jednak pewien, że Twoja strona czy blog sporo zyska jeśli zdecydujesz się poświęcić kilkanaście minut na wprowadzenie paru modyfikacji:

Stwórz polską wersję językową

Lightbox, który zaimplementowałeś zawiera nieznaczną ilość tekstu i grafiki w języku angielskim:

Elementy, które trzeba przetłumaczyć na polski

Na zamieszczonym powyżej obrazku możesz zauważyć 4 takie elementy:

  • tekst "Image x of y"
    pojawia się w lewym dolnym rogu gdy mamy więcej niż jeden obrazek,
  • grafikę "CLOSE X"
    jest widoczna zawsze w prawym dolnym rogu,
  • grafikę "PREV"
    pojawia się w lewym górnym rogu gdy istnieje poprzedni obrazek i gdy najedziemy myszką na lewą część aktualnie wyświetlanej grafiki,
  • grafikę "NEXT"
    pojawia się w górnym prawym rogu gdy istnieje następny obrazek i gdy najedziemy myszką na lewą część aktualnie wyświetlanej grafiki.

Powinieneś więc wziąć na warsztat plik jquery.lightbox-0.x.min.js i następujący ciąg znaków:

txtImage:'Image',txtOf:'of'

zamienić na:

txtImage:'Obrazek',txtOf:'z'

Tekst załatwiony, teraz czas na grafikę.

W katalogu ze skryptem znajdziesz trzy następujące pliki:

  • lightbox-btn-close.gif,
  • lightbox-btn-next.gif,
  • lightbox-btn-prev.gif.

Jeśli jesteś obcykany w podstawach grafiki to wystarczy teraz abyś odpalił swój ulubiony program i w paru prostych krokach podmienił teksty.

Możesz także skorzystać z mojego zestawu, który przygotowałem ;-):

Mój zestaw przetłumaczonej grafiki

Podmień animację ładowania pliku

Animacja ta przedstawia obracające się kółeczko i jest wyświetlana gdy komputer pobiera w tle grafikę do wyświetlenia (z faktycznym postępem w pobieraniu nie ma ona nic wspólnego ponieważ jest to zwykły animowany gif ale tak na marginesie :-)).

Ajaxload - generator animowanych gifów ala web 2.0 :-)

Przy wyborze nowej animacji możesz posłużyć się stroną Ajaxload. Z sekcji „generator” wybierz animację, resztę opcji pozostaw tak jak jest i kliknij na „generate it” aby zobaczyć poniżej efekt a następnie na „download it” aby pobrać plik na dysk.

Nazwę pobranego pliku zamień na lightbox-ico-loading.gif i podmień z plikiem umieszczonym w katalogu lightboksa na serwerze.

Dodaj tekst „Proszę czekać…”

Dodatkowa informacja tekstowa

Aby dodać dodatkowy tekst tuż pod animowanym gifem powinieneś otworzyć plik jquery.lightbox-0.x.min.js i zaraz za ciągiem znaków:

<a href="#" id="lightbox-loading-link"><img src="'+settings.imageLoading+'"></a>

dodać:

<p>Proszę czekać...</p>

Ustaw skróty klawiszowe

Nasz lightbox wyposażony jest w skróty klawiszowe, które w znaczący sposób ułatwiają nawigację pomiędzy kolejnymi obrazkami. Standardowo są to następujące klawisze:

  • „p”, który działa jak kliknięcie na odnośnik "PREV" / "POPRZEDNI",
  • „n”, który działa jak kliknięcie na odnośnik "NEXT" / "NASTĘPNY",
  • „c”, który działa jak kliknięcie na odnośnik "CLOSE" / "ZAMKNIJ".

Aby zmienić standardowe klawisze powinieneś ponownie otworzyć plik jquery.lightbox-0.x.min.js i odpowiednio zmienić następujące ciągi znaków:

  • keyToPrev:'p' (poprzedni)
  • keyToNext:'n' (następny)
  • keyToClose:'c' (zamknij)

Dla przykładu – aby zmienić klawisz zamykania z „c” na „z” należy trzeci ciąg zamienić na następujący:

  • keyToClose:'z'

Naucz się dodawać podpisy

Podpis wyświetlany jest w lewym dolnym rogu, tuż pod obrazkiem. Aby go ustawić powinieneś w edytorze WYSIWYG kliknąć na obrazek a następnie na ikonkę wstaw/edytuj link. W okienku, które się pojawi uzupełnij pole tytuł a całość zatwierdź przyciskiem aktualizuj.

Czyli jak wstawić podpis do obrazka :-)

Ustaw szybkość animacji

Aby ustawić szybkość animacji lighboksa (dostosowywanie boksa do rozmiarów zdjęcia) powinieneś odnaleźć w pliku jquery.lightbox-0.x.min.js ciąg znaków:

containerResizeSpeed:400

400 oznacza czas z milisekundach (0,4 sekundy). Zmniejszając wartość przyspieszysz animację a zwiększając spowolnisz :-).

Ustaw kolor i wartość wypełnienia ekranu

Gdy lightbox jest uruchamiany ekran zostaje przyciemniony do pewnej wartości. W pliku jquery.lightbox-0.x.min.js znajdziemy dwie wartości:

overlayBgColor:'#000'

#000 określa kolor wygaszenia ekranu. Zapisany jest on w postaci heksadecymalnej.

overlayOpacity:0.8

0.8 określa stopień wypełnienia tła ustawionym wcześniej kolorem (0 – brak wypełnienia, 1 – całkowite wypełnienie, wartości pomiędzy – efekt przenikania).

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. Alternatywy dla Lightbox / Lightboks | IT Tech Blog

    […] dla popularnego Lightboxa2. Tematem zainteresowałem się po wpisie na wpnija.pl traktującym o dostosowywaniu skryptu tak aby zajmował jak najmniej miejsca a więc aby jak najmniej opóźniał ładowanie […]