X
Юрий Немец

Галерея для сайта с эффектом размытия

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

Еще галереи изображений для сайта:

Реальный пример галереи:

Посмотреть примерСкачать

А вот как выглядит размытие:

Как установить галерею для сайта?

HTML часть

Подключаем между тегами <head> </head> стили (gallery.css) и скрипты (jquery.min.js и TweenMax.min.js):

HTML КОД
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:

HTML КОД
1

<script src="js/gallery.js"></script>

Со всеми стилями и библиотеками мы закончили и переходим непосредственно к структуре. И сразу после открывающегося тега <body> необходимо расположить следующий код:

HTML КОД
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, где располагаются все изображения галереи:

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 — кнопки навигации по изображениям в галерее, где число маркеров соответствует числу изображений в галерее.

Вывод

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

Успехов!

Источник: Оригинал

С Уважением, Юрий Немец

Категории: jQuery