Симпатична галерея для сайту через 20 хвилин на javascript

12

Від автора: у цьому нескладному практичному уроці ми з Вами за короткий час створимо просту, але разом з тим симпатичну галерею, яка буде чудово виглядати на сайті. Отже, приступимо.

Для показу ми скористаємося безкоштовним шаблоном, в якому створимо ще одну сторінку під нашу галерею. Відразу варто відзначити, що завдання, яке ми вирішимо уроці, насправді може бути виконана засобами PHP набагато менше рутинно… але це вже тема окремого уроку.

Симпатична галерея для сайту через 20 хвилин на javascriptСимпатична галерея для сайту через 20 хвилин на javascript

Всі картинки галереї я помістив в каталог /gallery_img/. Картинки розділені за двома папками в цьому каталозі — це папки /big/ і /small/. Думаю, Ви вже здогадалися, що в цих папках зберігаються картинки оригінальних розмірів і мініатюри. При цьому всі мініатюри мають однакові розміри — 150 пікселів ширини і 100 пікселів висоти. Однакові розміри використані для того, щоб мініатюри рівно і красиво розташовувалися на сторінці. Таким чином, мініатюра і картинка оригінальних розмірів складають комплект одного зображення — мініатюру виводиться на сторінку, а по кліку по ній показується велика картинка.

Створимо на сторінці блок з класом gallery — в цьому блоці будуть розташовуватися мініатюри:

Тепер додамо картинок в цей блок. Всі картинки я виводити тут не буду, покажу лише кілька залишилися виводяться аналогічно:

Симпатична галерея для сайту через 20 хвилин на javascript
Симпатична галерея для сайту через 20 хвилин на javascript

Як ми бачимо, картинки поміщені в посилання, що вказує на велику картинку. Також кожна посилання має клас photo і атрибут rel зі значенням gallery (далі Ви зрозумієте, для чого потрібен цей атрибут). Таким же чином додаємо решту картинки, змінюючи лише шляху до мініатюр і великим фото. В результаті ми отримали якусь подобу галереї… поки, правда, не дуже симпатичною:

Симпатична галерея для сайту через 20 хвилин на javascript

Давайте додамо для галереї кілька стильових правил, щоб «оживити» її і зробити більш привабливою. Відкриємо файл стилів і додамо 2 правила (я їх прокоментував):

/* Gallery */
.gallery img{
margin:5px; /* зовнішні відступи картинок */
border:3px solid #fff; /* рамка картинок */
}
a.photo:hover img{
border:3px solid #034F80; /* зміна кольору рамки при наведенні на картинку */
}

Ось тепер наша галерея виглядає «живий» і привабливою:

Симпатична галерея для сайту через 20 хвилин на javascript

Залишилося тільки домогтися того, щоб великий показ картинки проводився в модальному вікні. Для цього скористаємося будь-яким вподобаним Вам скриптом «а-ля Lightbox». Мені в цьому плані симпатичний Fancybox. Опис і документацію до нього Ви зможете знайти на офсайті — http://fancybox.net.

Завантажуємо архів, розпаковуємо і підключаємо необхідні скрипти і стилі на нашій сторінці. Для нашого сайту я створю окремий каталог під скрипти — /scripts/. Туди скопіюємо файл з бібліотекою jQuery (її можна взяти з архіву Fancybox або на офсайті). Також в каталог /scripts/ помістимо повністю папку fancybox з усім вмістом (скрипти, стилі, картинки). Підключаємо все це добро між тегами head:

Залишилось лише написати невеликий код jQuery, щоб наша галерея повноцінно запрацювала. Необхідно відібрати посилання, для яких буде відкриватися модальне вікно, як Ви пам’ятаєте, — це посилання з класом photo. Ну і для відібраних посилань викликається метод fancybox()… от і все — нічого складного:

$(document).ready(function(){
$(«a.photo»).fancybox();
});

Тепер великі картинки відкриваються в модальному вікні — симпатично, чи не правда? Симпатична галерея для сайту через 20 хвилин на javascript До речі, відкривши картинку, ми можемо, не закриваючи її, щоб перейти до наступного або попереднього зображення. Цю можливість забезпечує атрибут rel, який ми присвоїли посиланнями галереї. Однакове значення (воно може бути будь-яким) атрибута пов’язує посилання в одну групу.

Також Ви можете погратися з настройками галереї, скориставшись документацією на сайті Fancybox. У мене в результаті були встановлені наступні налаштування:

$(document).ready(function(){
$(«a.photo»).fancybox({
transitionIn: ‘elastic’,
transitionOut: ‘elastic’,
speedIn: 500,
speedOut: 500,
hideOnOverlayClick: false,
titlePosition: ‘over’
});
});

На цьому наша галерея на javascript закінчена. Сподіваюся, що цей невеликий урок Вам сподобався і буде корисний. Успіхів Вам!