Улучшаем wordpress-галлерею

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

Встановивши плагін і створивши стандартну галерею, я відразу ж отримав гарний слайдер. Виглядало це так:

Думаю, що для багатьох проектів підійшов би і такий варіант. Але мені треба було з мініатюрами внизу.

Додаю в стандартний шорткод галереї атрибут nav=”thumbs” і отримую те, що просили:

Плагін включає в себе всі можливості вбудованого вордпрессовского шорткода. Можна використовувати стандартні атрибути ids, orderby, order, id, include, exclude.

Наприклад виведення певних фото в галереї:

Додаючи атрибути плагіна в шорткод можна виводити різні варіанти галерей для різних сторінок:

• Якщо на якійсь сторінці потрібно вимкнути фотораму, додаємо 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:

•  Hash

Якщо hash = “true” – в урлах додастся хеш- посилання на зображення

Краще використовувати для однієї фоторами на сторінці.

• Loop

Зациклити показ галереї  loop=”true”:

•  Autoplay

Автозапуск слайдшоу: autoplay=”true”. За замовчуванням час показу однієї фотографії 5 секунд. Можна вказати свою тривалість в мілісекундах, наприклад 3 секунди:

За замовчуванням при кліці на фото слайдшоу зупиняється, якщо це не потрібно додаємо: stopautoplayontouch=”false”.

• Shuffle

Перемішати фото: shuffle=”true”:

•  Keyboard

Включити можливість перегляду фото за допомогою стрілок на клавіатурі keyboard=”true”:

Працює тільки для першої фоторами на сторінці.

• Arrows, click, swipe

Перегляд фото за допомогою стрілок, кліка по фото і перетягування – arrows, click, and swipe:

• Navigation position

Відображати навігаційні точки або мініатюри над фото: navposition=”top”:

Для приховування навігації: nav=”false”.

Так само можна додавати будь-які атрибути перераховані в документації, тільки без префікса data -.

*Хотілося б відзначити, що документація теж проста, з демо і прикладами.

*Щоб кожен раз не правити шорткод, можна створити свої налаштування за замовчуванням.
Для цього потрібно створити в папці: wp-content/plugins / файл fotoramaDefaults.js і в ньому прописати потрібні атрибути.

Наприклад такі:

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

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