Lytebox – część 2

[toc=”2,3,4″ title=”Zawartość”]
Lytebox można dopasować do własnych potrzeb. Wymaga to odrobiny zabawy z plikiem js oraz css.

1. Tłumaczenie lytebox

Treści pokazywane przez lytebox zapisane są w kilku miejscach. Elementy nawigacyjne (guzik następny, poprzedni oraz zamknij) zapisane są jako obrazki. Natomiast opis pod zdjęciem (np. „Image 1 of 10”) generowany jest przez javascript. Najłatwiej będzie zmienić grafikę. W katalogu images podmieniamy obrazki: close_grey.png, prev_grey.png, next_grey.png, play_grey.png, pause_grey.png. O ile prev i next są już gotowe, to pozostałe obrazki wymagają jeszcze drobnych korekt w pliku lytebox.css. Otwieramy plik lytebox.css do edycji, znajdujemy:

#lbClose
#lbPlay
#lbPause

i przy każdym zmieniamy width (domyślnie 64px) oraz ewentualnie height.

Na koniec w pliku lytebox.js odnajdujemy linie zawierające tekst

object.innerHTML

i podmieniamy słowa mieszczące się między cudzysłowami (dla wersji 3.22 będą to linie: 473, 477 oraz 481).

Zamiast zmieniać grey można zmienić inny layout lyteboxa lub dodać własny. Przy własnym należy skopiować wszystkie definicje w css oraz w lytebox.js zmienić linię

this.theme = 'grey';

2. Zmiana koloru tła

Tło w lytebox jest wypadkową dwóch elementów. Pierwszym jest kolor powiązany z wybranym layoutem. Kolor ten zapisany jest w layout.css w definicji na samym początku pliku

#lbOverlay.grey { background-color: #000000; }

Drugim elementem decydującym o kolorze jest zapis w pliku lytebox.js

this.maxOpacity = 80;

(0 – lytebox całkowicie przezroczysty, 100 – lytebox zasłania kompletnie stronę)

3. Położenie lytebox.css

Plik lytebox.css najlepiej umieścić w osobnym katalogu, np. /lytebox/. Do tego katalogu wrzucamy /images/ (/lytebox/images/). Dzięki takiemu rozwiązaniu obrazki związane z lyteboxem nie będą się mieszać z pozostałymi i w razie potrzeby bez problemu będzie można wyrzucić ten dodatek. Przy takim wyborze lytebox na stronie będzie osadzony następująco:

<script src="lytebox/lytebox.js" type="text/javascript"><!--mce:0--></script>

4. Zmiana rozmiaru obrazka

Lytebox zmienia wielkość obrazków dopasowując je do wielkości okna. Jeśli potrzebna jest domyślna wielkość dużej fotki, to szukamy w pliku lytebox.js linijki:

this.autoResize            = true;

i zmieniamy true na false:

this.autoResize            = false;

5. Problemy w IE – brak guzika zamykania, brak tła

Odpowiedź na pierwszy problem: http://guildlaunch.blogspot.com/2009/05/making-lytebox-work-in-ie8-close.html, na drugi: http://nederveld.wordpress.com/2009/07/02/lytebox-and-internet-explorer-8/

W przypadku guzików problemem jest to, że IE8 nie potrafi przypisać odpowiedniego stylu do guzika (także do guzików sterujących animacją). Rozwiązaniem jest wpisanie na sztywno do definicji:

#lbClose
#lbPlay
#lbPause

ścieżki do odpowiedniego tła.

Na brak tła poradzi dodatkowy kod:

function checkVersion() {
 if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
 var ieversion = new Number(RegExp.$1)
 if (ieversion >= 8 )
 return false;
 else if (ieversion < 8 )
 return true;
 }
 return false;
 }

Należy wstawić go na samym początku lytebox.js. Wywołanie tej funkcji umieszczamy w linii z tekstem (około linii 92):

this .ie = (document.all && !window.opera) ? true : false;

(zastępując true). Uzyskujemy w ten sposób:

this .ie = (document.all && !window.opera) ? checkVersion() : false;

6. Ramka w iframe

Jeśli ramka w Iframe nie jest do niczego potrzebna, to w pliku css (np. w lytebox.css) wystarczy dodać:

#lbIframe { border: 0 ; }

• Tweet
• Pin It