Красивая фотогалерея для WordPress и не только

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

Установив плагин и создав стандартную галерею, я сразу же получил красивый слайдер. Выглядело это так:

Думаю, что для многих проектов подошел бы и такой вариант. Но мне надо было с миниатюрками внизу. Добавляю в стандартный шорткод галереи [gallery] атрибут nav=»thumbs» и получаю то, что просили:

Плагин включает в себя все возможности встроенного вордпрессовского шорткода [gallery]. Можно использовать стандартные атрибуты ids, orderby, order, id, include, exclude.
Например вывод определенных фото в галерее: [gallery ids="1,2,3"]

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

Если на какой-то странице требуется отключить фотораму, добавляем fotorama=»false»:
[gallery ids="1,2,3" fotorama="false"] Будет показана стандартная вордпрессовская галерея

Thumbnails
Чтобы заменить точки на миниатюры добавляем в шорткод nav=»thumbs»:
[gallery ids="1,2,3" nav="thumbs"]

Fullscreen
Разрешить использование полноэкранного режима:
[gallery ids="1,2,3" allowfullscreen="true"]

Fit
Подгонка размеров. Возможны 4 варианта: contain, cover, scaledown, none.
[gallery ids="1,2,3" fit="cover"]

Transition
Переход между слайдами — slide или crossfade:
[gallery ids="1,2,3" transition="crossfade"]

Hash
Если hash=»true» — в урлах добавиться хеш-ссылка на изображение
[gallery ids="1,2,3" hash="true"] Лучше использовать для одной фоторамы на странице.

Loop
Зациклить показ галереи loop=»true»:
[gallery ids="1,2,3" loop="true"]

Autoplay
Автозапуск слайдшоу: autoplay=»true». По умолчанию время показа одной фотографии 5 секунд. Можно указать свою длительность в милисекундах, например 3 секунды:
[gallery ids="1,2,3" autoplay="3000"] По умолчанию при клике на фото слайдшоу останавливается, если это не нужно добавляем: stopautoplayontouch=»false».

Shuffle
Перемешать фото: shuffle=»true»:
[gallery ids="1,2,3" shuffle="true"]

Keyboard
Включить возможность просмотра фото с помощью стрелок на клавиатуре keyboard=»true»:
[gallery ids="1,2,3" keyboard="true"] Работает только для первой фоторамы на странице.

Arrows, click, swipe
Просмотр фото с помощью стрелок, клика по фото и перетаскивания — arrows, click, and swipe:
[gallery ids="1,2,3" arrows="true" click="true" swipe="false"]

Navigation position
Отображать навигационные точки или миниатюры над фото: navposition=»top»:
[gallery ids="1,2,3" navposition="top"] Для скрытия навигации: nav=»false».

Так же можно добавлять любые атрибуты перечисленные в документации
только без префикса data-. Хотелось бы отметить, что документация тоже простая, с демо и примерами.

Чтобы каждый раз не править шорткод [gallery], можно создать свои настройки по умолчанию.
Для этого нужно создать в папке /wp-content/plugins/ файл fotoramaDefaults.js и в нем прописать нужные атрибуты. Например такие:

fotoramaDefaults = {
  nav: 'thumbs',
  allowfullscreen: 'native',
  transition: 'crossfade',
  loop: true,
  keyboard: true
}

Примечание: файл создается не в папке плагина, а именно в папке plugins – это для того, чтоб при обновлении плагина ваши настройки не сбились.

Небольшое видео в котором показано, как работать с плагином Fotorama:

Требования к плагину: WordPress 3.5 и выше
Страница плагина в репозитории: https://wordpress.org/plugins/fotorama/
Или качайте по прямой ссылке

Ну а кто не работает с WordPress может заюзать обычную jQuery версию Фоторамы.
Скачать ее можно на оф. сайте