Gridzy.Gallery
Bibliotek JavaScript
Lexperyans foto pli extraordiner ki mo finn trouve. Finalman kikenn finn konpran kouma fer sa kouma bizin!
Milo Persic – enn itilizater bibliotek-la
Enn apersi rapid
1 minit video leson
Aprann sa dan zis enn minit:
Itilizasion debaz
Konfigirasion
Filtre
Laparans
Bann stil lezand
Bann stil lezand ki finn definir alavans pou bann solision rapid e fasil
Pas lor bann zimaz pou trouv stil lezand ki finn konfigire. Zwe avek bann bouton ek bann seleksioner kouler pou konfigir stil inkorpore ki finn montre.
Bann tag ek bann filtr
Pou afis ou bann zimaz dan enn fason pli striktire
Sistem filtr ki inklir li extra flexib. Lefet ki bann selekter CSS servi pou filtraz an realite permet preske ninport ki tip filtraz.
Bien konpatib
Itilizab avek boukou bwat lalimier
Konbine galeri-la avek ninport ki lightbox. Probabilite ki li konpatib se preske 100%. Klik lor bann zimaz pou trouv lightbox PhotoSwipe kouma enn lexanp.
Ena bann lartik blog avek bann bout kod ki finn fini fer:
Bien flexib
Kree bann stil personalize
Si ou abitie avek CSS, ou kapav stil bann item galeri kouma ou anvi.
CSS lexanp ki finn montre:
/* 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;
}Servi ninport ki HTML
Ou kapav servi preske ninport ki HTML. Ena zis bien tigit restriksion. Bann lexanp ki montre isi toulede prodir mem rezilta viziel.
Lexanp 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>Lexanp 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>Plis fonksionalite itil
Pe charz pares
Charz ou bann zimaz ki ou finn gete pli vit
Sa charge zis bann zimaz ki pre ar rezion vizib. Alor plis bandwidth pou bann zimaz vizib.
API
Permet ou fer boukou plis
Sa permet ou azout ek retir bann zimaz programatikman, sanz bann opsion ouswa reazir a bann evennman.
Bann extansion
Fourni ou bann solision pou bann senaryo individiel
Se enn koleksion lartik blog ki grandi avek letan e ki kontenir bann bout kod itil pou fasilman prolonz Gridzy.Gallery .
Itilizater Apropo Bibliotek-la
Anou koumans travay!
Klik lor bouton-la pou get bann plan-la!