Gridzy.Gallery
JavaScript kutubxonasi
Men topgan eng ajoyib foto tajribasi. Nihoyat, kimdir buni qanday qilib TO'G'ri qilishni tushunadi!
Milo Persic - kutubxona foydalanuvchisi
Tezkor tushuncha
1 daqiqalik video darslik
Buni bir daqiqada bilib oling:
Asosiy foydalanish
Konfiguratsiya
Filtrlar
Tashqi ko'rinish
Sarlavha uslublari
Oson tezkor yechimlar uchun oldindan belgilangan sarlavha uslublari
Sozlangan sarlavha uslubini ko'rish uchun tasvirlarni kursorga olib boring. Ko'rsatilgan ichki uslubni sozlash uchun tugmalar va rang tanlagichlar bilan o'ynang.
Teglar va filtrlar
Tasvirlaringizni yanada tuzilgan tarzda ko'rsatish uchun
O'rnatilgan filtr tizimi juda moslashuvchan. Filtrlash uchun CSS selektorlari ishlatilishi haqiqatan ham deyarli har qanday filtr turini ishga tushiradi.
Yuqori darajada mos
Ko'p yorug'lik qutilari bilan foydalanish mumkin
Galereyani har qanday yorug'lik qutisi bilan birlashtiring. Uning mos kelishi ehtimoli deyarli 100%. Misol sifatida PhotoSwipe yorug'lik qutisini ko'rish uchun rasmlarni bosing.
Tayyor kod parchalari bo'lgan blog maqolalari mavjud:
Yuqori moslashuvchan
Maxsus uslublar yarating
Agar siz CSS-ni yaxshi bilsangiz, galereya elementlarini o'zingiz xohlagan tarzda uslublashingiz mumkin.
Ko'rsatilgan misolning 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;
}Har qanday HTML dan foydalaning
Siz deyarli har qanday HTML dan foydalanishingiz mumkin. Faqat juda kam cheklovlar mavjud. Bu erda ko'rsatilgan misollar ikkalasi ham bir xil vizual natija beradi.
1-misol:
<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-misol:
<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>Ko'proq foydali xususiyatlar
Lazy Loading
Ko'rilgan rasmlaringizni tezroq yuklaydi
Bu faqat ko'rinadigan maydonga yaqin bo'lgan rasmlarni yuklaydi. Shunday qilib, ko'rinadigan tasvirlar uchun ko'proq tarmoqli kengligi.
API
Sizga ko'proq narsani qilish imkonini beradi
Bu sizga rasmlarni dasturiy ravishda qo'shish va o'chirish, variantlarni o'zgartirish yoki voqealarga munosabat bildirish imkonini beradi.
Kengaytmalar
Sizga individual stsenariylar uchun yechimlarni taqdim etadi
Bu vaqt o'tishi bilan o'sib boruvchi va Gridzy.Gallery osongina kengaytirish uchun foydali kod parchalarini o'z ichiga olgan blog maqolalari to'plami.
Foydalanuvchi Kutubxona haqida
Keling, biznesga kirishaylik!
Rejalar bilan tanishish uchun tugmani bosing!