Galeria

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

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:

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