Początek historii

Pierwotny skrypt Lightbox nie używa efektów żadnej biblioteki JS do prezentacji. Prosty pomysł, troszkę kodu JavaScript i kilka plików graficznych. Wszystko to wystarczyło do uzyskania nowatorskiego na tamte czasy efektu. Skrypt pozwalał na oglądanie plików graficznych.

Niedługo potem powstała druga wersja skryptu. Lightbox 2
używa znanej biblioteki prototype oraz efektów scriptaculous. Wprowadzone zmiany to możliwość przechodzenia między oglądanymi zdjęciami, płynna animacja podczas prezentacji obrazów i wiele opcji konfiguracyjnych. Minusem tego rozwiązania była waga używanych technologii. Obydwie biblioteki nie były lekkie, co zostało poprawione w następcach tego projektu.

Alternatywne skrypty

Fancybox to skrypt, który korzysta z biblioteki jQuery, lekkiego frameworka dla JavaScript. Skrypt pozwala na otwieranie obrazów, elementów HTML, ale także animacji flash, ramek czy żądań AJAX. Ustawienia wyglądu łatwo modyfikuje się poprzez arkusze stylów, ale to nie powinno nikogo szokować. Ciekawym pomysłem jest obsługa rolki w myszce czy suwaka na trackpadzie, a także strzałek na klawiaturze. Bardzo użyteczne skróty.

ThickBox w wersji 3.1 nie jest wprawdzie rozwijany, ale ciągle pozostaje dostępny w sieci. Skrypt łączył swoje działanie z biblioteką jQuery. Podobnie jak inne rozwiązania oferuje otwieranie obrazów, treści liniowych, ramek i żądań poprzez AJAX.

Z kolei Multibox korzysta z konkurencyjnej biblioteki MooTools. Skrypt wspiera otwieranie elementów flash, materiałów wideo oraz treści HTML,

GreyBox to jedyny znany mi skrypt, który nie potrzebuje zewnętrznego frameworka JS. Ogromna zaleta tego rozwiązania to końcowa wielkość. Popularne wyskakujące okienko, które nie ssie waży całe 22 kB. GreyBox otwiera zdjęcia oraz inne treści, w tym strony internetowe.

Nick Stakenburg napisał skrypt Lightview, który korzysta z wspomnianych wcześniej bibliotek prototype i scriptaculous. Istotnie należy przyznać, że możliwości tego rozwiązania są imponujące. Otwieranie wielu typów mediów, szerokie możliwości stylizacji elementów wizualnych, automatyzacja kolejnych działań to główne cechy tego skryptu. Lightview wykorzystuje różne techniki optymalizacji, w tym wcześniejsze ładowanie obrazów. Poza wymienionymi cechami skrypt obsługuje wiele przycisków klawiatury.

Lightwindow to kolejny skrypt wykorzystujący biblioteki prototype i scriptaculous. Główne cechy otwieranie wielu rodzajów mediów i treści, wiele możliwości opisu wyświetlanych elementów, a także duża elastyczność przy zmianach obrazów, w tym automatyczne dostosowywanie rozmiaru. Lightwindow wykrywa typ prezentowanej treści oraz pozwala na wysyłanie formularzy.

ColorBox to lekki plugin dla jQuery, który oferuje wiele możliwości, poczynając od otwierania obrazów, pokazów slajdów, a kończąc na treściach ramek czy żądań Ajax. Sam skrypt jest lekki, wygląd prezentowanego efektu modyfikują style kaskadowe, a zmiany ustawień domyślnych można wykonać bez ingerencji w kod bazowy skryptu. Wywołania skryptu można łączyć z kodem jQuery, a całość kodu XHTML jest zgodna ze standardami sieciowymi.

Inny plugin dla jQuery to NyroModal, który podobnie jak wiele innych klonów Lighboxa otwiera różne media. Dodatkowo zawsze zapewnia otwieranie treści wewnątrz okna przeglądarki, obsługę błędów, modyfikowaną animację i widok.

Istnieje wiele innych skryptów, które nie zostały w tym artykule szerzej opisane, jak Shadowbox, Facebox, piroBox, GreyBox Redux, prettyPhoto i pewnie kilkanaście innych.

Podsumowanie

Opisane i wymienione skrypty to tylko część przykładów jakie znajdziemy w sieci. Powstało wiele podobnych rozwiązań, które mniej lub bardziej różnią się od siebie. Jedne otwierają pojedyncze zdjęcia, drugie całe galerie. Część pozwala na uruchamianie pokazów slajdów, a inne na odtwarzanie materiałów wideo i flash.

Każdy przypadek użycia skryptu na stronie czy aplikacji jest inny. Czasami potrzeba prostego efektu, który nie wymaga konieczności dołączania ciężkich bibliotek JS, czy efektów, pokroju scriptaculous. Jeśli z kolei strona używa frameworka dla innych funkcjonalności to lepsze będzie znalezienie skryptu o większym możliwościach, który potrzebuje do działania danej biblioteki.

Wsparcie nowoczesnych przeglądarek dla standardów sieciowych jest coraz lepsze, a udział przestarzałych w rynku nieustannie maleje. Dzięki temu możemy być pewni, że kolejne skrypty i rozwiązania będą coraz lepsze i efektowniejsze.

Podstawowym problemem edytorów WYSIWYG jest generowanie niepoprawnego kodu. Wina stoi nie tylko po stronie parsowania tekstu przez skrypt, ale także oczekiwaniach użytkownika, co do samego formatowania tekstu. Zalety edytorów WYSIWYM to generowanie semantycznego kodu, który nie zawiera formatowania wewnątrz znaczników tekstu. Wygląd takiego tekstu zależy od zewnętrznych arkuszy stylów.

Edytor wmd to doskonała alternatywa dla TinyMCE, popularnego edytora WYSIWYG. Wprawdzie nie korzystałem z ostatnich wersji tego edytora od kilku lat, ale na potrzeby ostatnich projektów stosuję właśnie wmd. Markdown nie jest trudnym formatem i do podstawowych zastosowań zupełnie wystarcza.

Tworzenie aplikacji internetowych to skomplikowany, czasochłonny i nie zawsze opłacalny proces.

Dlaczego wielu programistów pisze własne aplikacje, frameworki, biblioteki i inne rozwiązania?

Po prostu wychodzą z przekonania, że sami zrobią to lepiej. Czasami zdarza się, że dzięki temu podejściu rodzą się prawdziwe perełki. Często wielkie molochy tracą klientów, użytkownicy znajdują produkty skrojone na miarę ich potrzeb i każdy może być zadowolony.

Pozostałe przypadki to zmarnowany potencjał, czas i zasoby, bo projekt umiera, zanim rozpoczął żywot. Dopóki nie rozpoczniesz tworzenia nowej jakości nie będziesz, miał pewności co do swojej wartości.

Właściwy wpis

Często zastanawia mnie kształt moich wypowiedzi formułowanych w stanie, jak najbardziej trzeźwym. Jestem przecież człowiek technicznych, któremu nie obce powinno być prasowanie, ale już bogaty język podczas wszelkich wypowiedzi, co najmniej zadziwia.

Człowiek uczy się przez lata, choć nie zawsze ma na to czas i chęci. Najlepszym przykładem moich osiągnięć jest SquareZone. Prosty, ale funkcjonalny serwis, który przystępnie oferuje informacje użytkownikom. Tym razem przyszedł czas na nowy przykład.

MyBlog – nazwa kodowa powinna być bardziej tajemnicza, ale projekt jest w zbyt wczesnym stadium, mimo wielomiesięcznej pracy przy jego tworzeniu. Otóż wspomniana aplikacja oferuje lub będzie oferowała w przyszłości funkcjonalności znane z popularnych systemów blogowych.

Architektura systemu po części czerpała ze znanego WordPressa, jednak największym atutem omawianej aplikacji jest wydajność i zgodność ze standardami. Wszystkie testy i szczegóły zostaną przedstawione wkrótce. Niedługo postaram się przedstawić kolejne funkcjonalności oraz założenia rozwojowe.

Obecnie nie mam pewności czy kod źródłowy zostanie udostępniony publicznie, jednak wszelkie opinie na temat działania lub architektury są mile widziane.

Wersja demonstracyjna myBlogdostępna jest w sieci.

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.

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.

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

Szkoda tylko, że intensywny cykl artykułów na temat JS, a także jQuery przystopował trochę częstość aktualnizacji bloga. Trudno się przyznać, ale brak czasu jest poważnym wrogiem podczas aktywnej działalności w sieci. Na swoim przykładzie mogę przyznać, jak trudne jest regulane pisanie na specjalistyczne tematy. Tym bardziej cieszę się, że ferrante.pl działa znowu, a autor częściej aktualizuje bloga.

Książka “JavaScript dla webmasterów. Zaawansowane programowanie” zawiera przykładowe rozwiązania najczęściej spotykanych problemów. Podczas tworzenia aplikacji internetowych projektanci często muszą rezygnować ze swoich pomysłów, bo nie mają możliwości ich realizacji. W książce znajdziemy informacje o wyrażeniach regularnych, obsłudze zdarzeń oraz rozszerzeniach JavaScriptu. Nauczymy się także podstaw ECMAScript, struktury obiektowego modelu dokumentu oraz właściwego osadzania JavaScript w kodzie strony WWW. Autor przedstawia również alternatywne sposoby sprawdzania poprawności formularzy oraz wykorzystania elementów XML. Wreszcie poznamy zasady działania komunikacji między przeglądarką i serwerem. Jeśli interesjuą nas usługi sieciowe i bezpieczeństwo naszych aplikacji JavaScript to niezbędne informacje również znajdziemy w tej książce.

Książka jest bardzo dobrym podręcznikiem dla osób znających podstawy JS. Znajomość materiału powinna pozwolić nam na właściwą rozbudowę naszych aplikacji. Przedstawione przykłady znajdują bardzo duże zastosowanie w nowoczesnych, intuicyjnych interfejsach użytkownika.

OSTATECZNA OCENA: 4/5

• Autor: Nicholas C. Zakas
• Tytuł oryginału: Professional JavaScript for Web Developers
• Tłumaczenie: Jarosław Dobrzański, Krzysztof Czupryński, Daniel Kaczmarek
• ISBN: 83-246-0280-1
• Format: B5, stron: 696
• Data wydania: 04/2006 (Helion)