Галерея сайту. Урок 1

15

Від автора: одним з невід’ємних елементів практично будь-якого сайту, напевно, є галерея. Її обов’язково можна бачити на сайті-портфоліо і навіть в безлічі екземплярів. Вона часто необхідна для блогу інтернет-магазину, корпоративного сайту і т. д.

У циклі з декількох уроків ми з вами будемо створювати нескладну, але разом з тим привабливу галерею.

Галерея сайту. Урок 1Галерея сайту. Урок 1

Отже, давайте почнемо з розмітки. У нас буде обгортка (wrapper), в якій може бути як галерея, так і інший контент. Сама галерея буде перебувати в блоці з класом gallery. Розмітка кожної картинки галереї буде наступною:

Галерея сайту. Урок 1

Додатковий div я ввів для більш простого можливого розширення функціоналу галереї. Однак, за великим рахунком, можна обійтися і без нього.

Для решти картинок необхідно додати таку розмітку, змінюючи лише назви картинок. Поки це рутинний процес і всі картинки ми змушені додавати вручну. Але в подальшому ми напишемо для галереї функціонал на PHP, який зробить додавання картинок простою процедурою.

Тепер додамо стилів нашій галереї:

.wrapper{
width: 555px;
margin: 20px auto;
background: #f0f0f0;
padding: 20px 10px 20px 20px;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
overflow: hidden;
}
.item{
background: #fff;
width: 170px;
height: 150px;
float: left;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, .4);
margin: 0 15px 15px 0;
}
.item > div{
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.front{
transition: all .5s;
}
.front:hover{
box-shadow: 0 0 10px #000;
}

На що тут можна звернути увагу? Цікавий варіант центрування картинок по вертикалі. Спосіб, який ми використовували (для .item > div) не вимагає від нас знання висоти елемента для його центрування по вертикалі, тобто фактично ми можемо використовувати для галереї картинки різних розмірів і все буде виглядати рівно і акуратно.

Розмітка і оформлення галереї, загалом, готові. Залишилося додати функціонал а-ля lightbox для красивого показу великої картинки при кліці по її маленької копії. Я для цієї мети виберу Lightbox 2. Коректно підключимо його стилі і сам плагін і додамо для посилань галереї необхідний атрибут:

Галерея сайту. Урок 1

На цьому ми завершимо поточний урок. Удачі і до нових зустрічей!