Лого www.SiteHere.ru

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

Существует большое количество разнообразных галерей для сайта. Но с появлением новых технологий, функционал и внешний вид становится всё лучше и лучше. Данная галерея для сайта использует технологию 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 — кнопки навигации по изображениям в галерее, где число маркеров соответствует числу изображений в галерее.

Вывод

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

Успехов!

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

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

Галерея для сайта с эффектом размытия 5.00/5 (100.00%) 5 голос(ов)

Понравилась статья - расскажи друзьям! :)

15 комментариев к записи
  • Владимир

    А как можно в этой галереи сделать, чтобы под каждой сменяющейся картинкой ещё и описание некое добавить и желательно, чтобы иметь возможность туда и html—теги добавлять, ну например описание в раскрыващемся списке или аккордеоне?

     
    • Юрий

      Владимир, в каждый элемент списка (строки с 3-й по 29-ю) Вы можете добавлять любые HTML теги.

       
      • Владимир

        Юрий то есть после тега img, я правильно понимаю, либо даже можно сделать обтекание картинки, так?

         
        • Юрий

          Владимир, а Вы попробуйте 🙂 !

           
          • Владимир

            Что попробовать?

             
  • Andrey

    Почему-то не отображаются фото, видны только «точки», да и то они почему-то выстроились вертикально…

     
    • Юрий

      Андрей, какой браузер Вы используете?

       
      • Andrey

        Юрий, Mozilla Firefox последней версии. А если правой кнопкой мыши нажать на область, где должно быть фото, то можно его открыть. Очень странно, почему не отображается в плагине

         
  • Аркадий

    Большое Вам человеческое спасибо!!! Перелазил 10+ сайтов с поиском хорошей на вид и легкой галереи изображений, и случайно попал на Ваш сайт. Галерею установил, все получилось более чем отлично! Если бы у Вас были реквизиты я бы и денег бы Вам отправил. Разработчик заслуживает вознаграждения! Лучшая галерея из всех что я видел!

     
    • Юрий Немец

      Спасибо, Аркадий! Рад, что у Вас все получилось установить 🙂 .

       
  • Максим

    Здравствуйте.  Этот код сразу после тега <body> образует у меня приличный такой пробел в самом верху сайта. В чем проблема? Благодарю

    <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>

     

     
    • Юрий Немец

      А Вы все стили подключили?

       
    • Анна

      У меня такая же проблема. Этот слой svg виден, куда его не засунь)

       
  • Ольга

    Отображаются картинки в столбик, а снизу кнопки. В чем может быть проблема?

     
    • Юрий Немец

      Добрый день, Ольга!

      Если изображения отображаются в столбик, то у вас не подключены стили CSS (в данном конкретном случае файл стилей), потому что изображения находятся в списке (ul), который без стилей (по умолчанию) в браузере отображается как блочный элемент, который занимает всю ширину.

       

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *