Gridzy.Gallery
Бібліотека JavaScript
Найдивовижніше фото, яке я знайшов. Нарешті хтось розуміє, як це робити ПРАВИЛЬНО!
Майло Персіч – користувач бібліотеки
Швидкий аналіз
Відеоурок тривалістю 1 хвилина
Дізнайтеся це всього за хвилину:
Базове використання
Конфігурація
Фільтри
Зовнішній вигляд
Стилі підписів
Попередньо визначені стилі підписів для простих і швидких рішень
Наведіть курсор на зображення, щоб побачити налаштований стиль підписів. Пограйте з кнопками та кольорами, щоб налаштувати показаний вбудований стиль.
Теги та фільтри
Для більш структурованого відображення зображень
Вбудована система фільтрів надзвичайно гнучка. Той факт, що CSS-селектори використовуються для фільтрації, фактично дозволяє використовувати майже будь-який тип фільтра.
Висока сумісність
Можна використовувати з багатьма лайтбоксами
Поєднайте галерею з будь-яким лайтбоксом. Імовірність того, що він сумісний, становить майже 100%. Клацніть зображення, щоб побачити лайтбокс PhotoSwipe як приклад.
Дуже гнучкий
Створення власних стилів
Якщо ви знайомі з CSS, ви можете стилізувати елементи галереї так, як хочете.
CSS показаного прикладу:
/* CSS class: "gridzySkin-custom-sepia" */
@property --gridzySkin-custom-sepia--filter-sepia {
initial-value: 1;
inherits: true;
syntax: "<number>";
}
@property --gridzySkin-custom-sepia--filter-contrast {
initial-value: 1;
inherits: true;
syntax: "<number>";
}
.gridzySkin-custom-sepia > .gridzyItem {
position: relative;
overflow: unset;
margin: -10px;
border: 10px solid #fff;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
border-radius: 10px;
}
.gridzySkin-custom-sepia > .gridzyItem *:not(.gridzyCaption) {
display: inline;
}
.gridzySkin-custom-sepia > .gridzyItem .gridzyCaption * {
display: initial;
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n) {
transform: rotate(-1deg);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n+1) {
transform: rotate(-.5deg);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n+2) {
transform: rotate(1deg);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n+3) {
transform: rotate(.5deg);
}
.gridzySkin-custom-sepia .gridzyImage {
position: relative;
vertical-align: middle;
border-radius: 3px;
--gridzySkin-custom-sepia--filter-sepia: 1;
--gridzySkin-custom-sepia--filter-contrast: .7;
filter: sepia(var(--gridzySkin-custom-sepia--filter-sepia)) contrast(var(--gridzySkin-custom-sepia--filter-contrast));
transition: --gridzySkin-custom-sepia--filter-sepia .6s, --gridzySkin-custom-sepia--filter-contrast .6s;
}
.gridzySkin-custom-sepia > .gridzyItem:hover .gridzyImage {
--gridzySkin-custom-sepia--filter-sepia: 0;
--gridzySkin-custom-sepia--filter-contrast: 1;
}
.gridzySkin-custom-sepia .gridzyCaption {
margin: 0;
padding: .5em;
position: absolute;
z-index: 1;
bottom: -.5em;
top: auto;
width: auto;
max-width: calc(100% - 2em);
height: fit-content;
max-height: 100%;
overflow: auto;
box-sizing: border-box;
background: rgba(238, 238, 238, .8);
color: #000;
box-shadow: 1px 1px 3px rgba(0, 0, 0, .3);
opacity: 0;
transition: opacity .3s;
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(3n) .gridzyCaption {
transform: translateX(1000px) translateX(-50%) rotate(3deg);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(3n+1) .gridzyCaption {
transform: translateX(1000px) translateX(-50%) rotate(-3deg);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(3n+2) .gridzyCaption {
transform: translateX(1000px) translateX(-50%) rotate(-1deg);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n) .gridzyCaption {
left: calc(50% - 1000px);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+1) .gridzyCaption {
left: calc(54% - 1000px);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+2) .gridzyCaption {
left: calc(46% - 1000px);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+3) .gridzyCaption {
left: calc(52% - 1000px);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+4) .gridzyCaption {
left: calc(48% - 1000px);
}
.gridzySkin-custom-sepia > .gridzyItem:hover .gridzyCaption {
opacity: 1;
}Використовуйте будь-який HTML
Ви можете використовувати майже будь-який HTML. Є лише кілька обмежень. Наведені тут приклади дають однаковий візуальний результат.
приклад 1:
<ul class="gridzy gridzySkinClassic">
<li>
<a href="https://www.example.com/">
<img class="gridzyImage" src="https://www.example.com/image1.jpg" />
<span class="gridzyCaption">example caption 1</span>
</a>
</li>
<li>
<a href="https://www.example.com/">
<img class="gridzyImage" src="https://www.example.com/image2.jpg" />
<span class="gridzyCaption">example caption 2</span>
</a>
</li>
...
</ul>приклад 2:
<section class="gridzy gridzySkinClassic">
<figure>
<img class="gridzyImage" src="https://www.example.com/image1.jpg" />
<figcaption class="gridzyCaption">example caption 1</figcaption>
</figure>
<figure>
<img class="gridzyImage" src="https://www.example.com/image2.jpg" />
<figcaption class="gridzyCaption">example caption 2</figcaption>
</figure>
...
</section>Більше корисних функцій
Відкладене завантаження
Швидше завантажує переглянуті зображення
Це завантажує лише ті зображення, які знаходяться поблизу видимої області. Тому більше пропускної здатності для видимих зображень.
API
Дозволяє зробити набагато більше
Це дозволяє програмно додавати та видаляти зображення, змінювати параметри або реагувати на події.
Розширення
Надає вам рішення для окремих сценаріїв
Це колекція статей блогу, які з часом розширюються та містять корисні фрагменти коду для легкого розширення Gridzy.Gallery .
Користувач Про бібліотеку
Приступаємо до справи!
Натисніть кнопку, щоб переглянути плани!