Galeria

sekcja prezentująca obrazy
prezentacja wielu miniatur
prezentacja powiększenia obrazu

Galeria - składowe

zdjęcia
miniatury
podpisy
detale zdjęcia
powiększenie zdjęcia
kategorie

Galeria - semantyka

zdjęcie - <img>
lista - <ol> <ul> <li>
podpisy - <p>
detale zdjęcia - <dl> <dd> <dt>
powiększenie zdjęcia - <div> <a> <img>
kategorie?

Analiza

Przykładowych galerii

Galeria 1

grid
tiles (kafelki)
obrazki

<div>

CSS?

grid:
- display: block
- display: inline-block
- width: X %
tile:
- height: N px
- overflow: hidden
obrazek:
- display: block
- width: 100%
- <img> lub background-image

Galeria 2

grid
tiles
obrazek + info

slajd
- blok
- obrazek
- lista
- ikony
- tekst
autor
- avatar
- link

CSS

slajd lista
- float: left / right
- display: inline-block
slajd ikony:
- display: inline-block
autor avatar
- display: inline-block

grid:
- display: block
- display: inline-block
- width: X %
tile:
- height: N px
- overflow: hidden
obrazek:
- display: block
- width: 100%
- <img> lub background-image

Podgląd pracy wynikowej

http://hussar-academy.github.io/#gallery

Kolumny

<section class="gallery" id="gallery">
  <h2 class="gallery__title">Gallery</h2>
  <div class="gallery__content">
    <div class="gallery__column">
      ...
    </div>
    <div class="gallery__column">
      ...
    </div>
    <div class="gallery__column">
      ...
    </div>
  </div>
</section>

.gallery__content {
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  width: 1050px;
}

.gallery__column {
  display: inline-block;
  vertical-align: top;
  width: 320px;
}

podgląd wynikowy

Kafelki

<div class="gallery__column">
  <div class="box-container">
    <div class="box box--1"></div>
  </div>
  <div class="box-container">
    <div class="box box--2"></div>
  </div>
  <div class="box-container">
    <div class="box box--3"></div>
  </div>
</div>

.box-container {
  margin-bottom: 20px;
  overflow: hidden;
}

.box {
  width: 360px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  transform: translate3d(-40px, 0, 0);
}

.box:hover {
  -webkit-filter: grayscale(0);
  -moz-filter: grayscale(0);
  filter: grayscale(0);
  transform: translate3d(0, 0, 0);
}

.box--1 {
  background-image: url("https://example.com/img1.jpg");
  height: 300px;
}

Galeria z wyborem

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_radio
input:checked+element
https://jsfiddle.net/kjmonterail/xc3mo6zx/
https://jsfiddle.net/kjmonterail/xc3mo6zx/1/

Zadanie

podgląd wynikowy

Przygotuj sekcję galerii:

odnajdź przygotowany szkic z planem portfolio
jeśli masz ochotę, nanieś zmiany
przygotuj zdjęcia (swoje lub z internetu)
zaimplementuj markup HTML
dodaj stylowanie CSS