Galleria - плагін для створення галерей з картинками

Постановка задачі
Підключаємо фреймворк.
Підготовка даних для галереї
Оформлення галереї (створення власної теми)
CSS стилі
висновок

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

Крім того, незважаючи на всю різноманітність, часто не вдається знайти ідеально відповідного варіанту. У якихось випадках обмежені можливості оформлення (не можна змінити розмітку), в якихось немає відповідних опцій або немає можливості вивести разом з малюнком додаткову інформацію. Загалом, підігнати галерею під конкретний сайт буває непросто.

Можна, звичайно, написати власну реалізацію такого плагіна, але це процес трудомісткий (якщо робити якісно) і, швидше за все, код відсотків на 90 буде повторювати те, що є в інших плагінах.

У таких випадках набагато краще використовувати фреймворки. Про один з них і піде мова в цій статті.

фреймворк називається Galleria і являє собою плагін для бібліотеки jQuery.

Його основними перевагами є підтримка тем оформлення, власний API і велика кількість налаштувань.

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

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

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

Постановка задачі

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

Тобто повинно вийти приблизно наступний результат.

Demo

Якщо цікаво, можете скачати архів з цим прикладом.

Source

Тепер розглянемо як вирішується це завдання за допомогою Galleria.

Підключаємо фреймворк.

На сторінку додаємо блок для галереї та посилання за допомогою якої будемо цю галерею відкривати.

<Div id = "content"> <a href="#" id="openGallery"> Відкрити галерею </a> <div id = "gallery"> </ div> </ div>

Після цього розпаковуємо архів з фреймворком в папку galleria і підключаємо 3 JS-файлу.

Тут все як завжди. Спочатку завантажуємо jQuery, потім плагін Galleria і скрипт init.js (він виконує підключення і настройку галереї).

Підготовка даних для галереї

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

var images = [{image: 'images / spring_1.jpg', thumb: 'images / spring_1t.jpg', title: 'Перша картинка', description: 'Опис першої картинки', size: '450x338', link: 'images /spring_1.jpg '}, {image:' images / spring_2.jpg ', thumb:' images / spring_2t.jpg ', title:' Друга картинка ', description:' Опис другий картинки ', size:' 450x360 ', link : 'images / spring_2.jpg'}, ...];

Думаю, нескладно здогадатися чому розробниками обраний саме такий варіант передачі даних. Якщо ви отримуєте дані від сервера в JSON форматі, то отримати такий об'єкт можна за допомогою одного виклику функції eval.

Зверніть увагу! Не всі поля в цій структурі обов'язкові, ви можете додавати скільки завгодно своїх власних полів з даними. У мінімальному варіанті для роботи плагіна необхідно поле image і, якщо ви хочете показати слайдер зі слайдами картинок - thumb.

Тепер підключаємо галерею

var gallery = $ ( "# gallery"); Galleria.loadTheme ( 'galleria / themes / simplecoding / galleria.simplecoding.js'); $ ( '# OpenGallery'). Click (function () {$ ( "# gallery"). Galleria ({data_source: images, width: 800, height: 500, clicknext: true}); return false;});

Перед підключенням галереї необхідно завантажити тему. Її створення ми розглянемо трохи нижче, зараз тільки відзначимо, що для завантаження необхідно вказати основний JS-файл теми.

Оскільки нам потрібно щоб галерея відкривалася при натисканні на посилання, встановлюємо відповідний обробник, і в ньому викликаємо метод galleria для блоку в якому буде знаходиться галерея (рядок 6).

В параметрах цього методу передаємо настройки галереї. тут:

data_source - ім'я змінної в якій знаходяться дані малюнків;
width і height - довжина і ширина галереї;
clicknext - якщо цей параметр дорівнює true, то клік по картинці буде показувати таку картинку (дублює кнопку Next).

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

Оформлення галереї (створення власної теми)

Створити тему не складно. В папці galleria / themes / створюєте папку з назвою вашої теми (в даному випадку - simplecoding). У цій папці повинен знаходиться основний файл теми - galleria.simplecoding.js.

Практично напевно ви захочете додати файл стилів і різні картинки і іконки для оформлення галереї.

В якості основи для даного прикладу я взяв код з офіційної документації , А також картинки і стилі з теми classic, яка поставляється разом з плагіном (стилі, природно, довелося трохи змінити і доповнити).

Розглянемо основний скрипт - galleria.simplecoding.js

(Function ($) {Galleria.addTheme ({name: 'simplecoding', author: 'Statsenko Vladimir, https://www.simplecoding.org', version: 1, css: 'galleria.simplecoding.css', defaults: {transition: 'fade', imagecrop: true, _my_color: 'black'}, init: function (options) {// додаємо заголовок this.addElement ( 'title'); this.prependChild ( 'container', 'title') ; // додаємо кнопку "Закрити" this.addElement ( 'close'); this.prependChild ( 'container', 'close'); this. $ ( 'close'). html ( '<a href="#"> </a> '); // додаємо поле для опису і розміру картинки this.addElement (' desc '); this.appendChild (' stage ',' desc '); var overlay = $ (' <div id = "overlay "> </ div> '); overlay.add ('. galleria-close '). click (this.proxy (function (e) {this. $ (' container '). toggleClass (' hidden '); overlay. toggleClass ( 'hidden'); e.stopPropagation (); return false;})); this. $ ( 'container') .css ( 'background-color', options._my_color) .parent (). parent (). append (overlay); // bind a loader animation: this.bind (Galleria.LOADSTART, function (e) {if (! e.cached) {this. $ ( 'loader'). show (); }}); this.bind (Galleria.LOADFINISH, function (e) {this. $ ( 'loader'). hide (); var imageData = this.getData (); this. $ ( 'title'). html (imageData.title) ; this. $ ( 'desc'). html (imageData.description + '' + imageData.size);}); }}); } (JQuery));

Як бачите, для створення теми використовується метод addTheme (рядок 2) в параметрах якого ми вказуємо її назву, ім'я автора, назва файлу стилів (рядок 6), різні параметри і метод ініціалізації (параметр init, рядок 12).

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

Розглянемо цей метод докладніше.

Перш за все, погляньте на розмітку галереї , Яка створюється за замовчуванням.

У нашому випадку необхідно додати назву картинки і кнопку «Закрити» над картинкою і текст з докладним описом - під нею.

Тому ми додаємо 3 поля - title, close і desc (рядки 14-25). При цьому використовуються методи addElement (створює новий елемент), prependChild (вставляє новий елемент перед зазначеним елементом) і appendChild (вставляє новий елемент після вказаного об'єкта).

У першому параметрі методів prependChild і appendChild необхідно вказати ім'я блоку перед (після) якого потрібно вставити новий елемент. При цьому врахуйте, що плагін додає до всіх назв блоків приставку galleria-. Тобто якщо ви подивитеся на розмітку за допомогою firebug, то блоки будуть виглядати приблизно так.

<Div class = "galleria-title"> П'ята картинка </ div>

Тепер розглянемо код, що дозволяє закрити галерею (рядки 27-38).

В даному випадку ми використовуємо трохи нестандартне рішення. У нас є кнопка «Закрити», яку ми помістили в правий верхній кут галереї. На додаток до цієї кнопки створимо напівпрозорий шар (overlay), який з одного боку буде затінювати сторінку, а з іншого - закривати галерею при кліці по ньому.

Для створення шару використовуємо функцію $ бібліотеки jQuery. Потім призначаємо йому і кнопці «Закрити» обробник події click.

Зверніть увагу, при створенні цього обробника ми використовуємо метод proxy об'єкта Galleria (рядок 28). Цей метод дозволяє звертатися до поточного екземпляру об'єкта Galleria всередині обробника кліка за допомогою this. Якщо не використовувати proxy, то this всередині обробника кліка буде вказувати або на кнопку «Закрити», або на overlay.

Також відзначте, як виконується звернення до елементів галереї. Наприклад, перемикання класу hidden у контейнера.

this. $ ( 'container'). toggleClass ( 'hidden');

Тут викликається метод $ плагіна, а не функція $ бібліотеки jQuery. Але, також як і стандартна функція, цей метод повертає об'єкт jQuery, тобто ви зможете використовувати весь функціонал цієї бібліотеки.

Тепер додаємо обробники ще для двох подій.

При виникненні події Galleria.LOADSTART (початок завантаження зображення) показуємо анімований завантажувач (рядки 40-44).

А після завантаження зображення (подія Galleria.LOADFINISH) встановлюємо заголовок і опис поточної картинки (рядки 45-50).

Інформацію, пов'язану з поточною картинкою (ми її вказали при в файлі init.js), можна отримати за допомогою методу this.getData (). Після цього можна звертатися до будь-яких полях, яким можна довіряти, так imageData.title.

CSS стилі

Я не буду детально описувати всі стилі, які тут використовуються. Більшість з них взято з теми classic. Наведу ті, які використовувалися для оформлення нових елементів.

#overlay {width: 100%; height: 100%; z-index: 9; background-color: # 000; opacity: 0.3; position: absolute; top: 0; left: 0; } .Hidden {display: none; } .Galleria-close {background-image: url (classic-map.png); background-position: -753px -11px; width: 9px; height: 9px; margin: 0.5em; float: right; } .Galleria-close a {display: block; text-decoration: none; } .Galleria-title, .galleria-desc {color: #fff; font-family: Verdana, sans-serif; text-align: center; padding: 3px; }

Як бачите, ніяких особливих хитрощів тут немає.

Для напівпрозорого шару використовуємо абсолютне позиціонування і 100% довжину і ширину, щоб він закрив все вікно. За допомогою z-index розміщуємо його під галереєю.

Блок з галереєю робимо невидимим за допомогою класу hidden.

Для кнопки «Закрити» вказуємо фонове зображення і відповідний розмір.

А для додаткових написів встановлюємо параметри шрифтів і відступи.

висновок

Можливо, після прочитання цієї статті у вас виникло питання: «Навіщо так заморочуватися?». Дійсно, більшість полігонів для створення галерей можна просто підключити і вони будуть працювати. При цьому ніяких тим створювати не потрібно.

Але це простота позірна. Як тільки ви захочете що-небудь змінити в такому «простому» плагін, відразу зіткнетеся з необхідністю правити його вихідні коди, а це заняття набагато більш трудомістке ніж створення теми для Galleria.

До того ж, у вас з'являється можливість створити дійсно оригінальне рішення для роботи з картинками і зробити ваш ресурс дійсно незабутнім!

Всіх читачок вітаю зі Святом весни!
Удачі і хорошого настрою!

цікаво почитати

навчання програмуванню допоможе стати справжнім IT фахівцем.

заповнення 3-ПДФО 2011 року на продаж автомобіля плюс інструкції «Як відзвітуватися в податковій»

Производственная компания El.Od