top of page

Zabawy z „lightboksem” #2: konfiguracja

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

  1. stwórz polską wersję językową,

  2. podmień animację ładowania pliku,

  3. dodaj tekst „proszę czekać…”,

  4. ustaw skróty klawiszowe,

  5. naucz się dodawać podpisy,

  6. ustaw szybkość animacji,

  7. ustaw kolor i procent wypełnienia ekranu.

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:

  1. tekst "Image x of y" pojawia się w lewym dolnym rogu gdy mamy więcej niż jeden obrazek,

  2. grafikę "CLOSE X" jest widoczna zawsze w prawym dolnym rogu,

  3. grafikę "PREV" pojawia się w lewym górnym rogu gdy istnieje poprzedni obrazek i gdy najedziemy myszką na lewą część aktualnie wyświetlanej grafiki,

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

  1. lightbox-btn-close.gif,

  2. lightbox-btn-next.gif,

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

  1. „p”, który działa jak kliknięcie na odnośnik "PREV" / "POPRZEDNI",

  2. „n”, który działa jak kliknięcie na odnośnik "NEXT" / "NASTĘPNY",

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

  1. keyToPrev:'p' (poprzedni)

  2. keyToNext:'n' (następny)

  3. keyToClose:'c' (zamknij)

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

  1. 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).

#galeria #jquery #lightbox

0 wyświetleń0 komentarzy

Ostatnie posty

Zobacz wszystkie

1.przedstawienie ordynacji wyborczej oraz krótkiego omówienia jej zasad?

Niemcy

Kamienice ulicy Piotrkowskiej w Łodzi, taki temat przybliża mi już od dawna pewne zainteresowania tą ulicą turystów, mieszkańców jak i moje. Zawsze kiedy idę ulicą Piotrkowską spoglądam w górę i prz