Gridzy.Gallery
JavaScript Library
Uninzi lwamava efoto amangalisayo endiwafumeneyo. Ekugqibeleni umntu uyayiqonda indlela yokwenza oku KULUNGILE!
UMilo Persic – umsebenzisi wethala leencwadi
Ukuqonda ngokukhawuleza
Isifundo sevidiyo esi-1 somzuzu
Funda oku ngomzuzu nje:
Ukusetyenziswa okusisiseko
Uqwalaselo
Izihluzi
Imbonakalo
Izimbo ze-Caption
Izimbo ze-caption ezichazwe kwangaphambili zezisombululo ezikhawulezayo ezilula
Hambisa imifanekiso ukuze ubone isimbo se-caption emiselweyo. Dlala ngamaqhosha kunye nabacholi bemibala ukuqwalasela isimbo esakhelwe-ngaphakathi esibonisiweyo.
Iithegi & Izihluzi
Ukubonisa imifanekiso yakho ngendlela eyakhiwe ngakumbi
Inkqubo yokucoca eyakhelwe-ngaphakathi ibhetyebhetye kakhulu. Into yokuba abakhethi be-CSS basetyenziselwa ukuhluza yenza phantse naluphi na uhlobo lwesihluzi.
Iyahambelana kakhulu
Inokusetyenziswa Ngeebhokisi zokukhanya ezininzi
Dibanisa igalari nayo nayiphi na ibhokisi yokukhanya. Amathuba okuba iyahambelana phantse ne-100%. Cofa imifanekiso ukuze ubone iFotoSwipe lightbox njengomzekelo.
Kukho amanqaku eblogi aneziqwengana zekhowudi esele zenziwe:
Ubhetyebhetye kakhulu
Yenza izimbo zesiNtu
Ukuba uqhelene neCSS, ungazitayile izinto zegalari ngendlela ofuna ngayo.
I-CSS yomzekelo obonisiweyo:
/* 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 nayiphi na i-HTML
Ungasebenzisa phantse nayiphi na i-HTML. Kukho izithintelo ezimbalwa kakhulu. Imizekelo eboniswe apha yomibini ivelisa umphumo ofanayo wokubonwayo.
Umzekelo 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>Umzekelo 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>Iimpawu eziluncedo ngakumbi
Lazy Loading
Ilayisha imifanekiso yakho ejongwe ngokukhawuleza
Oku kulayisha kuphela loo mifanekiso isondele kwindawo ebonakalayo. Ngoko ngakumbi i-bandwidth yemifanekiso ebonakalayo.
API
Ikuvumela ukuba wenze okuninzi
Oku kukuvumela ukuba wongeze kwaye ususe imifanekiso ngokwenkqubo, utshintshe iinketho okanye usabele kwiziganeko.
Izandiso
Ibonelela ngezisombululo zeemeko zomntu ngamnye
Yingqokelela yamanqaku eblogi akhula ngokuhamba kwexesha kwaye aqulathe iziqwengana zekhowudi eziluncedo ukuba zandise ngokulula Gridzy.Gallery .
Umsebenzisi Malunga neThala leencwadi
Masihle siye kwishishini!
Cofa iqhosha ukujonga izicwangciso!