Ноябрь 4, 2019 Запись была обновлена
Галерея для сайта с эффектом размытия
Существует большое количество разнообразных галерей для сайта. Но с появлением новых технологий, функционал и внешний вид становится всё лучше и лучше. Данная галерея для сайта использует технологию SVG (язык разметки масштабируемой векторной графики), которая позволяет создать красивый эффект размытия при смене изображений галереи.
Еще галереи изображений для сайта:
- Галерея фотографий (15 креативных эффектов) — галереи изображений
- Галерея как у Google
- Галерея изображений на jQuery с интересным эффектом
- Интерактивная 3D галерея на CSS и jQuery
- Оригинальная анимированная галерея на CSS3
Реальный пример галереи:
Посмотреть примерСкачать
А вот как выглядит размытие:
Как установить галерею для сайта?
HTML часть
Подключаем между тегами <head> </head> стили (gallery.css) и скрипты (jquery.min.js и TweenMax.min.js):
1 2 3 | <link rel="stylesheet" type="text/css" href="css/gallery.css" /> <script src="js/TweenMax.min.js"></script> <script src="js/jquery.min.js"></script> |
А затем перед закрывающим тегом </body> вставить скрипт gallery.js:
1 | <script src="js/gallery.js"></script> |
Со всеми стилями и библиотеками мы закончили и переходим непосредственно к структуре. И сразу после открывающегося тега <body> необходимо расположить следующий код:
1 2 3 4 5 6 7 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filters hidden"> <defs> <filter id="blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="0,0" /> </filter> </defs> </svg> |
Идем дальше и смотрим из чего состоит структура HTML, где располагаются все изображения галереи:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <div class="gallery"> <ul class="gallery-pictures"> <li class="gallery-picture"> <img src="img/1.jpg" alt="img01"> </li> <li class="gallery-picture"> <img src="img/2.jpg" alt="img02"> </li> <li class="gallery-picture"> <img src="img/3.jpg" alt="img03"> </li> <li class="gallery-picture"> <img src="img/4.jpg" alt="img04"> </li> <li class="gallery-picture"> <img src="img/5.jpg" alt="img05"> </li> <li class="gallery-picture"> <img src="img/6.jpg" alt="img06"> </li> <li class="gallery-picture"> <img src="img/7.jpg" alt="img07"> </li> <li class="gallery-picture"> <img src="img/8.jpg" alt="img08"> </li> <li class="gallery-picture"> <img src="img/9.jpg" alt="img09"> </li> </ul> <div class="gallery-pagination"> <button class="gallery-pagination-dot"></button> <button class="gallery-pagination-dot"></button> <button class="gallery-pagination-dot"></button> <button class="gallery-pagination-dot"></button> <button class="gallery-pagination-dot"></button> <button class="gallery-pagination-dot"></button> <button class="gallery-pagination-dot"></button> <button class="gallery-pagination-dot"></button> <button class="gallery-pagination-dot"></button> </div> </div> |
Пару слов о структуре галереи для сайта:
- Строка: со 2 по 30 — находится список изображений, которые отображаются в галерее.
- Строки: с 31 по 41 — кнопки навигации по изображениям в галерее, где число маркеров соответствует числу изображений в галерее.
Вывод
Еще одна очень симпатичная и оригинальная галерея для сайта. Установить ее достаточно просто, но и выглядит она красиво. Кстати, забыл упомянуть — изображения можно перелистывать удерживая указатель мыши, как бы перетаскивая изображение.
Успехов!
Источник: Оригинал
С Уважением, Юрий Немец
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
А как можно в этой галереи сделать, чтобы под каждой сменяющейся картинкой ещё и описание некое добавить и желательно, чтобы иметь возможность туда и html—теги добавлять, ну например описание в раскрыващемся списке или аккордеоне?
Владимир, в каждый элемент списка (строки с 3-й по 29-ю) Вы можете добавлять любые HTML теги.
Юрий то есть после тега img, я правильно понимаю, либо даже можно сделать обтекание картинки, так?
Владимир, а Вы попробуйте 🙂 !
Что попробовать?
Почему-то не отображаются фото, видны только «точки», да и то они почему-то выстроились вертикально…
Андрей, какой браузер Вы используете?
Юрий, Mozilla Firefox последней версии. А если правой кнопкой мыши нажать на область, где должно быть фото, то можно его открыть. Очень странно, почему не отображается в плагине
Большое Вам человеческое спасибо!!! Перелазил 10+ сайтов с поиском хорошей на вид и легкой галереи изображений, и случайно попал на Ваш сайт. Галерею установил, все получилось более чем отлично! Если бы у Вас были реквизиты я бы и денег бы Вам отправил. Разработчик заслуживает вознаграждения! Лучшая галерея из всех что я видел!
Спасибо, Аркадий! Рад, что у Вас все получилось установить 🙂 .
Здравствуйте. Этот код сразу после тега <body> образует у меня приличный такой пробел в самом верху сайта. В чем проблема? Благодарю
А Вы все стили подключили?
У меня такая же проблема. Этот слой svg виден, куда его не засунь)
Отображаются картинки в столбик, а снизу кнопки. В чем может быть проблема?
Добрый день, Ольга!
Если изображения отображаются в столбик, то у вас не подключены стили CSS (в данном конкретном случае файл стилей), потому что изображения находятся в списке (ul), который без стилей (по умолчанию) в браузере отображается как блочный элемент, который занимает всю ширину.