Stylowanie Lightboxa

Programiści JS znają na pewno framework prototype.js oraz bibliotekę scriptaculous.js, która udostępnia wiele efektów graficznych. Popularne w ostatnich miesiącach otwieranie wszystkiego w overlay’owych okienkach prowadzi jednak wielokrotnie do przerostu formy nad treścią. Nie wystarczy tylko ściągnąć skrypt z sieci. Prezentowane elementy często wyświetlają się w sposób standardowy, który nie jest dla nich odpowiedni. Możemy to zmienić przy niewielkim wysiłku, a uzyskany efekt na pewno zadowoli naszych klientów i użytkowników. Jednym z pierwszych skryptów działających w ten sposób był lightbox napisany przez Lokesha Dhakara.

Lightbox 2.02

Do uruchomienia lightboxa potrzebujemy wspomnianych już plików prototype.js oraz scriptaculous.js oraz dwóch innych. Plik lightbox.js jest właściwym kodem naszego skryptu, a effects.js częścią biblioteki scriptaculous, odpowiedzialną za efekty graficzne. Na stronie autora znajdziemy wszystkie potrzebny pliki, łącznie ze standardowymi stylami CSS i obrazkami nawigacyjnymi. Należy zwrócić uwagę jaką wersję skryptu ściągamy ze strony.

Lightbox może wyświetlać pojedyncze obrazki lub pewien zbiór obrazków znajdujących się na stronie. Sposób jego uruchomienia jest bardzo prosty i szczegółowo wyjaśniony na stronie projektu, dlatego skupimy się tylko na zmianie sposobu prezentacji oraz ważnych szczegółach technicznych. Domyślnie zdjęcia są prezentowane z białą ramką szerokości 10 pikseli wyświetloną na czarnym tle z 40% przezroczystością.

Aby to zmienić musimy dokonać edycji pliku lightbox.css. Znajdujemy deklaracje dla naszego tła i zmieniamy co trzeba. W moim pliku definicja dla warstwy #overlay była następująca.

#overlay {
	...
	background-color: #000;
	filter:alpha(opacity=60);
	-moz-opacity: .6;
	opacity: .6;
}

Linijka background-color: #000; odpowiada za kolor tła w czasie prezentacji obrazów. W naszym przypadku jest to kolor czarny. Kolejne 3 linijki definiują nieprzeźroczystość dla Internet Explorera, starszych wersji przeglądarek rodziny Mozilla oraz wszystkich przeglądarek obsługujących poprawnie nieprzeźroczystość rekomendowana przez W3C. Różnica pomiędzy nieprzezroczystością a przezroczystością jest prosta. Jeżeli mamy 20% nieprzezroczystości (opacity) to jej odpowiednikiem jest dokładnie 80% przezroczystości (transparency). Dla niewtajemniczonych, trochę prościej. Jeśli ustawimy dla naszego obrazka opacity: .1; to będzie on praktycznie niewidoczny. W odwrotnej sytuacji, czyli dla wysokiej wartości opacity: .9; nasz obrazek jedynie lekko rozjaśniony. Wartość opacity może być podana bez zera przed przecinkiem, bo jest to skrótowy zapis zgodny z CSS.

Ostrzegam, że zmiana tych parametrów może nie przynieść oczekiwanego skutku z powodu ustawień przezroczystości w innym miejscu. Mianowicie w pliku lightbox.js może, ale nie musi występować poniższa linijka.

var overlayOpacity = 0.9;	// controls transparency of shadow overlay

Osobiście kiedy używałem lightboxa 2.0 to wykasowałem definicje nieprzezroczystości z warstwy #overlay, ustawiając w stylach jedynie tło. Przezroczystość zmieniałem w pliku lightbox.js.

Bardzo ważnym elementem w lightboxie jest ramka wokół obrazka, której szerokość możemy bardzo szybko zmienić. Wystarczy tylko znaleźć odpowiedni fragment w pliku lightbox.js.

var borderSize = 2;

Rozmiar oczywiście jest w pikselach. Jeżeli zmieniamy szerokość ramki to w stylach musimy również dokonać jednej zmiany, tym razem jednak dopełnienia obrazka.

#imageContainer {
	padding: 2px;
}

Chcemy mieć węższą ramkę to zmieniamy obydwie wartości. W naszym przypadku będzie to 2px. Jeżeli chcemy zmienić kolor ramki, która wcale nie jest ramką, a całą warstwą, na której wyświetlamy nasz obrazek musimy znaleźć następujący kod:

#outerImageContainer {
	position: relative;
	background-color: #AAA;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}

Jego zmiana spowoduje zmianę koloru warstwy, na której wyświetlany jest obrazek. Nasza warstwa będzie miała kolor #AAA. Teoretycznie możemy dopisać border: 2px solid #FFF;, ale nie wiem czy jest komukolwiek potrzebne.

Dalszym etapem naszej stylizacji lightboxa będzie pasek rozwijany poniżej samego obrazka. Znajdują się na nim informacje zawarte w atrybucie title naszego linka oraz przycisk Close.

#imageDataContainer {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: transparent;
	margin: 0 auto;
	line-height: 1.4em;
}

Kolor tego paska możemy ustawić dowolnie, w zależności od potrzeby. Jednak w naszym przypadku potrzebujemy, aby pasek był przezroczysty. Przezroczysty pasek może uniemożliwiać odczytanie tekstu. Również obrazek closelabel.gif, który standardowo nie posiada przezroczystości może zaburzać oczekiwany efekt.

Najlepszym rozwiązaniem tej sytuacji jest przygotowanie obrazków z przezroczystym tłem oraz w polskiej wersji językowej, jeśli tylko potrzebujemy. Obrazki loading.gif oraz closelabel.gif znajdują się w katalogu images/, a ścieżki do plików w lightbox.js.

var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";

Mamy do wyboru albo nadpisać te pliki albo zmienić ścieżki w kodzie skryptu. Wygodniejsze jest zmienienie ścieżek, bo zawsze zostaną nam standardowe pliki, na wszelki wypadek.

Ostatnim elementem jest opis zdjęcia wyświetlany na pasku. Musimy zmienić jego kolor na jaśniejszy, aby możliwe było jego odczytanie na ciemnym tle.

#imageData #caption {
	font-weight: bold;
	color: #FFF;
}

Do pełni szczęścia brakuje nam jeszcze obrazków prevlabel.gif i nextlabel.gif, które potrzebne są do nawigacji w momencie oglądania kilku obrazków. Ich wykonanie nie powinno być trudne, a ścieżki do tych plików zapisane są w stylach lightbox.css. Powinniśmy jeszcze odsunąć nasze obrazki od brzegu o tyle pikseli, ile ma nasza ramka.

#prevLink {
	left: 2px;
	float: left;
}

#nextLink {
	right: 2px;
	float: right;
}

W przypadku oglądania kilku zdjęć poniżej opisu pojawia się, także tekst mówiący nam o numerze zdjęcia. Zmiany tego tekstu możemy dokonać w pliku lightbox.js.

// if image is part of set display 'Image x of x'

if(imageArray.length > 1){
	Element.show('numberDisplay');
	Element.setInnerHTML( 'numberDisplay', "Zdjęcie " + eval(activeImage + 1) + " z " + imageArray.length);
}

Kolor tekstu siedzi w stylach lightbox.js.

#imageData #numberDisplay {
	display: block;
	clear: left;
	color: #FFF;
	padding-bottom: 1.0em;
}

Podsumowanie

Jak widać na załączonych obrazkach zmiany w wyglądzie lightboxa mogą być spore, a ich wykonanie wcale nie musi być trudne. Wszystko zależy od naszych potrzeb i chęci. Zmiany przedstawione w artykule dotykają tylko czubka góry lodowej, bo taka stylizacja jest praktycznie nieograniczona. Ważne jest, aby dokładnie zaplanować, co chcemy zmienić i do tego dążyć.