Галерея для сайта

2206

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

Галерея для сайта

Плагин галереи

Если у вас нет времени разбираться в тонкостях верстки HTML, стилях CSS и скриптах Javascript, то самый идеальный вариант использовать уже готовые шаблоны галерей. На данный момент мы говорим о плагине. Отмечу сразу, что описанный здесь плагин я использовал лично, и вполне был им доволен(пока не написал свой на картинке выше). Если у вас блог на WordPress, то можете смело устанавливать этот плагин, если нет, то на офф сайте или на просторах интернета можно найти отдельные файлы для вставки на свой сайт.

Fancybox

Крутой плагин, который позволяет вам за несколько секунд почувствовать его максимально легкий и удобный функционал. Я бы поставил его на первом месте для каждого блогера. Вы можете сами посетить офф сайт Fancybox плагина и сразу оценить его работу. Либо же его можно установить из панели инструментов WordPress по поиску «Easy FancyBox». Любой из этих вариантов вам подойдет.

Плагин галереи Fancybox

DDevs Media Gallery

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

DDevs Media Gallery

Установка до боли простая, далее необходимо активировать плагин и наслаждаться созданием галерей. Однако, здесь один нюанс, для создания галереи понадобится вместо привычного кода

[ 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;
}

А вот вам в качестве примера готовая разработанная мною галерея с татуированными очаровательными девушками:

Итог: Это был беглый обзор возможных вариантов галереи, но идею я вам подал. Каждый выбирает для себя подходящий вариант и принимается за работу. ;)

0


не скупись ;-) ставь лайк
Подписка на обновления:
Автор блога Рябухин Максим

Я фрилансер веб-разработчик. Последние несколько лет занимаюсь версткой и веб-программированием на PHP и Javascript. Если вам понадобится помощь с блогом Wordpress, либо в создании любой сложности и любым дизайном сайта, я всегда рад помочь с версткой, либо отдельными разработками. Обращайтесь ко мне за моими услугами.

связаться

Вместе с этим советую почитать:

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

у меня есть сайт
;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

комментариев: 0
показать все


Как вам новый дизайн сайта?

Курс Бери и Зарабатывай!

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

Узнать больше!

Курс по соц. сетям