Gridzy.Gallery
I-JavaScript Library
Iningi elimangalisayo lesithombe engisitholile. Ekugcineni othile uyaqonda ukuthi kwenziwa kanjani lokhu KULUNGILE!
U-Milo Persic – umsebenzisi womtapo wolwazi
Ukuqonda Okusheshayo
Isifundo sevidiyo esiyiminithi elingu-1
Funda lokhu ngomzuzu nje:
Ukusetshenziswa okuyisisekelo
Ukucushwa
Izihlungi
Ukubukeka
Izitayela zamagama-ncazo
Izitayela zamagama-ncazo achazwe ngaphambilini ukuze uthole izixazululo ezisheshayo ezilula
Hambisa phezulu izithombe ukuze ubone isitayela samagama-ncazo amisiwe. Dlala ngezinkinobho nezikhethi zemibala ukuze ulungiselele isitayela esakhelwe ngaphakathi esibonisiwe.
Omaka nezihlungi
Ukuze ubonise izithombe zakho ngendlela ehleleke kakhulu
Isistimu yokuhlunga eyakhelwe ngaphakathi ivumelana nezimo ngokwedlulele. Iqiniso lokuthi izikhethi ze-CSS zisetshenziselwa ukuhlunga empeleni zenza cishe noma yiluphi uhlobo lwesihlungi.
Kuyahambisana Kakhulu
Ingasetshenziswa Ngama-Lightboxes amaningi
Hlanganisa igalari nanoma yiliphi ibhokisi lokukhanya. Amathuba okuthi iyahambisana cishe ayi-100%. Chofoza izithombe ukuze ubone i-PhotoSwipe lightbox njengesibonelo.
Kunama-athikili ebhulogi anamazwibela ekhodi enziwe ngomumo:
I-Flexible kakhulu
Dala Izitayela Ezingokwezifiso
Uma ujwayelene ne-CSS, ungabhala izinto zegalari ngendlela ofuna ngayo.
I-CSS yesibonelo esibonisiwe:
/* 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;
}Sebenzisa noma iyiphi i-HTML
Ungasebenzisa cishe noma iyiphi i-HTML. Kunemikhawulo embalwa kakhulu. Izibonelo eziboniswe lapha zombili zikhiqiza umphumela ofanayo wokubuka.
Isibonelo 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>Isibonelo sesi-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>Izici Eziwusizo Ezengeziwe
Lazy Loading
Ilayisha izithombe zakho ezibukiwe ngokushesha
Lokhu kulayisha kuphela lezo zithombe eziseduze nendawo ebonakalayo. Ngakho-ke umkhawulokudonsa owengeziwe wezithombe ezibonakalayo.
I-API
Ikuvumela ukuthi wenze okuningi
Lokhu kukuvumela ukuthi wengeze futhi ususe izithombe ngokohlelo, ushintshe izinketho noma usabele kumicimbi.
Izandiso
Ikunikeza izixazululo zezimo ngazinye
Iqoqo lama-athikili ebhulogi akhula ngokuhamba kwesikhathi futhi aqukethe amazwibela wekhodi awusizo ukuze anwebe kalula Gridzy.Gallery .
Umsebenzisi Mayelana Nelabhulali
Ake sehlele ebhizinisini!
Chofoza inkinobho ukuze uhlole izinhlelo!