Gridzy.Gallery
Wemasɛxwetɛn JavaScript tɔn
Fótóo nǔjiwǔ hugǎn e un mɔ é. Gbɔn gudo ɔ, mɛɖé mɔ nukúnnú jɛ lee è na wà nǔ enɛ gbɔn é wu ƉO ƉƆ!
Milo Persic – mɛ e nɔ zán wemaxɔ ɔ é ɖé .
Nukúnnúmɔjɛnǔmɛ Tlolo
Cɛjú 1 sín video kplɔ́nmɛ
Kplɔ́n nǔ elɔ ɖò cɛju ɖokpo mɛ:
Nǔ e è nɔ zán é
Nǔjlɛ́dónùwú
Filtres
Xwè tɔ́n
Nǔwlanwlán sín alɔkpa lɛ
Nǔwlanwlán sín alɔkpa e è ko ɖɔ ɖ’ayǐ lɛ é nú xósin e bɔkun lɛ é
Sɔ́ alɔ dó ɖiɖe lɛ jí bo kpɔ́n lee è bló tuto nú nǔwlanwlán lɛ gbɔn é. Xò nǔ kpo butɔn lɛ kpo kpodo nǔ e nɔ sɔ́ sinmɛ lɛ é kpo dó bló tuto nú alɔkpa e è xlɛ́ é.
Tags & Filtres
Bo na dó xlɛ́ ɖiɖe towe lɛ ɖò ali e è bló tuto na é nu .
Nǔ e è sɔ́ dó bló filtre na é nɔ ɖyɔ tawun. Nǔ e wu è nɔ zán nǔ e nɔ sɔ́ CSS lɛ é dó xò nǔ kpɔ́n é nɔ zɔ́n bɔ è nɔ xò nǔ kpɔ́n ɖibla nyí alɔkpa ɖebǔ.
É nɔ sɔgbe tawun
È Sixu Zán Kpodo Lightbox Gègě kpo
Mi xò galerie ɔ kplé xá lightbox ɖebǔ. Nǔ e wu é sixu sɔgbe é ɖibla yì 100%. Zǐn ɖiɖe lɛ bo kpɔ́n ɖiɖe weziza tɔn PhotoSwipe tɔn ɔ ɖi kpɔ́ndéwú ɖé.
É nɔ ɖyɔɖyɔ tawun
Ðó alɔkpa e è sɔ́ ɖ’ayǐ lɛ é
Enyi a tuùn CSS ganji ɔ, a sixu bló nǔ e ɖò ɖiɖe ɔ mɛ lɛ é ɖó lee a jló gbɔn é.
CSS kpɔ́ndéwú e è xlɛ́ é tɔn:
/* 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;
}Zǎn HTML ɖebǔ .
A sixu zán HTML ɖibla nyí ɖebǔ. Nǔ e è ɖó na ɖó dogbó na lɛ é kpɛɖé jɛn tíìn. Kpɔ́ndéwú e è xlɛ́ ɖò fí lɛ é bǐ wɛ nɔ na nǔ ɖokpo ɔ ɖò nukúnta.
Kpɔ́ndéwú 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>Kpɔ́ndéwú 2gɔ́ ɔ́:
<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>Nǔ e nɔ hɛn lè wá lɛ é ɖevo lɛ
Fɔnlínnɔ Hɛn
É nɔ yawu hɛn ɖiɖe e a kpɔ́n lɛ é
Enɛ nɔ hɛn ɖiɖe ɖěɖee sɛkpɔ fí e è nɔ mɔ nǔ ɖè é kɛɖɛ. Enɛ wu ɔ, bandwidth gègě nú ɖiɖe e è nɔ mɔ lɛ é.
API
É nɔ zɔ́n bɔ a nɔ wà nǔ gègě d’eji .
Enɛ nɔ zɔ́n bɔ a nɔ gɔ́ ɖiɖe lɛ nú we bo nɔ lɛ́ ɖè ye síìn ɖò tuto jí, ɖyɔ nǔ e a na cyan lɛ é alǒ wà nǔ dó nǔ e jɛ lɛ é wu.
Nǔjlɛ́dónùwú
É nɔ na we xósin nú ninɔmɛ ɖokpo ɖokpo .
É nyí xójlawema ɖé bɔ é nɔ sù ɖò hwenu e ɖò yiyi wɛ é mɛ, bo nɔ lɛ́ ɖó xójlawema ɖé lɛ bɔ ye nɔ d’alɔ mɛ bɔ è nɔ jlaɖó Gridzy.Gallery .
Mɛ e nɔ zán é dó wemaxɔ ɔ wu
Mi nú mǐ ni jɛ azɔ̌ jí!
Zǐn butɔn ɔ bo kpɔ́n tuto lɛ!