Gridzy.Gallery
JavaScript Nhomakorabea
Mfonini ho osuahu a ɛyɛ nwonwa sen biara a manya. Awiei koraa no obi te sɛnea wɔyɛ eyi ase YIYE!
Milo Persic – obi a ɔde nhomakorabea no di dwuma
Nhumu a Ɛyɛ Ntɛmntɛm
Simma 1 video nkyerɛkyerɛ
Sua eyi wɔ simma biako pɛ mu:
Mfitiase de a wɔde di dwuma
Nsiesiei a Wɔde Yɛ Adwuma
Nneɛma a wɔde yiyi nneɛma mu
Mmaeɛ
Nsɛm a Wɔde Kyerɛw Nsɛm
Predefined caption styles ma ano aduru a ɛyɛ mmerɛw ntɛmntɛm
Fa mfonini ahorow no hyɛ wo nsa na wubehu sɛnea wɔahyehyɛ nsɛm a wɔakyerɛw no. Fa bɔtn ne kɔla a wɔpaw no di agoru na hyehyɛ ɔkwan a wɔakyerɛ a wɔde ahyɛ mu no.
Tags & Filters a Wɔde Yɛ Nneɛma
Sɛnea ɛbɛyɛ a wobɛda wo mfonini ahorow adi wɔ ɔkwan a wɔahyehyɛ no yiye so
Filter nhyehyɛe a wɔde ahyɛ mu no yɛ nea ɛyɛ mmerɛw yiye. Nokwasɛm a ɛyɛ sɛ wɔde CSS selectors di dwuma ma filtering no ma ɛkame ayɛ sɛ filter ahorow biara tumi yɛ adwuma ankasa.
Nea ɛne ne ho hyia kɛse
Wotumi De Di Dwuma Ne Lightbox Pii
Fa gallery no ne kanea adaka biara bom. Ɛkame ayɛ sɛ nea ebetumi aba sɛ ɛne no hyia no yɛ 100%. Klik mfonini ahorow no so na wubehu PhotoSwipe kanea adaka no sɛ nhwɛso.
Ɛyɛ Nsakrae Kɛse
Yɛ Nneɛma a Wɔayɛ no Amanneɛbɔ
Sɛ wunim CSS a, wubetumi ayɛ gallery nneɛma no sɛnea wopɛ.
CSS a wɔakyerɛ sɛ nhwɛso:
/* 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;
}Fa HTML biara di dwuma
Ɛkame ayɛ sɛ wubetumi de HTML biara adi dwuma. Anohyeto kakraa bi pɛ na ɛwɔ hɔ. Nhwɛso ahorow a wɔada no adi wɔ ha no nyinaa ma wonya nea efi aniwa so ade koro.
Nhwɛso 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>Nhwɛso 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>Nneɛma a Mfaso Wɔ So Pii
Ɔkwasea Loading
Ɛde wo mfonini ahorow a woahwɛ no bɛhyɛ mu ntɛmntɛm
Eyi de mfonini ahorow a ɛbɛn baabi a wotumi hu no nkutoo na ɛhyɛ mu. Enti bandwidth pii ma mfonini ahorow a wotumi hu.
API
Ɛma wutumi yɛ pii sen saa
Wei ma wotumi de mfonini ahorow ka ho na woyi fi hɔ wɔ nhyehyɛe kwan so, sesa nneɛma a wobɛpaw anaasɛ wobɛyɛ w’ade wɔ nsɛm a esisi ho.
Ntrɛwmu ahorow
Ɛma wunya ano aduru ma ankorankoro tebea horow
Ɛyɛ blog nsɛm a wɔaboaboa ano a ɛnyin bere kɔ so na ɛwɔ code snippets a ɛboa ma ɛyɛ mmerɛw sɛ ɛbɛtrɛw Gridzy.Gallery .
Ɔdefo Fa Nhomakorabea no Ho
Momma yɛnkɔ adwuma mu!
Klik bɔtn no so na hwɛ nhyehyɛe ahorow no!