Галерея является одним из вспомогательных элементов, отвечающих за дизайн вашего сайта. Некоторые предпочитают не заморачиваться по этому поводу, в то время, как другие занимаются поиском подходящего плагина для блога на Wordress. Мы же рассмотрим сразу несколько форматов, в которых может быть задействована галерея для сайта удовлетворяющая вашим требованиям.
Плагин галереи
Если у вас нет времени разбираться в тонкостях верстки HTML, стилях CSS и скриптах Javascript, то самый идеальный вариант использовать уже готовые шаблоны галерей. На данный момент мы говорим о плагине. Отмечу сразу, что описанный здесь плагин я использовал лично, и вполне был им доволен(пока не написал свой на картинке выше). Если у вас блог на WordPress, то можете смело устанавливать этот плагин, если нет, то на офф сайте или на просторах интернета можно найти отдельные файлы для вставки на свой сайт.
Fancybox
Крутой плагин, который позволяет вам за несколько секунд почувствовать его максимально легкий и удобный функционал. Я бы поставил его на первом месте для каждого блогера. Вы можете сами посетить офф сайт Fancybox плагина и сразу оценить его работу. Либо же его можно установить из панели инструментов WordPress по поиску «Easy FancyBox». Любой из этих вариантов вам подойдет.
DDevs Media Gallery
Возможно, вы до этого еще не встречали нигде данного плагина, потому как он не такой уж и популярный(хотя, не знаю почему). Наверное, потому как его никто не рекламирует, у него даже официального сайта нет. Но в любом случае его можно скачать из панели инструментов на WP.
Установка до боли простая, далее необходимо активировать плагин и наслаждаться созданием галерей. Однако, здесь один нюанс, для создания галереи понадобится вместо привычного кода
[ gallery id=" " ]
добавлять префикс «ddm».
[ ddmgallery id=" " ]
Если у вас плохо с английским, то могут возникнуть проблемы с пониманием этого нюанса(возможно, по этой причине его мало кто использует). Но в описании все четко описано, поэтому вот ссылка на плагин. Уверен, у вас все получится!
Создание собственной галереи
Когда ты долгое время копаешься в коде, еще и чужом, то это просто взрывает мозг. Я думаю, новички меня поймут, а профи тем более. Когда ты мало чего соображаешь в веб-программировании, сайтостроении, а здесь еще и Javascript, использование Jquery, постоянный поиск решения в noConflict() – это доставляет кучу проблем. Но эти проблемы отпадают все сразу, когда весь код пишешь своими руками. Именно так и поступил я.
HTML часть
Для начала нам понадобится простой вывод картинок, обычно это миниатюры. В WP миниатюры в галереи выводятся по умолчанию каждая размером в 150px. Можно сделать аналог и для своего сайта, либо же у вас уже есть готовый шаблон, если вы на бесплатном движке. Каждая картинка должна быть обернута ссылкой ведущей на файл картинки в полном размере. Примерно это выглядит так:
<a href="link_to_big_img.jpg"><img src="link_to_small_img.jpg" /></a>
Javascript часть
Без JS ваша галерея ну никак не удастся. Необходимо производить какие либо действия по клику(создание и добавление элементов на страницу), дабы не увеличивать код страницы и не нагружать сервер. Добавления эффектов в основном можно добиться посредством CSS, но JS в создании галереи — это одна из основополагающих. Итак, скриптом мы должны будем обрабатывать клики по картинкам. Если галерея простая, и одно из изображений уже выводится вверху над галереей, то достаточно его атрибут «src» заменять ссылкой из элемента по которому был произведен клик.
gallery.onclick = function(e) {
var target = e.target; // где был клик?
if (target.tagName != 'A') return; // не ссылка? тогда продолжаем
doSomeThing(target.href); // получили ссылку и вызываем функцию замены изображения
};Посредством всплытия перебираем элементы, пока не найдем нас интересующий и не вытянем из него необходимый атрибут. Таким образом, мы уже получаем функционирующую галерею.
CSS часть
Для того, чтобы наши эффекты перехода от одного изображения к другому были более красивыми, достаточно воспользоваться анимацией css. Для этого необходимо классам элементов задать свойство «transition» с необходимой задержкой анимации.
#gallery img{
transition: opacity 0.5s;
}А вот вам в качестве примера готовая разработанная мною галерея с татуированными очаровательными девушками:
Итог: Это был беглый обзор возможных вариантов галереи, но идею я вам подал. Каждый выбирает для себя подходящий вариант и принимается за работу. 
оцени статью Подписка на обновления:
