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 чэпчэкитик кэҥэтэр туһалаах код быһа тардыыларын тутар.
Бибилэтиэкэ туһунан туһанааччы
Дьыалаҕа киириэххэйиҥ!
Былааннары көрөргө кнопканы баттаа!