jQuery lightGallery — ефектна галерея для сайту

31

Від автора: Дуже часто на сайті необхідно відображати різні зображення, наприклад, фотографії або графічні матеріали. При цьому дуже хорошою практикою є використання галерей зображень, які спрощують перегляд мініатюр, так і їх збільшених копій. У даному уроці ми з Вами розглянемо дуже ефектну галерею зображень під назвою jQuery lightGallery.

jQuery lightGallery — ефектна галерея для сайтуjQuery lightGallery — ефектна галерея для сайту

Установка галереї

Для початку переходимо на офіційний сайт http://sachinchoolur.github.io/lightGallery/ і завантажуємо архів з галереєю jQuery lightGalery:

jQuery lightGallery — ефектна галерея для сайту

Далі распакуем отриманий архів, в папці light-gallery містяться компоненти галереї, кожен з яких розташований в окремій папці:

css – в даній директорії містяться стилі, необхідні для правильної роботи галереї;

fonts – не стандартні шрифти, використовувані в галереї;

img – в даному каталозі, міститься анімаційне gif зображення, яке відображається при завантаженні зображень;

js – в даній директорії, міститься бібліотека, необхідна для роботи галереї.

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

Далі, для роботи галереї необхідна бібліотека jQuery, тому якщо вона у Вас не підключена, скачайте її з офіційного сайту http://jquery.com і підключіть до Вашого сайту (в мене ця бібліотека міститься в папці js, разом з бібліотекою галереї):

Далі, підключаємо бібліотеку галереї:

Також підключимо порожній файл, script.js, в якому будемо вести кодування на мові javaScript:

Потім підключаємо файл стилів галереї:

На цьому установка галереї завершена.

Відображення галереї на екрані браузера

Для роботи галереї необхідні зображення в двох форматах:

мініатюри – зображення невеликого розміру (100 пікселей по ширині і висоті), які використовуються для попереднього перегляду;

зображення повного розміру – необхідні для детального перегляду.

Дані зображення я вже заготовив і скопіював у папку. Так само для роботи галереї необхідно створити наступну розмітку:

  • jQuery lightGallery — ефектна галерея для сайту
  • jQuery lightGallery — ефектна галерея для сайту
  • jQuery lightGallery — ефектна галерея для сайту
  • jQuery lightGallery — ефектна галерея для сайту

Зверніть увагу, що галерея представляє собою блок ul, в якому кожен тег li – це окреме зображення галереї. Атрибут data-src – містить шлях до зображення повного розміру. Відповідно тег img, кожного блоку li — відображає мініатюру. Так само блок li може містити атрибут data-sub-html, в якому можна описати довільну рядок, яка буде відображатися разом з відповідним зображенням галереї. При цьому дана рядок може містити теги HTML, таким чином можна формувати повноцінні блоки і задавати для них стилі. Більш того, в атрибуті data-sub-html, можна вказати ідентифікатор блоку, який буде відображений з відповідним зображенням.
Так само давайте додамо кілька правил, для зображень галереї, що б вирівняти їх горизонтально:

ul {
list-style: none outside none;
padding-left: 0;
}
.gallery li {
display: block;
float: left;
height: 100px;
margin-bottom: 6px;
margin-right: 6px;
width: 100px;
}
.gallery li a {
height: 100px;
width: 100px;
}
.gallery li a img {
max-width: 100px;
}
.test {
background: none repeat scroll 0 0 #fff;
left: 500px;
position: absolute;
top: 100px;
}

Тепер давайте подивимося, що у нас вийшло:

jQuery lightGallery — ефектна галерея для сайту

Тепер мініатюри зображень відображаються, але галерея в цілому ще не працює. Тому відкриваємо файл script.js і додамо наступний код:

jQuery(document).ready(function ($) {
$(«#lightgalery»).lightGallery({
});
});

Тобто за допомогою бібліотеки jQuery, вибираємо блок в якому буде розташовуватися галерея – це блок з ідентифікатором #lightgalery, і викликаємо метод lightGallery. Тепер якщо оновити інформацію в браузері і клацнути по одному з зображень галереї ми побачимо наступне:

jQuery lightGallery — ефектна галерея для сайту

Як Ви бачите, галерея тепер цілком працездатна.

Налаштування галереї зображень

При виклику методу lightGallery(), можна вказати наступні параметри (при цьому кожну настройку я закомментировал), використовуючи які можна налаштувати під себе функціонал галереї:

$(«#lightgalery»).lightGallery({
//вид анімаційного ефекту, при зміні зображення
mode:’fade’,
// швидкість протікання анімаційних ефектів
speed:500,
// клас який буде доданий до основного блоку галереї
addClass:’myclass’,
// кількість завантажених зображень в пам’ять
//якщо встановлено значення 2, то наступні два і попередні два зображення
// щодо поточного (відкритого в галереї), будуть завантажені в пам’ять
preload:2,
//селектор дочірніх елементів, блоку з галереєю.
// Нагадаю, що кожен вкладений елемент — це окреме зображення.
//Використовуючи дану настройку, можна створити власну розмітку слайдера
selector:’p’
//Якщо FALSE, то кнопка показу мініатюр показана не буде
thumbnail:true,
//Показувати чи ні відразу ж мініатюри зображень
showThumbByDefault:true
//ширина мініатюр
thumbWidth:100,
//зовнішній відступ між слайдами
thumbMargin:50
//Якщо так, значить перейшовши до останнього зображення — ми повернемося до першого і т. д
loop:true,
// Якщо TRUE, буде задіяно режим автоматичного програвання слайдшоу
auto:true,
//Пауза між слайдами
pause:5000,
//Якщо TRUE, вийти з перегляду зображення можна клавішею ESK
eskKey:false,
//Якщо TRUE, клік по вільній області галереї ,призведе до її закриття
closable:false,
//Якщо TRUE, буде відображений лічильник зображень галереї.
counter:true
});

Динамічне додавання зображень

Зображення в галерею, можна додавати динамічно, використовуючи тільки код JavaScript, тому давайте подивимося, як це робиться. Першим ділом, всю розмітку галереї, я заміняю на звичайний простий абзац

Click

Тепер напишемо невеликий скрипт – обробник події click, з даного блоку.

$(«.but»).click(function () {
$(this).lightGallery({
dynamic:true,
dynamicEl:[
{‘src’:’img/1.jpg’,’thumb’:’content-1/images/1_th.jpg’,’sub-html’:»

Hello

Text

«},
{‘src’:’img/2.jpg’,’thumb’:’content-1/images/2_th.jpg’},
{‘src’:’img/3.jpg’,’thumb’:’content-1/images/3_th.jpg’},
{‘src’:’img/4.jpg’,’thumb’:’content-1/images/4_th.jpg’},
]
});
});

Тобто при кліці по блоку

буде викликаний метод lightGallery(), для даного блоку, при цьому зображення в галерею будуть додані автоматично, виходячи з значень масиву, переданого в налаштування dynamicEl. Кожна комірка цього масиву – це окремий об’єкт, у якого є власні властивості:

src — шлях до повнорозмірного зображення;

thumb – шлях до мініатюрі;

sub-html – опис зображення, це може бути кК звичайний текст, так і текст містить html-теги.

Так само, при динамічному додавання зображень в галерею, необхідно активувати налаштування dynamic, тобто передати їй значення TRUE.

На цьому даний урок завершено. Всього Вам доброго і вдалого кодування!!!