logo

Fotorama - адаптивная jQuery галерея, установка и настройка

Разместил , . Последнее изменение: 2018-01-14. / 1 комментарий

Фоторама и кошки

  1. Плюсы и минусы скрипта.
  2. Первый вариант подключения.
  3. Второй вариант подключения.
  4. Непосредственно создание галереи.
  5. Размеры контейнера.
  6. Миниатюры.
  7. HTML-код.
  8. Полноэкранный режим.
  9. Другое.

Всем привет! Сегодня мы поговорим о возможно лучшей бесплатной фотогалереи, видео и фото слайдере, поговорим о "фотораме".  Несмотря на то, что скрипт уже года 2 не поддерживается и автор переключился на проект схожей тематики  он прекрасно работает и продолжает радовать глаз.

Основные плюсы (+)

  1. Простота установки, настройки и использования. Кроме jQuery, вам понадобится подключить всего 2 файла, а для вывода галереи там нужно указать только ссылки на картинки.
  2.  Незначительно влияет на скорость загрузки сайта.
  3. Адаптивность. Ваша галерея выглядит хорошо и на телефоне, и на ноутбуке, и даже на экране телевизора.
  4. Обилие настроек и функций, подключаемых отдельно, через атрибуты HTML тегов.
  5. Поддержка сенсорных устройств.
  6. Поддержка видео.
  7. Возможность ленивой загрузки картинок.
  8. И много-много всего другого, что придётся по душе искушённому пользователю.

Минусы (-)

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

Первый вариант подключения Fotorama

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

  1. Проверяем наличие jQuery. Зайдите в исходный код сайта (сочетание клавиш «Ctrl + U») → пытаемся найти примерно такую строчку:
    https://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js

    Для облегчения поиска используйте «Ctrl + F». Если заветной строки нет, то вам придётся подключить jQuery. На WordPress это можно сделать вставив код, расположенный ниже, в файл функций темы (functions.php). На самом деле этот скрипт используется при конфликтах разных версий jQuery и действует он по такой схеме: удаляет зарегистрированный ранее jQuery,  регистрирует новый, выводит скрипт. Актуальные версии библиотеки jQuery можно найти тут.

    Можно просто вставить такую строку между <head> и </head>:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  2.  Подключаем fotorama.css и fotorama.js. Вставьте следующий код между тегами <head> и </head>, на WordPress это делается в файле заголовка темы (header.php).
    <!-- fotorama.css & fotorama.js. -->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
  3. На этом подключение галереи первым способом окончено. Как использовать написано в разделе "Непосредственно создание галереи".

Второй вариант подключения [шорткод + Autoptimize]

В этом варианте подключения файлы скрипта будут выводиться только на нужных страницах через [шорткод]. А если вы используете плагин Autoptimize, то код скрипта в придачу интегрироваться в файлы темы. Эти нехитрые манипуляции должны увеличить скорость загрузки сайта.

  1. Проверяем наличие jQuery. Так же как и в первом варианте, смотрите выше.
  2. Скачиваем файлы фоторамыраспаковываемзагружаем в отдельную папку в корне сайта.
  3. Для создания шорткода в файл функций темы (functions.php) вставляем код, расположенный ниже, изменяем ссылки к файлам на свои.
    function sd() {
    return '
    <script type="text/javascript" src="//pupi-boy.ru/путь_к_файлу/fotorama.js"></script>
    <link type="text/css" href="//pupi-boy.ru/путь_к_файлу/fotorama.css" rel="stylesheet" />
    ';
    }
    add_shortcode('foto','sd');
  4. Теперь при написании статьи в конце вводите шорткод [foto]

Непосредственно создание галереи

Галерея выводится HTML кодом с помощью контейнера <div> c class="fotorama", в контейнере размещаются код вывода изображения (<img>) либо ссылка на изображение(<a>). При написании статьи на движке WordPress переключите редактор в текстовый режим и введите контейнер <div> c class="fotorama".

Выглядит это так:

<div class="fotorama">
 <img src="https://pupi-boy.ru/1.jpg">
 <img src="https://pupi-boy.ru/2.jpg">
 <img src="https://pupi-boy.ru/3.jpg">
 <img src="https://pupi-boy.ru/4.jpg"></div>

Или так (нумерация ссылок необязательна):

<div class="fotorama">
<a href="https://pupi-boy.ru/1.jpg">1</a>
<a href="https://pupi-boy.ru/2.jpg">2</a>
<a href="https://pupi-boy.ru/3.jpg">3</a>
<a href="https://pupi-boy.ru/4.jpg">4</a></div>
5
1
2
3
4

Примеры настроек Fotorama

Размеры контейнера

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

<div class="fotorama"
 data-width="400"
 data-height="340">
 <img src="10.jpg">
 <img src="20.jpg"></div>

Существуют и другие настройки:

 data-width="98%"      //относительная ширина
 data-ratio="800/600"  //соотношение сторон
 data-minwidth="420"   // мин. ширину
 data-maxwidth="900"  // макс. ширину
 data-minheight="320"  // мин. высота
 data-maxheight="100%  // относительная макс. высота
 data-height="100%     // относительная высота
Миниатюры

За миниатюры отвечает data-nav="thumbs"

<div class="fotorama"
 data-nav="thumbs">
 <img src="10.jpg">
 <img src="20.jpg"></div>

Но такой способ не очень эффективен, так как скрипту приходится загружать сразу все фотографии для генерации миниатюр, поэтому будет рациональнее заранее подготовить маленькие копии картинок. WordPress автоматически делает миниатюры, мы их и будем использовать. Чтобы получить ссылку на миниатюру добавьте -70x70 к названию файла (https://pupi-boy.ru/wp-content/uploads/2017/11/27ltl9eRXk.jpg  →  https://pupi-boy.ru/wp-content/uploads/2017/11/27ltl9eRXk-70x70.jpg).

<div class="fotorama"
 data-nav="thumbs">
 <a href="/images/10.jpg"><img src="/images/10_thumb.jpg"></a>
 <a href="/images/20.jpg"><img src="/images/20_thumb.jpg"></a>
</div>
Показать / Скрыть пример


По умолчанию миниатюра - 64 × 64. Откорректировать этот параметр можно с помощью data-thumbwidth (ширина) и data-thumbheight (высота). Если вам нужно чтобы миниатюра имела свой собственный размер, то задайте параметры width и height для файла миниатюры:

<div class="fotorama"
data-nav="thumbs">
<a href="10.jpg"><img src="10_thumb.jpg" width="77" height="55"></a>
<a href="20.jpg"><img src="20_thumb.jpg" width="43" height="191"></a>
</div>
HTML-код + Fotorama

Фоторама отлично обрабатывает HTML и CSS, что значительно расширяет функционал скрипта. Работайте со ссылками, блоками, таблицами, абзацами, пишите CSS и многое другое. Ниже представлены некоторые примеры работы галереи. Если визуальная часть не отображается, то нажмите кнопку "Result".

Показать / Скрыть примеры

See the Pen ooppwb by Ivanov Klim (@DreamerKlim) on CodePen.

See the Pen aVEEVb by Ivanov Klim (@DreamerKlim) on CodePen.

Полноэкранный режим
data-allowfullscreen="true"   //в окне браузера
data-allowfullscreen="native" //на весь монитор

Существует возможность добавить отдельное  большое изображение для полноэкранного режима через "data-full:"

<div class="fotorama"
 data-allowfullscreen="native">
 <img src="10.jpg" data-full="10_full.jpg">
 <img src="2.jpg" data-full="20_full.jpg">
</div>
Показать / Скрыть пример
5
1
2
3
4
Другое
data-autoplay="true"      //автозапуск

data-autoplay="3000"      //интервал между слайдами в мс

data-caption="One"        //комментарии к картинкам

data-keyboard="true"      //навигация стрелками

data-shuffle="true"       //изображения в разнобой

data-navposition="top"    //миниатюры вверху

data-loop="true"          //циклическая прокрутка

Попробуем все соединить и добавить видео
<div class="fotorama" data-caption="One" data-keyboard="true"
data-shuffle="true" data-navposition="top" data-autoplay="true"
data-loop="true">
<img src="10.jpg" data-caption="какой-то коммент 1">
<img src="20.jpg" data-caption="какой-то коммент 2">
<a href="https://youtu.be/MKlx1DLa9EA">To find work you love</a></div>

1 комментарий Добавить комментарий

  • Нормас. Помогло, спасибо :3

Оставить комментарий

* Возможна анонимная отправка комментария.

Согласен с политикой конфиденциальности *

Уведомлять мня о новых комментариях