Gridzy.Gallery
JavaScript Library
Men eo elaptata an emman kin pija ko ikar loe. Āliktata juon armej ej melele kilen kōmmane men in jimwe!
Milo Persic – juon ri kajerbal jikin bok eo
Meļeļe eo emōkaj
1 minit in katak ilo pija
Katak men in ilo juon wōt minit:
Kōjerbal eo ebin
Kōllaajrak
Filter ko
Rokjen
Wāween Caption
Jekjek in caption ko emōj kōmmane mokta ñan uwaak ko repidodo im mõkaj
Likūt pija ko n̄an loe wāween kōmeļeļe eo kar kōm̧m̧ane. Kōjerbal button ko im colour pickers ko ñan kōmman style eo ej walok.
Tag ko im Filter ko
ñan kwalok pija ko am ilo juon wewein eo elaplok an jejjet
Filter system eo ej bed ilowaan ej lukkun maroñ in oktak. Mol eo bwe CSS selector ko rej kōjerbali ñan filter ej kōmman bwe en maroñ in wōr jabdewōt kain filter.
Elap an jerbal ibben don
Emaroñ kōjerbale ippāñ elōñ Lightbox ko
Kobaik jikin pija eo ippān jabdewōt lightbox. joñan an maroñ in jerbal ej 100%. Klik ilo pija ko ñan am loe PhotoSwipe lightbox eo einwot juon waanjonok.
Elap an maroñ in oktak
Kōmmane Style ko Rekwojarjar
Elañe kwojelā kin CSS, kwomaroñ kōmman style in men ko ilo gallery eo ilo wāween eo kwoj kōnaan.
CSS in waanjoñak eo:
/* 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;
}Kōjerbal jabdewōt HTML
Kwomaroñ kōjerbal enañin jabdewōt HTML. Ewōr wōt jejjo wōt bōbrae ko. Waanjoñak ko rej kwalok ijin rej kwalok ejja tokjen eo wot.
Waanjoñak 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>Waanjoñak 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>Elōñlok men ko rejimwe
Lazy Loading
Ej mōkaj an bōktok pija ko kwar loi
Menin ej bōktok wōt pija ko rej epaak ñan jikin eo ej walok. Innem elaplok bandwidth ñan pija ko rej walok.
API
Ej kōtlok am kōmman elaplok
Menin ej kōtlok am maroñ in kobaik im jolok pija ko ilo program, ukōt kālet ko ak uwaak ñan men ko rej walok.
Extensions
Ej lewoj ñan yuk uwaak ko ñan kajjojo jekjek ko
Ej juon kōllaajrak in blog ko rej eddeklok ilo ien ko im ewōr ie code ko rejimwe ñan kōmman bwe en bin Gridzy.Gallery .
Rijerbal eo kin jikin bok eo
Jen jino jerbal!
Klik ilo button eo ñan lale karōk ko!