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 .
Карыстальнік Аб бібліятэцы
Прыступаем да справы!
Націсніце кнопку, каб праверыць планы!