We wszystkich swoich projektach WWW mających mieć wodotryski zapewne używacie jakichś bibliotek Javascriptowych. Ja używam jQuery. Do wywołania efektu powiększającego się obrazka na przyciemnionym tle przyjął się powszechnie skrypt Lightbox. Korzysta niestety z bibliotek Prototype i Scriptaculous. W efekcie stworzenie kilku prostych efektów + efekt lightbox generował potrzebę pobrania przez użytkownika trzech sporych bibliotek ze skryptami JS.
Dzisiaj chciałem zareklamować skrypt, który używa wyłącznie jQuery przy tworzeniu lightboksa. Zwie się jQuery lightBox plugin. Sama instrukcja użycia jest dosyć prosta i nie będę o niej pisał. Zamiast tego napiszę jak zrobić żeby nie trzeba było otaczać obrazków linkami, chociażby po to, że nie chcemy oficjalnie chwalić się adresami url do dużych obrazków. Opis do ramki weźmiemy z atrybutu alt="", czyli ostatecznie nie musimy dokonywać żadnych zmian w kodzie HTML strony.
Standardowe przygotowanie kodu HTML wygląda tak: <a href="duzy_obrazek.jpg" rel="lightbox" title="Tytuł obrazka" ><img src="maly_obrazek.jpg"></a<. Wyżej wymienioną przeze mnie bibliotekę da się w miarę łatwo zmusić do współpracy z samymi elementami <img>, a samo wywołanie lightboksa może robić się automagicznie na podstawie rodzica <div> otaczającego obrazki. Potrzeba tylko kilku przeróbek kodu biblioteki.
Bierzemy na warsztat plik jquery.lightbox-0.5.js. Interesują nas okolice 77 linijki kodu (lub 15 w wersji zminiaturyzowanej pliku), a dokładniej trzy miejsca zaczynające się od objClicked.getAttribute('href'). Zamieniamy je na objClicked.getAttribute('src').replace("small", "big"), czyli fragment oryginalnego linka do zdjęcia w locie zamieniany jest z small na big. Jeżeli chcemy żeby opis fotek brany był z atrybutu alt="", to musimy dodatkowo zamienić w dwóch miejscach objClicked.getAttribute('title') na objClicked.getAttribute('alt').
Zakładamy oczywiście, że pliki z małymi obrazkami trzymamy w katalogu images/small/obrazek.jpg, a duże obrazki z taką samą nazwą jak małe mamy w katalogu images/big/obrazek.jpg.
Taką bibliotekę trzeba jeszcze wystartować, czyli podać jej jakie obrazki powinny być powiększane. W sekcji <head> dodajemy sobie taki skrypt:
$(document).ready(function() { $('div.ramkanazdjecia > img').lightBox(); });
Cała zawartość „obrazkowa” <div class="ramkanazdjecia"> stanie się lightboksowa.

O autorze