Gridzy.Gallery
JavaSkript Laibrari
Ka jingshem photo kaba phylla tam kaba nga la shem. Khatduh eh don kiba sngewthuh kumno ban leh ia kane ka HOK!
U Milo Persic – u nongpyndonkam ia ka kot lyngkdop .
Ka jingshemphang kaba kloi
Ka jinghikai video kaba 1 minit
Ka jingtip ia kane tang ha ka shi minit:
Ka jingpyndonkam ba kongsan
Ka jingpynbeit
Ki jingpynkhuid
Ka jingwan paw
Ki rukom thoh jingthoh
Ki rukom thoh ba la buh lypa na ka bynta ki jingpynbeit ba suk bad kloi
Pynkhih ia ki dur ban iohi ia ka rukom thoh ba la pynbeit. Pynlehkai bad ki button bad ki nongjied rong ban pynbeit ia ka rukom shna ba la pyni.
Ki dak bad ki jingpynkhuid
Ban pyni ia ki dur jong phi ha ka rukom kaba kham ryntih .
Ka rukom pynkhuid kaba la shna ha ka ka long kaba jem bha. Ka jingshisha ba la pyndonkam ia ki nongjied CSS na ka bynta ban pynkhuid ha ka jingshisha ka pynlah ia jan man la ka jait jingpynkhuid.
Kaba iadei bha
Lah ban pyndonkam bad kiba bun ki synduk jingshai
Pyniasoh ia ka galeri bad kano kano ka jingshai. Ka jingma ba kan long kaba iadei ka long haduh 100%. Nion ha ki dur ban iohi ia ka PhotoSwipe lightbox kum ka nuksa.
Ki don ki jingthoh blog kiba don ki jingpynkylla code ba la pynkhreh:
Kaba jem bha
Pynlong ia ki style ba kyrpang
Lada phi tip bha ia ka CSS, phi lah ban style ia ki tiar jong ka gallery katba phi kwah.
CSS jong ka nuksa ba la pyni:
/* 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;
}Pyndonkam ia kano kano ka HTML .
Phi lah ban pyndonkam la jan man la ka HTML. Ki don tang khyndiat eh ki jingkhang. Ki nuksa ba la pyni hangne baroh ar ki pynmih ia kajuh ka jingmih kaba paw.
Nuksa 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>Nuksa 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>Ki jingdonkam kiba kham myntoi
Ka jingpynrung kaba jem
Ka load ia ki dur ba la peit kham kloi
Kane ka load tang ia kito ki dur kiba don hajan ka jaka ba lah ban iohi. Kumta kham bun ka band na ka bynta ki dur ba lah ban iohi.
API
Ka ailad ia phi ban leh kham bun kiei kiei
Kane ka ailad ia phi ban pyndap bad weng ia ki dur da ka prokram, pynkylla ia ki opshon lane ban leh ia ki jingjia.
Ki jingpynheh
Ka ai ia phi ia ki lad ki lynti na ka bynta ki jingjia shimet shimet
Ka dei ka jinglum lang jong ki jingthoh blog kiba nangroi katba nang mih ki sngi bad ki don ki jingthoh code kiba iarap ban pynjlan da kaba suk ia Gridzy.Gallery .
U nongpyndonkam shaphang ka Library .
To ngin ia sdang ia ka kam!
Nion ha ka button ban peit ia ki plan!