Gridzy.Gallery
Jabai̱thki̱ri̱pt Lai̱brɛri̱
Kä min di̱tni̱ jɛn kä thurɛni̱ tin cä jek. Kɛ jɔakdɛ tëëkɛ ram mi ci jɛ ŋa̱c ɛn ɣöö derɛ nɛmɛ la̱t i̱di RIGHT!
Milo Persic – ɛ ram kɛl kä nɛy tin lät kä library
Inthait mi̱ pɛ̈th
1 minit ŋi̱i̱cä bi̱i̱diö
Ŋi̱i̱c nɛmɛ kɛ minit kɛl kärɔa:
La̱tdɛ min thi̱a̱k
Kɔnpi̱e̱gi̱rɛciɔn
Pi̱li̱tɛri̱
Jɔa̱c
Kapciɔn I̱thtai̱li̱
Predefined kapciɔn ca̱a̱pni̱ kɛ kui̱ kä ɣöö ba luɔcdɛ pɛ̈th kɛ pɛ̈th
Hover thurɛni̱ kɛ ɣöö bi̱ ca̱p caption min ca riali̱kä nɛn. La̱tdɛ kɛɛ buttonni̱ kɛnɛ biɛɛl tin kuanykɛ kɛ ɣöö ba ca̱a̱p tin ca la̱th rɛydɛ kulɛ riali̱kä.
Tagni̱ kɛnɛ Pi̱li̱tɛri̱
Kɛ ɣöö bi thurɛniku nyoth kɛ duɔ̱p mi ca rialikä
Kä min ca la̱th-rɛy pi̱li̱tɛr thi̱thtɛm ɛ mi̱ la gɛɛrɛ rɔ ɛlɔ̱ŋ. Kä thuɔ̱k min CSS thɛlɛktɔri̱ kɛn lätkɛ kɛ kui̱ pi̱li̱tɛri̱ kɛ thuɔ̱kdɛ jakɛ kä thia̱k ɛni̱ ta̱a̱ pi̱li̱tɛri̱.
Kɔmpi̱ti̱bɔl mi̱ di̱i̱t
La̱tdɛ Kɛ Lightboxni̱ ti̱ ŋuan
Kä matdɛ galleri̱ kɛ ɛni̱ lightbox. Kä pröbabi̱e̱li̱ti̱ min jɛn bɛ rɔ lot ɛ thia̱kɛ kɛɛ 100%. Cɔl thurɛni̱ kɛ ɣöö biɛ nɛn ɛn PhotoSwipe lightbox ɛ la cäät.
Tëë kɛ ruaacni̱ ti̱ caa gɔ̱a̱r piny kä blɔg ti̱ caa kɔn riali̱kä:
Ɣa̱li̱ Plɛkthi̱bɔl
Ca̱k I̱thtai̱li̱ tin la̱tkɛ
Mi ŋäci CSS, deri ŋɔak tin te rɛy gallery la̱th kɛ duɔ̱ɔ̱p in go̱o̱ri jɛ.
CSS duŋ cäätdä min ca nyoth:
/* 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;
}La̱tdɛ ɛni̱ HTML
Ji̱n deri̱ lät kɛ HTML mi̱ thi̱a̱k thi̱a̱k. Tëëkɛ ŋuɔ̱t ti tɔt kärɔ̱. Kä cäätni̱ tin ca nyoth ɛn wa̱nɛ mɛ kɛn da̱ŋ rɛw nööŋkɛ ni̱ mi̱ cäät mi̱ guickɛ.
Cäät 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>Cäät 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>Kä tin ŋuani̱kɛn tin gɔw
Ladhi̱ Lödiŋ
Thurɛni̱ku tin guickɛ laa jakɛ kä pɛ̈th
Nɛmɛ bɛ thurɛni̱ tin thia̱k kɛ gua̱a̱th in jɔc kärɔ̱ kulɛ la̱th thi̱n. Bä bandwidth mi̱ di̱i̱t kɛ kui̱ thurɛni̱ tin jɔc.
API
Jakɛ ji̱ kä lät ti̱ ŋuan ɛlɔ̱ŋ
Nɛmɛ jakɛ ji̱ kä bi̱ thurɛni̱ mat thi̱n kɛnɛ wuɔ̱cdiɛn kɛ prögi̱ra̱m, gɛri min deri̱ kuany kiɛ lätni min ci̱ tuɔɔk.
Ɛktɛncini̱
Cuɛ ji̱ moc kɛ luɔc kɛ kui̱ kä tin ci̱ tuɔɔk kɛ̈l kɛ̈ɛ̈li̱
Jɛn ɛ ruuli̱ blögni̱ arti̱kɔ̱li̱ tin piith kɛ kɔr gua̱th mi̱ bäär kɛnɛ ɣöö tekɛ kɔd ti̱ luäk kɛ rëpdiɛn kɛ thi̱a̱k Gridzy.Gallery .
Kä ram min lät kɛ kui̱ Library
Kuanyɛ wä piny kä lät!
Cɔl button kɛ ɣöö biɛ guic ɛn ɣöö tekɛ ca̱p!