Jest sobie taki pan, co zwie się Vlad Gerasimov i ma on bardzo fajną stronkę z tapetami i innymi grafikami. I na tejże stronie grafiki są przedstawione w dość fajny sposób - na ekranach monitorów. Sposób jest na tyle fajny, że uważam, że warto pokazać jak taką galerię zrobić. Mam nadzieję, że pan Vlad się nie obrazi.

Poszukuję monitora

Monitor jest tutaj najważniejszą rzeczą. Jego zdjęcie musi być równiutkie, bez żadnych zniekształceń. My użyjemy sobie ładnego monitora Della. Następnym krokiem jest doprowadzenie go do porządanych przez nas rozmiarów. Ja mam zamiar zrobić galerię ze sporą ilością zdjęć, więc mój monitor nie może być zbyt wielki - konkretnie 200 x 172 px.

Nasz wzorcowy monitor po pomniejszeniu.

Musimy teraz jeszcze policzyć sobie ile ma dokładnie nasza matryca oraz ile wynosi przestrzeń od lewego, górnego punktu matrycy do lewego, górnego punktu obrazka.

Za pomocą lini pomocniczych "oddzielamy" matrycę i możemy sobie pomierzyć co potrzeba.

Przygotowywujemy miniaturki

Nasze miniturki muszę mieć dokładny rozmiar matrycy. Czyli jeżeli obrazka nie da się przeskalować musimy go troszkę przyciąć.

Kodujemy

Kolejne monitory to nic innego jak kolejne elemnty listy, w naszym przypadku nieuporządkowanej. W środku każdego <li> musi zaś znajdować się link, który okala obrazek. Czyli tak naprawdę żadne cuda:

Pozostaje nam to ostylować:

Najpierw zerujemy wszystko za pomocą tej gwiazdki (dzięki temu mamy pewność, że defaultowe wartości w przeglądarkach nic nam nie popsują).

ul#monitory ustawiamy marginesy, żeby odkleić go od brzegu strony, a za pomocą list-style:none pozbywamy się kropeczek przed każdym punktem listy.

#monitory li otrzymują wysokość i szerokość obrazka przedstawiającego monitor, tło w postaci naszego monitora, float:left, zeby się kolejne monitory obok siebie układały oraz position:relative, zeby zagnieżdżone obrazki z position:absolute miały dobry punkt odniesienia.

Pozostaje nam #monitory li img. Wyłączamy border, żeby niektóre przeglądarki ramki wokół obrazka nie pokazały. Następnie dajemy position:absolute i jako wartości top i left podajemy odległości lewego, górnego punktu matrycy do lewego, górnego punktu obrazka.

Pozostaje teraz tylko obejrzeć demo. W demie zastosowałem jeszcze troszkę jQuery, ale jak taki efekt osiągnąć już wiecie z tutoriala FadeIn, fadeOut, fadeTo - czyli o pojawianiu się i znikaniu.