Онилайт
с 9:00 до 21:00
info@onilite.ru

Адаптивная галерея на jquery

Виктор Черников
11.09.2018

Скачайте готовую галерею

Если вам нужна адаптивная галерея на jquery, то вам отлично подойдёт данный вариант. Данная галерея построена на bootstrap 4, но вы можете изменить html структуру на своё усмотрение и стилизовать согласно вашему дизайну. Если вы новичок в программировании, то можете просто разместить данные коды в соответствующие места или скачать архив с кодами, с уже готовыми подключениями.

Скачать zip-архив

Как подключить данную галерею

ВАЖНО: Для того чтобы адаптивная галерея на jquery работала необходимо подключить библиотеки bootstrap 4 (скачать) и jquery (скачать) соответственно.

1. Подключить библиотеки можно в теге <head></head>. Подключения выглядят так:

2. По умолчанию галерея имеет структуру следующего вида. Просто разместите следующий код в html-документе в тело сайта в тег <body></body>

html

Вы можете изменить структуру и внешний вид миниатюр для галереи, главное для контейнера с миниатюрами не забыть назначить класс «hc_gallery_box» и для каждой миниатюры класс «hc_gallery_img» и атрибут «data-src» с url-адресом слайда — это необходимо для работы скрипта. Картинку для миниатюры вы можете назначить как через «background» так и через «src» для тега «img». url-адрес миниатюры может быть как на основное изображение так и на его копию с меньшими размерами для более быстрой загрузки страницы. В атрибут «data-src» необходимо разместить url-адрес того изображения, которое должно появляться при нажатии на миниатюру.

3. Далее подключите стили для галереи в отдельный файл и разместите в него следующий код

css

4. И наконец разместите данный javascript-код в отдельный файл и подключите его

javascript

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

Вы можете скачать архив с файлами.

Скачать zip-архив

Интересно почитать

Создание сайта с каталогом

Функциональные особенности Сайт каталог судя из названия оснащён основным инструментом для предоставления подробной информации…

Вёрстка сайта по PSD макету

Основы вёрстки После разработки дизайна вторым по значимости этапом создания сайта является вёрстка. В…

Комментарии и отзывы

Ещё нет комментариев к данной записи...


Добавить комментарий

Для комментирования в один клик необходим вход или регистрация.

Заявка на обратную связь
Нажимая на кнопку, вы даете согласие на обработку персональных данных
+7 (937) 245-81-91
с 9:00 до 21:00
info@onilite.ru