Warsztat: Galeria obrazów

Użycie biblioteki do prezentacji podstrony z obrazami

Przygotowanie

Zanim pobierzesz bibliotekę ze wskazanego źródła - przestudiuj treść zadania
Wejdź do katalogu swojej Witryny i przygotuj katalog assets/lightbox/ w którym umieścisz pobrane pliki biblioteki
Witrynia projektu jest dostępna - pobierz z serwisu GitHub. Dodatkowo pobierz obrazy do galerii z lokalnego Archiwum do pobrania (lewy panel)
Rozpakuj i przeanalizuj demo biblioteki LightBox2
Umieść pobrane pliki biblioteki w katalogu z punktu #2 oraz podlinkuj do nich w przygotowanym pliku index.html

1 Oczekiwany efekt końcowy

Wstęp

Karuzela banerów to prosty mechanizm do przewijania treści, najczęściej grafiki w postaci dużych banerów lub grafiki z opisem. Mechanizm jest wyposażony, w zależności od autora, w animacje proste lub bardziej złożone oraz panel kontroli przewijania - zazwyczej w postaci ikon (np. kropek lub kwadratów). Można go spotkać również pod nazwą: Slider lub Carousel. Dawno temu tego typu biblioteki były tworzone w oparciu o framework JS jQuery i w dalszym ciągu można znaleźć projekty oparte o jQuery, jednak mając HTML5 i CSS3 oraz wiedząc o pełnym wsparciu JavaScript taki Slider można stworzyć samodzielnie.

Demo

Film prezentujący działanie galerii

2 Załączenie do dokumentu HTML niezbędnych plików zewnętrznych

Umieść pobrane pliki biblioteki LightBox2 w następującej strukturze katalogów w folderze assets/lightbox lub dedykowanym folderze (nazwij katalog). Pamiętaj, by umieścić właściwe pliki we właściwym katalogu.

./katalog-witryny-z-szablonu
├── inne-katalogi
├── libs-6-lightbox
│   ├── css
│   │   ├── lightbox.css
│   │   └── lightbox.min.css
│   ├── js
│   │   ├── lightbox.min.js
│   │   └── lightbox-plus-jquery.min.js
│   └── images
│       ├── close.png
│       ├── loading.gif
│       ├── next.png
│       └── prev.png
├── index.html
└── gallery.html

!!!UWAGA!!!

(!) Zwróć uwagę na odpowiedni katalog.

(!) Zwróć uwagę na identyfikatory CSS lub nazwy plików (jeżeli posiadają numer wersji).

W dokumencie, w którym ma zostać użyta biblioteka galerii zdjęć muszą zostać załączone* następujące pliki:

Arkusze styli CSS (instrukcja załączająca umieszczona w znaczniku head )
Skrypty JavaScript - framework jQuery (jeżeli jest używany przez najnowszą wersję) oraz biblioteka LightBox2 (j/w oraz znacznik skryptu otwierania widoku modalnego zdjęć powinien zostać umieszczony przed zamknięciem znacznika </body> )

<!DOCTYPE html>
<html>
<head>
	...
  <link rel="stylesheet" href="katalog/lightbox.css"
	type="text/css" media="screen" />
  <script type="text/javascript" src="katalog/lightbox-plus-jquery.min.js">
  </script>
</head>
<body>
	...
</body>
</html>

* adres załączanych plików w przykładzie musi pokrywać się z istniejącymi plikami wskazywanymi w katalogu

3 Przygotowanie obrazów galerii

Na tym etapie należy przygotować odpowiedni kod HTML zawierający wszystkie obrazy, które mają być częścią galerii zdjęć.

W dokumencie galerii (galery.html) wewnątrz znacznika <BODY> umieść obrazki otwierane w widoku modalnym (zamiast otwierać sam obraz zamiast dokumentu HTML):

Kod dla obrazów pojedynczych (bez przewijania):

<a class="example-image-link" href="katalog/obraz" data-lightbox="example-1">
  <img class="example-image" src="katalog/obraz-miniaturka" alt="image-1" /></a>

Kod dla obrazów będących grupą (przewijanie typu karuzela):

<a class="example-image-link" href="katalog/obraz"
    data-lightbox="nazwa-grupy" data-title="Tekst podpisu obrazka">
    <img class="example-image" src="katalog/obraz-miniaturka" alt=""/>
</a>

Utwórz 2 grupy Galerii (history oraz city) w jednym dokumencie HTML.

4 Umieść przeglądarkę zdjęć w dokumencie HTML

Używając wcześniej pobranej i skonfigurowanej biblioteki LightBox2 utwórz plik galery.html z semantyczną strukturą artykułu podzieloną na pięć sekcji:

każda sekcja powinna zawierać obraz (miniaturka), o szerokości nie przekraczającej 50% szerokości artykułu, ale minimum 440 pikseli,
po kliknięciu miniaturki z sekcji pełnowymiarowy obraz pojawi się w przyciemnionym trybie modalnym "pełnoekranowyn" z przyciskami do przewijania obrazów,
obrazy powinny być zgrupowane w jedną znajdujących się na stronie innych obrazów,
bibliotekę LightBox należy spolszczyć w minimalnym stopniu (tekst przy podglądzie obrazu wyświetla: Image X of Y) a powinien wyświetlać: Obraz X z Y
treść artykułu możesz wygenerować z serwisu generatora Lorem Ipsum,
dokument powinien być zgodny ze standardem w3c HTML5 oraz zwalidowany.