Створення слайдеру (галереї) картинок

Створення слайдеру (галереї) картинок

Очікуваний результат

Слайд шоу можна зустріти майже на кожному сайті. Більшість з них використовуються JavaScript для зміни зображень. Іноді використовують Flash. Пробелми з переглядом зображень можуть виникнути в тому випадку, якщо браузер користувача не підтримує ні того ні іншого. Виходом з такої ситуації може бути створення стайд-шоу з використанням CSS та HTML.

Що ми з робимо?

Створюємо просте слайд-шоу з набором табів (картинок-кнопок) ліворуч та одним великим зображенням праворуч. При натисканні на таб, відкривається збільшене зображення таба праворуч.

Перший крок — готуємо зображення

Спершу потрібно обрати зображення, які ви будете вставляти в слайдшоу. Я використав зображення з дракончиками.

Обираємо розмір основного (великого) зображення. В моєму випадку мені підходить розмір 500х500 px. Насправді, розмір зображення не грає великої ролі. Далі потрібно визначити розмір зображень в табах. Для цього ділимо висоту основного зображення на кількість зображень в табах. В моєму випадку: 500px/4 = 125px. Ширина зміниться пропорційно висоті, в даному випадку ширина також буде 125рх.

Після того, як ми порахували розміри зображень, необхідно підігнати обрані зображення під ці розміри. Відкриваємо обрані зображення через Photoshop. Обрізаємо/змінюємо розміри зображень. Основні зображення зберігаємо під іменем imageN у форматі .JPG, де N – номер малюнку, а малюнки-таби під іменем tabN також у форматі .JPG

В результаті, для слайдшоу з чотирьох картинок у нас має бути заготовано 8 зображень (4 основних картинки та 4 картинки-таби — зменшені копії основних)

Рекомендації по вибору розміру зображення:

1) Для того, щоб слайд шоу виглядало гарно і гармонійно необхідно, щоб висота основного зображення ділилася націло на кількість зображень, що будуть в слайд шоу.

2) Всі картинки в слайд шоу повинні бути однакового розміру

3) Якщо картинки різного розміру – варто підігнати їх під один розмір за допомогою Photoshop.