Gridzy.Gallery
Ijiir i koson ityakerada i JavaScript
Kwagh u kpilighyol u foto u m nenge a mi yô. Ken masejime yô orgen kav er nana er kwagh ne RIGHT!
Milo Persic – or u eren tom a iyou i koson ityakerada .
Mkav u fese
Ityesen i vidio i miniti 1
Hen kwagh ne ken miniti môm tseegh:
U eren tom a mi
Mzough u akaa
Akaa a sôron akaa
Mluashe
Igbenda i ngeren kwagh
I vande pasen gbenda u ngeren kwagh sha mi sha u zuan a mbamlumun mba fese
Hover ufoto mbara sha er u nenge a gbenda u i nger kwagh sha mi la yô. Ka u eren tom a ikyav mbi tomov man ikyav mbi eren tom a mi la sha u sôron gbenda u i tese u la.
Akav man Akaa a Soron
U tesen ufoto ou sha gbenda u u hembe lun vough yô .
Ieren i filter i i we ken iyou la ka i lu a mshi kpishi. Er i er tom a CSS selectors sha u sôron akaa yô, kwagh ne ka a na yô, hanma inja kwagh u sôron akaa cii a er tom.
Ka i zua sha kwagh kpishi
Ka i er tom a mi vea Lightboxes kpishi .
Kohol gallery la vea hanma lightbox cii. Ior mba ve lu a mnenge u vough sha kwagh u mlu u ken hemen la kuma er 100% nahan. Kighir ufoto mbara sha er u nenge a ikyav i PhotoSwipe la yô.
I nger ngeren mba sha blog mba ve lu a akaa a i yer ér code snippets la ker yô:
Ka i gema akaa kpishi
Er akaa a u soo la
Aluer u fa kwagh u CSS yô, u er style u akaa a ken gallery la sha gbenda u u soo la.
CSS u ikyav i tesen ne:
/* 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;
}U er tom a hanma HTML cii .
U ngu a er tom a hanma HTML cii. Ka akaa a i yange se u eren la kpuaa tseegh. Ikyav i tesen heen ne cii ka i na kwagh u i nengen a mi la a lu kwagh môm.
Ikyav i sha 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>Ikyav i sha 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>Akaa agen a a lu a inja yô
U eren tom sha inja ga
Load ufoto mba u nenge la fese
Kwagh ne ka a tôô ufoto mba ve lu ikyua a ijiir i i nengen a mi la tseegh. Nahan bandwidth u seer sha ci u ufoto mba i nengen a mi la.
API
Ka i na u ian i eren akaa kpishi .
Kwagh ne ka a na u ian i seer shi dughun ufoto sha ikyev i porogeram, geman akaa a u tsough la shin eren kwagh sha akaa a a er la.
Akaa a seer
Ka a na u mbamlumun sha mbamlu mba asange asange .
Ka mzough u ngeren mba sha blog mba ve lu vesen shighe a karen yô, shi ve lu a akaa a wasen u seer Gridzy.Gallery .
User Kwagh u Iyou i Mkohol .
Se hii u eren tom ne!
Klik sha button la sha er u nenge a mbamhen mba i we ishima u eren la yô!