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>Дыккаг дæнцæг:
<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 .
Пайдагæнæг Библиотекæйы тыххæй
Бавналæм нæ хъуыддагмæ!
Бакæсут кнопкæйыл, цæмæй фенат пълантæ!