Podstawowe składniki takich platform to serwer Apache, baza danych MySQL oraz interpreter PHP, które przydają się podczas programowania i testowania aplikacji internetowych na lokalnym komputerze. Poszczególne elementy powstały niezależnie, ale razem tworzą znakomity zestaw, którego koszt jest niski w porównaniu z komercyjnymi rozwiązaniami.

Istnieje jeszcze kilka zalet takiego rozwiązania. Serwer lokalny jest darmowy, możliwa jest zmiana jego ustawień i działa nawet przy braku połączenia z internetem. Konta hostingowe często są płatne, ale nie zawsze. Tak samo jest z ustawieniami, które ze względów bezpieczeństwa często są niedostępne dla użytkowników. Ostatnim minusem jest połączenie z internetem, niezbędne dla dostępu do strony.

LAMP

W przypadku GNU/Linux sprawa jest bardzo prosta, ponieważ wymienione komponenty są dostępne dla większości dystrybucji. Mimo, tego zawsze możliwe jest ściągnięcie aktualnej wersji z internetu lub repozytorium. Najpewniej będą to poniższe polecenia.

sudo apt-get install apache2

sudo apt-get install php5

sudo apt-get install mysql

WAMP

W przypadku Windowsa istnieją paczki, które po instalacji pozwalają na korzystanie ze wszystkich elementów. Cały proces sprowadza się często do wyboru miejsca instalacji oprogramowania. Większość elementów zostanie od razu poprawnie skonfugurowana.

Krasnal Serv

Krasnal Serv to darmowe oprogramowanie, które umożliwia uruchomienie własnego serwera typu WAMP. Możliwe jest uruchomienie serwera WWW bez potrzeby konfigurowania Apache’a i innych elementów w systemie Microsoft Windows. Najnowsza wersja (2.7) pozwala na przełączanie się w locie między PHP4 i PHP5. Serwer działa niestabilnie w przypadku systemów Windows 9.x/ME.

Skład serwera w wersji 2.7 stanowi:

• Apache 1.3.31
• PHP 4.3.9 + SQLite
• PHP 5.0.2
• MySQL 3.23.58
• ActivePerl 5.6.1.628
• phpMyAdmin 2.6.2 pl2
• Zend Optimizer 2.0.3
• CesarFTP 0.99g
• Webalizer 2.1
• Free SMTP Server
• SQLiteManager 1.0.1

VertrigoServ

VertrigoServ to serwer, którego używałem przez długi czas. Poprzednio stosowałem KrasnalServ, który jednak zbyt wolno się rozwija, jeśli w ogóle. Składniki tego serwera są o wiele aktualniejsze.

Serwer w wersji 2.21 zawiera:

• Apache 2.0.63
• PHP 5.2.6
• MySQL 5.0.51b
• SQLite 3.5.9
• Smarty 2.6.19
• PhpMyAdmin 2.11.7
• ZendOptimizer 3.3.3
• SQLiteManager 1.2.0

WampServer

WampServer 2 to darmowy pakiet typu WAMP. Umożliwia instalację, uruchamianie oraz obsługę w systemie MS Windows serwera WWW opartego na serwerze Apache, interpretera skryptów PHP oraz serwera baz danych MySQL.

WampServer 2 nazywany wcześniej WAMP5 jest platformą opartą na licencji GPL. Jej głównym twórcą jest Francuz Romain Bourdon, którego wspiera społeczność portalu phpteam.net.

WampServer w wersji 2.0 zawiera:

• Apache 2.2.11
• PHP 5.3.0
• MySQL 5.1.36
• PhpMyAdmin 3.2.01

XAMPP

XAMPP jest darmowym wieloplatformowym pakietem opartym na licencji GNU General Public License. Składa się głównie z serwera Apache, bazy danych MySQL i interpreterów dla skryptów napisanych w PHP i Perlu. XAMPP działa między innymi na systemach MS Windows, Linux, Solaris i MacOS X.

Podsumowanie

Większość platform WAMP zawiera dodatkowe oprogramowanie przydatne podczas tworzenia i testowania aplikacji internetowych. Sam proces instalacji takiego oprogramowania jest łatwy. Pewne trudności zdarzają się przy konfiguracji niestandardowych opcji. Poza tym jest to idealne rozwiązanie na początku przygody z tworzeniem aplikacji internetowych.

Często spotykany PhpMyAdmin jest stosowany do zarządzania bazami danych. Nierzadko udostępniane są inne silniki baz danych, np. SQLite. Warto włączyć niektóre przydatne moduły serwera Apache, które domyślnie bywają wyłączone, jak choćby mod_rewrite, czy mod_userdir.

W ciągu 14 dni twórcy biblioteki opowiadali o zmianach jakie wprowadzili do nowej wersji. Szczególnie interesujący był podcast, w którym John Resig przedstawił zmiany w rdzeniu biblioteki. Zmniejszenie rozmiaru, wzrost wydajności i większa zgodność z przeglądarkami.

Fabryka abstrakcyjna

Plusem wykorzystania wzorca fabryki abstrakcyjnej jest możliwość ukrycia szczegółów implementacyjnych klas reprezentujących dany produkt. W ten sposób klient widzi tylko interfejs. Ukryte zostają również nazwy klas, co odizolowuje klienta od problemu określenia, do której klasy należy obiekt.

<?php
interface IUser {
	function getName();
}

class User implements IUser {
	public function __construct($id) { }

	public function getName() {
		return 'Jacek';
	}
}

class UserFactory {
	public static function create($id) {
		return new User($id);
	}
}
?>

Klasa User zaprezentowana powyżej implementuje interfejs IUser, który zawiera metodę getName(). Tworzenie nowego obiektu użytkownika odbywa się poprzez statyczną metodę create(). Szczegóły tworzenia użytkowników ukryte są w klasie User fabryki.

Podsumowanie

Istnieje prosta metoda sprawdzenia czy klasa działa poprawnie.

<?php
$oUser = UserFactory::create(1);
echo($oUser->getName());
?>

Poniższy wydruk pokazuje, że dokładnie tak się dzieje.

Jacek

Wzorzec projektowy fabryki abstrakcyjnej kładzie nacisk na tworzenie produktów z konkretnej rodziny.

Częsta sytuacja, z jaką spotykają się programiści to współdzielenie zasobów. Wszystkie zapytania do bazy danych wymagają połączenia. Taki uchwyt może być wykorzystany wielokrotnie przez różne zapytania przy tym samym żądaniu. Otwieranie i zamykanie połączeń jest najzwyczajniej, mało ekonomiczne.

Singleton

Istnieje proste rozwiązanie tego problemu. Singleton to wzorzec projektowy, który zwraca istniejącą instancję obiektu. Jeśli taka instancja nie istnieje wówczas jest tworzona. Idea rozwiązania jest bardzo prosta i idealnie pasuje do naszego problemu. Poniżej znajduje się kod klasy DB, która dziedziczy z klasy Singleton i tworzy takie połączenie do bazy.

Prawidłowa struktura klas, co zasugerował Wasacz w komentarzach, wymaga dziedziczenia klasy DB po ogólnej klasie wzorca Singleton. Niestety nie mam pomysłu zogranizowanie klasy wzorca poza pustymi metodami i jedną zmienną.

<?php
abstract class Singleton {
	protected static $_instance;

	protected function __construct() { }

	public static function instance() { }
}

class DB extends Singleton {
	private $_conn;

	private function __construct($conf) {
		$this->_conn = mysql_connect($conf['host'], $conf['user'], $conf['pass']) or die($this->error());
	}

	public static function instance($conf=null) {
		if (is_null(self::$_instance)) {
			self::$_instance = new DB($conf);
		}
		return self::$_instance;
	}
}
?>

Klasa DB zaprezentowana powyżej nie jest skomplikowana. Zawiera jednak tylko niezbędne metody, prezentujące działanie klasy. Niemożliwe jest stworzenie egzemplarza klasy DB, ponieważ konstruktor jest prywatny. Dostęp do obiektu możliwy jest poprzez publiczną, statyczną metodę instance().

Podsumowanie

Istnieje prosta metoda sprawdzenia czy klasa działa poprawnie. Próba pobrania obiektu klasy DB powinna zwrócić ten sam zasób.

<?php
print_r(DB::instance());
print_r(DB::instance());
?>

Poniższy wydruk pokazuje, że dokładnie tak się dzieje.

DB Object
(
    [_conn:private] => Resource id #11
)
DB Object
(
    [_conn:private] => Resource id #11
)

Wzorzec projektowy Singleton stosuje się bez względu na stopień skomplikowania aplikacji. Rozwiązanie to jest wygodniejsze i elastyczniejsze niż przechowywanie uchwytu do bazy danych w zmiennej globalnej.

Przykłady stylizacji tabel zostały w 2006 roku zebrane przez niezawodny Smashing Magazine. Czas w sieci upływa bardzo szybko, wiele z tych przykładów, jeśli nie wszystkie to przykłady przestarzałe. Jednak ten sam Smashing Magazine w nowszym artykule prezentuje naprawdę atrakcyjne przykłady. Niestety wygląd to nie wszystko.

Problem

Wielokrotnie zdarza się, że za ciekawym wyglądem tabeli kryje się nadmierna liczba klas, które dotyczą poszczególnych elementów. Podstawowa struktura tabeli składa się z trzech znaczników <table>, <tr> oraz <td>, które tworzą odpowiedni element tabeli, wiersze i poszczególne komórki.

Taka struktura nie pozwala na zbyt wiele, ponieważ odniesienie się do elementów poprzez selektory kontekstu jest wręcz niemożliwa. Jedyne dostępne rozwiązanie to wykorzystanie atrybutów <class> i selektorów klas.

Kolorowanie wierszy i kolumn wymaga użycia atrybutu <class> dla każdej komórki. Kolorowanie samych wierszy uzyskamy poprzez atrybuty<class> dla poszczególnych znaczników <tr>. Poniższe style określają kolor tła dla nieparzystego i parzystego wiersza oraz nieparzystej i parzystej kolumny.

.odd-row {
	background: #eee;
}
.even-row {
	background: #ccc;
}
.odd-column {
	background: #fcc;
}
.even-column {
	background: #f44;
}

Zamierzony efekt zostanie osiągnięty, ale kod naszej tabeli stanie się mniej czytelny, zarówno dla wyszukiwarek, jak i dla ludzie. Istnieje dobra alternatywa dla powyższego rozwiązania.

Rozwiązanie pośrednie

Konieczne zmiany dotyczą kodu tabeli. Struktura tabeli udostępnia elementy grupujące wiersze oraz kolumny. Znaczniki <thead>, <tbody> oraz <tfoot> grupują odpowiednio wiersze nagłówka, danych i stopki.

Analogiczne przeznaczenie ma znacznik <colgroup>, który obejmuje poszczególne kolumny tabeli, zdefiniowane przez znaczniki <col>.

Ważne jest zrozumienie kolejności wyświetlania warstw, które tworzą strukturę tabeli. Szczegółowy artykuł na ten temat napisał Roger Johansson.

Zmodyfikowana struktura pozwala na użycie analogicznych stylów w arkuszu, jednak zamiast selektorów klasy korzystamy z selektorów kontekstu.

Nowoczesne podejście

Selektory potomka oferowane przez CSS3 umożliwiają jeszcze dokładniejsze odwołanie się do elementów w strukturze dokumentu. Niestety Internet Explorer nie obsługuje selektora potomka, co jest sporym mankamentem tego rozwiązania.

col:nth-child(odd) {
	background: #faa;
}
col:nth-child(even) {
	background: #f44;
}
tbody tr:nth-child(odd) {
	background: transparent url(img/grey-10-transparent.png) 0 0 repeat;
}
tbody tr:nth-child(even) {
	background: transparent url(img/grey-50-transparent.png) 0 0 repeat;
}

Właściwe dobranie kolorów tła oraz obrazów pozwala na uzyskanie właściwego kolorowania wierszy i kolumn. Wygląd tabeli jest dokładnie taki, jak oczekiwaliśmy. Dodatkowa zaleta tego podejścia to struktura tabeli wolna od zbędnych atrybutów <class>.

Podsumowanie

Przedstawione przykłady różnią się sposobem w jaki uzyskano efekt końcowy. Czytelniejsza struktura i lżejszy kod to wielka zaleta. Podobnych rozwiązań istnieje wiele, jednak nie stosuje się ich powszechnie z powodu braku wsparcia po stronie Internet Explorera.

“CSS według Erica Meyera. Kolejna odsłona” to kontynuacja pierwszej książki Erica Meyera na temat wykorzystania technologii CSS. Autor opisał w niej podstawowe właściwości stylów, jak również sposób ich użycia w kodzie strony. Ważne jest, aby konstruować semantyczną strukturę dokumentu, ponieważ nawet z wyłączoną obsługą CSS nasza strona będzie wyglądać przyzwoicie. Jeżeli zaś użyjemy stylów to mamy pełen dostęp do warstwy prezentacyjnej.

Przykłady przedstawione w książce to dalszym ciągu użyteczne i często spotykane elementy. Mimo dokładnie opisanych czynności i sposobu postępowania, swobodnie możemy zmodyfikować podany CSS, aby dostosować go do własnych potrzeb. Jeżeli chcemy uczynić nasze aplikacje internetowe lepszymi to pierwszą rzeczą jest zastosowanie arkuszy stylów. Nawet korzystanie z CSS 2.1 daje programiści wszelkie środki, aby semantycznie tworzyć strony WWW. Używanie tabel do budowania layoutu, stosowanie obrazków imitujących odstępy to przestarzałe techniki. Nowoczesne aplikacje webowe muszą korzystać z właściwych technologii, a jedną z nich jest właśnie CSS.

Książka bardzo dobrze sprawdzi się jako podręcznik nauki CSS. Osoby, które chcą zrozumieć zasady działania CSS, powinny uczyć się od najlepszych. Eric Meyer jest uznanym autorytetem w branży, ponieważ sam jest współtwórcą tej technologii. Potrafi bardzo jasno przedstawić wszystkie zawiłości związane z CSS, jak również pokazać sposób rozwiązania napotykanych problemów.

OCENA OSTATECZNA: 4/5

OSTATECZNA OCENA: 4/5

• Autor: Eric A. Meyer
• Tytuł oryginału: More Eric Meyer on CSS
• Tłumaczenie: Wojciech Moch
• ISBN: 83-7361-901-1
• Format: 205×253, 272 stron
• Data wydania: 07/2005 (Helion)

Narzędzie to wymaga od użytkownika wiedzy na temat XHTML i CSS, a zatem nie jest przeznaczone dla początkujących koderów. Jednak programiści Drawtera zapowiadają stworzenie wersji Amateur dla laików standardów sieciowych.

Wśród typów obrazka rozpoznamy ten, który ma YouTube, nowy LightBox albo chociaż Lightwindow. Ten wpis jest prawdziwym dopełnieniem artykułu na temat stylowania lightboxa. Po zmianie kolorystki skryptu, możemy spokojnie dostosować do własnych potrzeb również obrazek ładowania.

“CSS. Gotowe rozwiązania” to książka, która na początku zainteresowała mnie spisem treści. Dziesięć projektów z kodem XHTML i CSS, rozwiązujących jedne z częstszych problemów jakie spotykają programiści stron internetowych potrafi zachęcić. Jednak zawartość merytoryczna książki nie wygląda już tak krystalicznie. Autor proponuje zastąpienie sztuczek starej szkoły, rozdzielenie warstw kodu i prezentacji, ale sam niestety popełnia niewybaczalne błędy.

Początkujący programiści zapewne nie dostrzegą większych błędów w książce, ponieważ nie traktuje ona niczym zaawansowanym. Poza tym początkujący programiści dopiero zdobywają wiedzę i doświadczenie, więc powinni korzystać z poprawnie napisanych źródeł. Kod XHTML jest błędnie skonstruowany, a tym samym w konsekwencji arkusze stylów kaskadowych zawierają nieodpowiednie deklaracje. Nagminne opakowywanie wszystkich elementów przed <div> prowadzi do tworzenia gigantycznej struktury znaczników. Używanie znaczników niezgodnie z ich semantycznym przeznaczeniem, jak również długości nazw klas i identyfikatorów budzą spore zastrzeżenia.

Jednak największym błędem jest stosowanie JS do ominięcia błędów przeglądarek. Moim zdaniem są dużo lepsze sposoby, aby zmusić IE do prawidłowego wyświetlania. Nie chodzi tu bynajmniej o możliwość wyłączenia JS przez użytkownika, bo to robi kilka procent populacji sieciowej, ale najzwyczajniej o to, że JS służy zupełnie do czegoś innego.

Książka miała za zadanie przedstawić sposoby radzenia sobie z problemami aplikacji internetowych, jednak moim zdaniem nie znajdziemy tam zbyt wielu wartościowych informacji. Zaproponowane rozwiązania czasami dają skutek odwrotny od zamierzonego. Przykładowe formatowanie formularzy jest przykładem ingerencji kodera w obszar, którego nigdy nie powinien zmieniać. Stosowanie tabel do tworzenia konstrukcji layoutu, jak również korzystanie z <iframe> jest w dzisiejszych czasach niewybaczalne. Niestety autor nie do końca zna obowiązujące dzisiaj standardy sieciowe. Pewnie z tego, także powodu stosuje najmniej restrykcyjny XHTML 1.0 Transitional.

Zdecydowanie nie polecam tej książki nikomu. Początkujący koderzy nauczą się złych praktyk, związanych z kodem XHTML i arkuszami CSS. Zaawansowanie programiści nie znajdą w tej książce nic wartościowego. Książka mogłaby być o wiele lepsza, ale z powodu ciągłego zainteresowania tworzeniem aplikacji webowych, nadal na rynku wydawane są książki, które nie warto nawet otwierać. Niestety branża WWW nie zmieni się na lepsze, jeśli programiści nie zaczną właściwie stosować standardów sieciowych, a nie zaczną, kiedy będą mogli znaleźć książkę taką jak “CSS. Gotowe rozwiązania”.

OSTATECZNA OCENA: 2/5

• Autor: Richard York
• Tytuł oryginału: CSS Instant Results
• Tłumaczenie: Łukasz Piwko
• ISBN: 83-246-0574-6
• Format: B5, stron 392
• Data wydania: 11/2006 (Helion)

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. Poniżej przedstawiony jest przykładowy obrazek z białą ramką szerokości 10 pikseli wyświetlony 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;

}

Jeżeli dokonaliśmy wszystkich zmian poprawnie to powinniśmy otrzymać efekt podobny do widocznego na zdjęciu poniżej.

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ć.