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

Владимир | | CSS, HTML, JavaScript, Web разработка.

galleria

Количество различных 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-файла.

<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, http://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 на продажу автомобиля плюс инструкции «Как отчитаться в налоговой»

  • Yury

    Стрелки влево и вправо не работают — печально

    • Поддержку стрелок можно включить. В документации есть готовый пример.

  • Yurik

    помогите плиз, хочу сделать чтоб эта галерея открывалась в блоке каком нибудь поверх сайта, но чтоб страница под низом была немного приглушена темным цветом. Пробовал вставить эту галерею в FancyBox, как то криво получается. Может подскажете как лучше это сделать?

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

  • как реализовать все это в Joomla?

    Захотел создать простенькую галерею на Jquery, взяв Galleria 1.2.2

    Использовал Joomla 1.5.23

    Мои действия:

    прописал в шаблоне index.php

    далее в контенте:

    ##картинки в корне сайта в папке images/gallery

    Galleria.loadTheme('templates/шаблон/html/galleria/themes/classic/galleria.classic.min.js');
    $(«#gallery»).galleria({
    width: 600,
    height: 600
    });

    ну вообщем то и все. На Локалке все работает, но вот на хосте нет, просто загружается страница контента и пусто, но в коде страницы присутствует вставленный код и еще такой момент:

    стиль задается

    В чем дело, где я что упустил?

    • script src=»templates/шаблон/html/…
      Вы уверены, что этот адрес задан правильно? Посмотрите firebug'ом, загрузился ли galleria-1.2.2.min.js

      • я вот только не могу разобраться, firebug'om как просмотреть, в какой строке он должен, в коде вообще присутствует и читает скрипт

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

        • У firebug'а есть вкладка «Сеть», в ней показаны файлы, которые загружаются вместе со страницей. Посмотрите, нет ли там 404-ых ошибок?

          Если есть — указывайте абсолютные адреса скриптов (начиная с http).

        • проверил, не может найти шаблон classic
          прописываю абсолютный адрес, но все равное не видет и вообще странный код получается в виде:
          http://сайт/gallery/30-items/templates/negativ/html/galleria/themes/classic/galleria.classic.min.js

        • нашел свою ошибку в контенте, упустил / для указания шаблона

          спасибо за вашу наводку, очень благодарен

  • Marshack

    Мож кто подскажет — использую соместно с HostCMS, сделал все по официальной документации, все подгружается — но картинки идут просто одна за другой, ява говорит:

    Ошибка: $(«#gallery»).galleria is not a function
    Что может быть, заранее благодарен.

    • Подобная ошибка может возникать в следующем случае.
      1) Вы подключили библиотеку jquery при этом автоматически создается объект jQuery.
      2) Подключаете galleria, по-сути — это назначение объекта galleria одному из свойств объекта jQuery.
      3) HostCMS сама загружает библиотеку jquery, т.е. пересоздает объект jQuery.

      Решение: jquery должна загружаться только один раз. Желательно использовать встроенные средства CMS для подключения библиотеки, а не встраивать тег script в шаблон страницы.

      • Marshack

        Спасибо большое за оперативность, обязательно попробую

  • Скажите, а как можно увеличить размер миниатюр так, чтобы скрипт не выталкивал их за границы основного блока и размещал их в основном диве за счет уменьшения размера фото?

    • Если честно, вопрос я не понял. Если миниатюра вылазит за границы, то скорее ее нужно уменьшать, а не увеличивать.

  • Dima

    Скажите как эту галерею можно подружить скажем с вот с таким плагином: http://www.mind-projects.it/projects/jqzoom/demos.php ?

    Просто очень нужно чтобы при наведении на большую картинку появлялся такой эффект.

    • Не пробовал. По-идее нужно «привязать» jqzoom к элементу «div.galleria-image img»

      • Dima

        Подскажите, как именно это сделать?

        • Сейчас посмотрел внимательнее и понял, что так просто решить проблему не получится. Для работы jqzoom нужно, чтобы картинка находилась внутри ссылки. Galleria использует другую разметку. Переделывать ее — занятие довольно трудоемкое. В примере, показанном в этой статье, использовались самые простые изменения структуры.

          Наверное вам будет проще подобрать плагин галереи, который имеет разметку, подходящую для jqzoom.

        • Dima

          Ясно… Жаль… Но все равно спасибо.

  • Anton Alexandrov

    Добрый день. А можно ли сделать так , чтобы при клике на основную картинку, она открывалась в полный размер, что-то вроде full screen

    • Да, можно. Задача решается разными путями. Например, есть встроенные методы для работы с полноэкранным режимом http://galleria.aino.se/docs/1.2/api/methods/#display

      • Anton Alexandrov

        Большое спасибо, все получилось. Вы очень помогли!

  • Vladdrum

    Обязательно попробую… Это будет мой первый опыт, но фишка «создать действительно оригинальное решение для работы с картинками и сделать ваш ресурс действительно запоминающимся»  — основной мотив.

  • Ko$

    Пытаюсь прикрутить html код видео , чтобы при клике на миникартинку появлялось видео. Что-то не могу догнать как

    • Посмотрите разметку галереи (с помощью firebug), вам нужно найти тег object (с видео)

  • как сделать чтоб маленькие изображения выводились не внизу, а сверху? http://borislav.org.ua/news/kozhni_dvi_godini_berut_probi_vodi_dlja_viznachennja_vmistu_nafti/2012-07-18-553
    версия galleria-1.2.7

    • Поставить в разметке
      galleria-thumbnails-container перед
      galleria-stage

      • ето надо в скрипте менять? если да…то пусть будет так как есть, а то в скриптах я — сосна товарищ

        • Да, тут все изменения нужно делать в скриптах.

  • RichardDavis

    Спасибо за статью оказалась очень полезной. Вопрос такой: на странице располагается несколько картинок. при нажатии на одну из них появляется галерея(меняем свойство div'а, в котором она находится на block). Можно-ли сделать так, чтобы в галерее активной была именно так картинка, на которую нажал пользователь?

    • Да, можно. Нужно передать номер картинки при создании галлереи. Как-то так:

      var cur_img = 2;

      container.galleria({

      show: cur_img,

      });

  • Анатолий

    Подскажите, пожалуйста, как сделать, чтобы фотогалерея расстягивалась на всю высоту экрана (тоесть была резиновая)?

    • Возьмите за основу тему Classic, которая идет в дистрибутиве. Она нормально масштабируется, посмотреть можно здесь.

      • Анатолий

        Нет, Вы меня не поняли… Как вместо фиксированной высоты #galleria{height:320px} автоматически растягивать галерею на всю высоту браузера?

        • Вы можете задать высоту любого блока с помощью JS:

          var windowHeight = jQuery(window).height();
          jQuery('#galleria').height(windowHeight);

        • Анатолий

          Убрал стиль ( #galleria{height:320px} ), вставил Ваш скрипт (
          var windowHeight = jQuery(window).height();
          jQuery('#galleria').height(windowHeight);
          ), фотогалерея вообще перестала отображаться. Может я что-то не то делаю, извините…

        • Анатолий, я привел скрипт для того, чтобы показать общую идею. Реализация для вашего случая практически наверняка может отличаться.

          Вам нужно с помощью firebug (или инструментов google chrome) посмотреть что происходит во время выполнения этого кода. Например, какое значение высоты установлено до вызова height(windowHeight) и т.д.

        • Анатолий

          Убрал #galleria{height:320px}, вставил Ваш скрипт — фотогалерея вообще перестала отображаться…

  • Toragon

    Здравствуйте, подскажите пожалуйста, как добавить кнопку Fullscreen в базовый шаблон…

    • Если просто добавить кнопку Fullscreen в шаблон, то пользы от нее будет немного. Напишите, как вы представляете переход в полноэкранный режим? С использованием native fullscreen api или просто хотите «растянуть» картинку на всё окно браузера?

      • Toragon

        Вот galleria.io/themes/twelve реализована кнопка перехода, а здесь читалка масштабируется при нажатии клавиши пробел readmanga.me/toriko/vol24/216 Хотелось бы реализовать оба эти варианта в дальнейшем…

  • Олежка

    Автор я тебя люблю. Ты спас вероятно мой заказ.
    astranar.ru

  • Анатолий

    Убрал стиль #galleria{height:520px}, установил Ваш скрипт «задать высоту любого блока с помощью JS»… пропала фотогалерея. В чем может быть проблема? Спасибо!

  • Константин

    А можно как-то разместить на одной страницы больше одной галереи?

    • Да, можно. Повторите для каждой галереи код из листингов 3 и 4 (формирование массива изображений и инициализация галереи).

      • Константин

        Спасибо за подсказку. Получилось!

  • Константин

    Скажите пожалуйста, а как можно поменять размер «тумбочек»(нижних=картинок)? Общий размер галереи понятно как поменять, а вот составляющих непонятно?

    • С помощью CSS стилей (для моего примера файл galleria.simplecoding.css):

      .galleria-thumbnails .galleria-image {
      width: 60px;
      height: 40px;
      }

      Но если собираетесь реализовать свой дизайн, а не сделать несколько мелких изменений, лучше сразу почитать материалы по созданию тем для galleria.

      • Константин

        Так то оно так. В CSS можно поменять, но при генерации там диву прописывается ещё и style и ширина меняется на 53px вместо 60. Вот я и хотел узнать где идёт этот расчёт?

        • Я на 100% не уверен, т.к. не проверял, но в коде темы нигде ширина жестко не устанавливается. Кроме того, в примере ширина миниатюр, которая прописана в style, разная и соответствует ширине картинке. Поэтому плагин может получить ширину исходя из стилей установленных либо для тега img, либо для div'а в котором он находится (div.galleria-image). Классическая тема устанавливает стили для div.galleria-image.

  • Incognito

    Как можно сделать так, чтобы галерея открывалась только при клике на изображении, при этом изображения сначала (до клика) должны выводится простой таблицей, n*m скажем? Заморачиваться лишним кодом не хочется, может есть простой способ, т.е. сделать встроенными средствами? 🙂

    • Встроенными средствами однозначно не получится. Вывод картинок в виде таблицы к Galleria отношения не имеет. Эту таблицу должен сформировать серверный скрипт. Затем вам нужно написать JS скрипт, который при клике на каждое из изображений будет открывать галерею. Работы, в принципе, не много, но если хотите полностью готовое решение, ищите плагин для вашей CMS.

      • Incognito

        Спасибо за ответ. Всё же решил остановиться на shadowbox, не так громоздок и прост в использовании.

  • taliia

    Спасибо! Я совершенный чайник, но и у меня все получилось) Скажите только пожалуйста почему может возникнуть проблема: в IE галерея пролистывается на раз, а в хроме тупит, особенно когда передвигается лента маленьких изображений(тумбочек). И как можно добавить переключение изображений клавишами и закрытие эскейпом?

    • Проблема с хромом странная, если пришлете ссылку на страницу, я попробую потестировать.

      >> Переключение изображений клавишами и закрытие эскейпом.

      Нужно установить обработчики событий клавиатуры и в них вызвать соответствующий метод Galleria.

      Должно получиться что-то вроде.

      this.bind('keyup', function(e) {
      this.next();
      });

  • Toragon

    <!—

    —>

    var imagesss = [
    здесь отрывок из вашего примера, изображение в папке images
    ];
    var gallery = $(«#gallery»);
    Galleria.loadTheme('galleria/themes/kmkclassic/galleria.classic.js');
    Galleria.run('#galleria', {
    dataSource: imagesss,
    });

    Если исп. только блок galleria, убрав теги комментариев и Galleria.run, то все работает. А из массива ни как не грузится — черный экран в блоке и все.

    • В конце
      dataSource: imagesss,
      запятой быть не должно.

      Посмотрите с помощью firebug отправляются ли вообще запросы к картинкам из галереи. И есть ли JS ошибки.

  • Дмитрий

    Владимир, скажите, а можно в Galleria реализовать слайдшоу для больших картинок — чтобы они автоматически менялись через заданные промежутки времени?

    • Да, можно. Слайдшоу запускается установкой параметра autoplay, а если у вас большие картинки просто выделите больше места на странице под галерею.

  • Vlad

    Подскажите пожалуйста, как сделать чтобы в полноэкранном режиме фотографии не обрезались по краям и всегда растягивались на всю высоту/ширину экрана?

    • Попробуйте указать стили:
      max-width: 100%;
      max-height: 100%;

  • Uriah

    Как сделать на одной странице несколько галерей. Если даже просто скопировать, то работает только первая галерея…

    • Вы не сможете создать 2 галереи с темой из этой статьи, т.к. при её разработке эта возможность предусмотрена не была. Попробуйте использовать стандартную тему.

    • Вообще создание нескольких галерей на одной странице поддерживается.

      Код будет примерно такой:
      Galleria.loadTheme('../../../../widgets/galleria/themes/classic/galleria.classic.js');

      $('#ep1').galleria({

      _show_caption: true,

      height: 450,

      clicknext: true

      });

      $('#ep2').galleria({

      _show_caption: true,

      height: 450,

      clicknext: true

      });

  • Яна Жудро

    Подскажите пожалуйста как сделать такую галерею с видео, «вам нужно найти тег object (с видео)» не нашла

    • Вам нужно вставить вместо картинки тег object со ссылкой на видео, который можно взять, например, на youtube (если сам видеоролик размещен на этом сервисе). Посмотрите пример на главной странице оф. сайта http://galleria.io/ у них в четвертом слайде размещен видеоролик.

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

    • В стандартном функционале Galleria такой функции нет. Хотя я не уверен на счет последних версий.

      Можно реализовать самостоятельно с помощью JavaScript. Общая идея следующая.
      1) показываете 2 первых картинки.

      2) «вешаете» обработчик на событие перелистывания (это может быть обработчик события click по кнопке next).
      3) в этом обработчике проверяете какая картинка отображается и, если нужно, создаете новый тег img и вставляете его в разметку галереи.

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

      • Спасибо, Владимир, я чайник в JS даже по вставлянию готовых кодов, вообщем а как увеличить Theme CSS could not load after 20 sec. «+(i.QUIRK?»Your browser is in Quirks Mode, please add a correct doctype.»:»Please download the latest theme at http://galleria.io/customer/. На мобильных не успевает загрузиться стандартная тема, где увеличить таймаут?

        Это происходит 20% не успевает грузиться, 80% все таки успевает, но 20% отказов на сайте мне не нужно с мобильных)

        • >> Quirks Mode

          Пропишите doctype в начале страницы, например,

          >> Время загрузки более 20 сек

          Я не вижу в документации настройки, которая за это отвечает. Судя по отзывам проблему иногда удавалось решить обновлением Galleria до последней версии. Но если css файл на самом деле грузится более 20 сек, то попробуйте его сжать (gzip).

          Кстати, в последних версиях есть настройка, которая отвечает за предзагрузку изображений — http://galleria.io/docs/options/preload/

  • Serapfima

    Помогите, пожалуйста!.
    я делаю сайт на hostCMS. (+wampserver)
    разархивировала Вашу папку galleria в C:wampwwwgalleria.
    в коде страничке прикрутила ссылку, появилось приглашение пройти в галерею (не работает =((

    мне не понятен пункт «Подготовка данных для галереи».
    1) Где создавать эти JS файлы?
    2) это 2 разных файла?
    3) как их обозвать, чтобы они нашлись?

    • 1) в папке, которая находится в DOCUMENT_ROOT Вашего web сервера (скорее всего, Вы в эту папку распаковали CMS).
      2) этот вопрос я не понял
      3) можно использовать имена из моего примера.