Галерея для сайту з ефектом розмиття
Існує велика кількість різноманітних галерей для сайту. Але з появою нових технологій, функціонал і зовнішній вигляд стає все краще і краще. Дана галерея для сайту використовує технологію SVG (мова розмітки масштабована векторна графіки), яка дозволяє створити гарний ефект розмиття при зміні зображень галереї.
Ще галереї зображень для сайту:
- Галерея фотографій (15 креативних ефектів) - галереї зображень
- Галерея як у Google
- Галерея зображень на jQuery з цікавим ефектом
- Інтерактивна 3D галерея на CSS і jQuery
- Оригінальна анімована галерея на CSS3
Реальний приклад галереї:
Подивитися прімерСкачать
А ось як виглядає розмиття:
Як встановити галерею для сайту?
HTML частина
Підключаємо між тегами стилі (gallery.css) І скрипти (jquery.min.js і TweenMax.min.js):
HTML КОД123 | lt;link rel="Stylesheet" type="Text / css" href="Css / gallery.css" /gt;lt;script src="Js / TweenMax.min.js"gt; lt;/scriptgt;lt;script src="Js / jquery.min.js"gt; lt;/scriptgt; |
А потім перед закриває тегом вставити скрипт gallery.js:
HTML КОДВідео: jQuery lightGallery - ефектна галерея для сайту
1 | lt;script src="Js / gallery.js"gt; lt;/scriptgt; |
З усіма стилями і бібліотеками ми закінчили і переходимо безпосередньо до структури. І відразу після відкривається тега необхідно розташувати наступний код:
HTML КОД1234567 | "Http://w3.org/2000/svg" version="1.1" class="Filters hidden"gt; |
Йдемо далі і дивимося з чого складається структура HTML, де розташовуються всі зображення галереї:
HTML КОД123456789101112131415161718192021222324252627282930313233343536373839404142 | lt;div class="Gallery"gt;lt;ul class="Gallery-pictures"gt;lt;li class="Gallery-picture"gt;lt;img src="Img / 1.jpg" alt="Img01"gt;lt;/ligt;lt;li class="Gallery-picture"gt;lt;img src="Img / 2.jpg" alt="Img02"gt;lt;/ligt;lt;li class="Gallery-picture"gt;lt;img src="Img / 3.jpg" alt="Img03"gt;lt;/ligt;lt;li class="Gallery-picture"gt;lt;img src="Img / 4.jpg" alt="Img04"gt;lt;/ligt;lt;li class="Gallery-picture"gt;lt;img src="Img / 5.jpg" alt="Img05"gt;lt;/ligt;lt;li class="Gallery-picture"gt;lt;img src="Img / 6.jpg" alt="Img06"gt;lt;/ligt;lt;li class="Gallery-picture"gt;lt;img src="Img / 7.jpg" alt="Img07"gt;lt;/ligt;lt;li class="Gallery-picture"gt;lt;img src="Img / 8.jpg" alt="Img08"gt;lt;/ligt;lt;li class="Gallery-picture"gt;lt;img src="Img / 9.jpg" alt="Img09"gt;lt;/ligt;lt;/ulgt;lt;div class="Gallery-pagination"gt;lt;button class="Gallery-pagination-dot"gt; lt;/buttongt;lt;button class="Gallery-pagination-dot"gt; lt;/buttongt;lt;button class="Gallery-pagination-dot"gt; lt;/buttongt;lt;button class="Gallery-pagination-dot"gt; lt;/buttongt;lt;button class="Gallery-pagination-dot"gt; lt;/buttongt;lt;button class="Gallery-pagination-dot"gt; lt;/buttongt;lt;button class="Gallery-pagination-dot"gt; lt;/buttongt;lt;button class="Gallery-pagination-dot"gt; lt;/buttongt;lt;button class="Gallery-pagination-dot"gt; lt;/buttongt;lt;/divgt;lt;/divgt; |
Пару слів про структуру галереї для сайту:
- Рядок: з 2 по 30 - знаходиться список зображень, які відображаються в галереї.
- Рядки: з 31 по 41 - кнопки навігації по зображеннях в галереї, де число маркерів відповідає числу зображень в галереї.
висновок
Ще одна дуже симпатична і оригінальна галерея для сайту. Встановити її досить просто, але і виглядає вона красиво. До речі, забув згадати - зображення можна перегортати утримуючи курсор миші, як би перетягуючи зображення.
Успіхів!
джерело: оригінал
Відео: Супер стильна фото галерея з ефектом живого акордеона на сайт wordpress
З повагою, Юрій Німець