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

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

Кроме того, несмотря на все разнообразие, часто не удаётся найти идеально подходящего варианта. В каких-то случаях ограничены возможности оформления (нельзя изменить разметку), в каких-то нет подходящих опций или нет возможности вывести вместе с рисунком дополнительную информацию. В общем, подогнать галерею под конкретный сайт бывает непросто.

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

В таких случаях гораздо предпочтительнее использовать фреймворки. Об одном из них и пойдет речь в этой статье.

Фреймворк называется Galleria и представляет собой плагин для библиотеки jQuery.

Его основными преимуществами являются поддержка тем оформления, собственный API и большое количество настроек.

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

Чтобы получить более полное представление о фреймворке рассмотрим небольшой пример, который включает создание собственной темы и использование нескольких очень полезных возможностей Galleria.

Примечание. Эта статья ни в коем случае не заменяет официальную документацию и не содержит описание всех возможностей фреймворка. С другой стороны, некоторые вопросы интеграции фреймворка со страницей здесь рассмотрены более подробно.

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

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

Т.е. должно получиться примерно следующий результат.

Если интересно, можете скачать архив с этим примером.

Теперь рассмотрим как решается эта задача с помощью Galleria.

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

На страницу добавляем блок для галереи и ссылку с помощью которой будем эту галерею открывать.

<div id="content">
    <a href="#" id="openGallery">Открыть галерею</a>
    <div id="gallery"></div>
</div>

После этого распаковываем архив с фреймворком в папку galleria и подключаем 3 JS-файла.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="galleria/galleria-1.2.2.min.js"></script>
<script src="init.js"></script>

Здесь все как обычно. Сначала загружаем 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 на продажу автомобиля плюс инструкции «Как отчитаться в налоговой»