Gridzy.Gallery
Laiburari ya JavaScript
Tshenzhemo ya zwinepe i mangadzaho vhukuma ye nda i wana. Mafheleloni muthu u pfesesa uri u ita hani hezwi RIGHT!
Milo Persic – mushumisi wa ḽaiburari .
Nḓivho nga u ṱavhanya
Thuthoriala ya vidio ya miniti muthihi
Gudani hezwi nga miniti muthihi fhedzi:
Tshumiso ya mutheo
Nzudzanyo
Zwiṱuṱuwedzi
U ḓi vhonadza
Zwitaila zwa ṱhalutshedzo
Zwitaila zwa ṱhalutshedzo zwo ṱalutshedzwaho hu tshee nga phanḓa u itela thandululo dzo leluwaho nga u ṱavhanya
Hover zwifanyiso u vhona tshitaila tsha ṱhalutshedzo tsho dzudzanywaho. Tambani nga mabammbiri na zwikhethi zwa mivhala u itela u dzudzanya tshitaila tsho fhaṱiwaho tsho sumbedzwaho.
Thegi na Zwiṱuṱuwedzi
U sumbedza zwifanyiso zwaṋu nga nḓila yo dzudzanyeaho .
Sisiṱeme ya filthara yo fhaṱiwaho i a tendelana vhukuma. Mbuno ya uri vhakhethi vha CSS vha shumiswa kha u sefa vhukuma zwi ita uri hu kone u vha na lushaka luṅwe na luṅwe lwa u sefa.
I tendelana vhukuma
I Shumiswa Na Lightbox Nnzhi
U ṱanganya gaḽeri na lightbox iṅwe na iṅwe. Khonadzeo ya uri i tendelane i ṱoḓa u vha 100%. Kha vha puṱedze zwifanyiso u itela u vhona bogisi ḽa tshedza ḽa PhotoSwipe sa tsumbo.
Hu na athikili dza blog dzi re na zwipiḓa zwa khoudu zwo lugiselelwaho:
U tendelana na zwiimo
Kha vha sike zwitaila zwo khetheaho
Arali ni tshi ḓivha CSS, ni nga ita tshitaila tsha zwithu zwa gaḽeri nga nḓila ine na ṱoḓa ngayo.
CSS ya tsumbo yo sumbedzwaho:
/* 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;
}Shumisani HTML ifhio na ifhio
U nga shumisa HTML i ṱoḓaho u vha iṅwe na iṅwe. Hu na zwithivheli zwi si gathi vhukuma. Tsumbo dzo sumbedzwaho afha dzoṱhe dzi bveledza mvelelo i fanaho ya zwi vhonalaho.
Tsumbo 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>Tsumbo 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>Zwiṅwe Zwithu Zwi Shumaho
U ḓadza nga vhulenda
I ḓadza zwifanyiso zwaṋu zwo vhoniwaho nga u ṱavhanya
Hezwi zwi hwala fhedzi zwifanyiso zwine zwa vha tsini na fhethu hune ha vhonala. Ngauralo bandwidth nnzhi ya zwifanyiso zwi vhonalaho.
API
I ni tendela u ita zwinzhi
Hezwi zwi ita uri ni kone u engedza na u bvisa zwifanyiso nga mbekanyamushumo, u shandula zwikhetho kana u aravha kha zwiitea.
Zwiengedzedzwa
U ni ṋea thandululo dza zwiimo nga zwiimo
Ndi khuvhanganyo ya athikili dza blog dzine dza aluwa nga u ya ha tshifhinga nahone dzi na zwipiḓa zwa khoudu zwi thusaho u itela u engedza nga hu leluwaho Gridzy.Gallery .
Mushumisi nga ha Laiburari
Kha ri dzhene kha mushumo!
Kha vha dzhene kha buthano u itela u vhona pulane!