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