Простое слайдшоу с миниатюрами WP

Простое слайдшоу с миниатюрами WP

Вчера мне захотелось сделать очень простую галерею (или слайдшоу?) на одном из моих блогов. Все мои блоги располагаются на базе самой популярной cms - wordpress. И знаете что? Оказывается это сделать очень сложно! Да, да. Очень трудно найти хороший плагин для организации простого слайдшоу! Задача состояла в том, чтобы плагин умел: а) удобно управлять галереями (на каждой странице разная) и б) Так как это слайдшоу, то выводить миниатюры других картинок (чтобы получить галерею как на картинке к этому посту - кстати, вот такую галерею мне нужно было реализовать).

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

Давайте теперь научимся делать такое простое слайдшоу.

Сразу хочу сказать, что для организации такой галереи готовое решение не подошло. Пришлось допиливать плагин. Но это очень просто - буквально заменить 1 строчку. Поэтому не пугайтесь.

Для начала нам необходимо установить плагин этой галереи. Он называется - Slideshow Gallery.

После установки, в блоге появится пункт: Slideshow. Через него можно управлять слайдами, галереями и производить различные настройки. Хоть там и по английски, мне кажется, что трудностей возникнуть не должно - все интуитивно понятно.

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

Галереи можно создавать в неограниченном количестве (пункт управление галереями). Вводите название и все:) Галерея создана. Вставить галерею можно в любую запись или страницу с помощью шорткода вида: [slide show gallery_id="1"] (между slide и show пробела нет). О том, как вставить галерею в шаблон можно почитать тут - делается по аналогии.

А теперь о моей доработке

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

Меня такое положение дел полностью не устраивает. Мне нравится, когда активному слайду (а точнее миниатюре) добавляется класс active, а неактивным - noactive. Именно эту доработку я и сделал, чтобы спокойно сделать оформление через стили css.

Если вы хотите последовать моему примеру, то переходим в пункт Плагины-Редактор нашей админ-панели, выбираем плагин для изменения Slideshow Gallery и нажимаем выбрать.

Далее в правой колонке ищем файл slideshow-gallery/js/gallery.js. Выбираем его. Откроется его исходный код.

Копирует отсюда эту строку: a[x].style.borderColor=x!=s?'':this.active. Нажимаем ctrl+f в редакторе файла и вставляем скопированную строку. Если совпадение найдено, то вы переместитесь на 99 строку файла, где и будет содержаться искомая строка. Меняем ее на a[x].className = (x != s) ? 'noactive' : 'active'; и нажимаем Обновить файл.

Вот и все:) Теперь маленькой картинке, по которой вы кликнули, чтобы показать ее, будет прилетать класс active. Всем остальным маленьким картинкам (превьюхам) будет назначаться класс noactive.

Те, кто не хочет ничего делать, но хочет плагин - могут скачать с доработкой отсюда.

26.03.17
Для просмотра сайта обновите браузер.