Gridzy.Gallery
Umtapolwati we-JavaScript
Sipiliyoni sesitfombe lesimangalisa kakhulu lengisitfolile. Ekugcineni umuntfu uyavisisa kutsi angakwenta kanjani loku NGEKULUNGILE!
Milo Persic – umsebentisi wemtapolwati
Kucondza lokusheshako
Sifundvo sevidiyo semzuzu munye
Fundza loku ngemzuzu nje:
Kusetjentiswa lokusisekelo
Kuhleleka
Tihlungi
Kuvela
Titayela Temagama
Titayela temagama lachazwe kusengaphambili kute utfole tisombululo letilula letisheshako
Hambisa titfombe kute ubone isitayela semibhalo lelungisiwe. Dlala ngetinkinobho kanye nebakhetsi bemibala kute ulungiselele isitayela lesakhiwe lesikhonjisiwe.
Emathegi & Tihlungi
Kukhombisa titfombe takho ngendlela lehlelekile
Luhlelo lwekuhlunga lolwakhelwe ngaphakathi luyagucugucuka kakhulu. Liciniso lekutsi bakhetsi be-CSS basetjentiselwa kuhlunga empeleni kuniketa emandla cishe noma ngabe nguyiphi inhlobo yekuhlunga.
Kuhambisana kakhulu
Isebenta Ngemabhokisi Ekukhanya Lamanyenti
Hlanganisa igalari nanoma nguliphi libhokisi lekukhanya. Ematfuba ekutsi kuhambisana cishe 100%. Chafata titfombe kute ubone libhokisi lekukhanya le-PhotoSwipe njengesibonelo.
Kukhona tihloko te-blog letinetincenye tekhodi letilungele:
Kugucugucuka Kakhulu
Dala Titayela Letikhetsekile
Uma ujwayele i-CSS, ungasitayela tintfo tegalari ngendlela lofuna ngayo.
CSS yesibonelo lesikhonjisiwe:
/* 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;
}Sebentisa noma nguyiphi i-HTML
Ungasebentisa cishe noma nguyiphi i-HTML. Kukhona imikhawulo lembalwa kakhulu. Tibonelo letikhonjiswe lapha totimbili tikhicita umphumela lofanako lobonakalako.
Sibonelo 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>Sibonelo 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>Timphawu Letinyenti Letilusito
Kulayisha lokuvilaphako
Ilayisha titfombe takho letibukwe ngekushesha
Loku kulayisha kuphela leto titfombe letisedvute nendzawo lebonakalako. Ngako-ke bandwidth lenyenti yetitfombe letibonakalako.
I-API
Ikuvumela kutsi wente lokunyenti
Loku kukuvumela kutsi wengete futsi ususe titfombe ngeluhlelo, ushintje tintfo letikhetsiwe nobe usabele etintfweni letenteka.
Kwengeta
Ikuniketa tisombululo tetindzaba ngamunye
Kuyiqoqo letihloko tebhulogi letikhula ngekuhamba kwesikhatsi futsi ticuketse tincenye tekhodi letilusito kute tikhulise kalula Gridzy.Gallery .
Umsebentisi Ngemtapolwati
Asibeke phansi ebhizinisini!
Chafata inkinobho kute uhlole tinhlelo!