Gridzy.Gallery
Biblioteka JavaScript
Esperiénsia foto ne'ebé furak liu ne'ebé ha'u hetan. Ikusmai ema ida komprende oinsá atu halo ida-ne'e ho LOOS!
Milo Persic – utilizadór ida husi biblioteka
Hanoin Lalais
Tutoriál vídeo minutu 1
Aprende ida-ne'e iha minutu ida de'it:
Uzu báziku
Konfigurasaun
Filtru sira
Aparese
Estilu sira ba legenda
Estilu legenda nian ne'ebé define ona ba solusaun lalais ne'ebé fásil
Tau imajen sira hodi haree estilu legenda ne'ebé maka konfigura ona. Joga ho botaun sira no hili kór sira hodi konfigura estilu inkorporadu ne'ebé hatudu.
Tag & Filtru sira
Atu hatudu ita-boot nia imajen sira ho maneira ida ne'ebé estruturadu liu
Sistema filtru ne'ebé maka inkorporadu iha laran ne'e fleksivel tebes. Faktu katak seletór CSS sira uza ba filtrajen loloos ativa kuaze tipu filtru hotu-hotu.
Kompativel tebes
Bele uza ho Lightbox barak
Kombina galeria ho kualkér lightbox. Probabilidade katak ida-ne'e kompativel maka kuaze 100%. Klik imajen sira atu haree PhotoSwipe lightbox hanesan ezemplu.
Iha artigu blog sira ho fragmentu kódigu ne'ebé prontu ona:
Fleksivel tebes
Kria Estilu Personalizadu sira
Se ita-boot hatene CSS, ita-boot bele halo estilu ba item sira iha galeria tuir ita-boot nia hakarak.
CSS husi ezemplu ne'ebé hatudu:
/* 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;
}Uza HTML ruma
Ita-boot bele uza kuaze HTML hotu-hotu. Iha de'it restrisaun uitoan de'it. Ezemplu sira ne'ebé hatudu iha ne'e produz rezultadu vizuál ne'ebé hanesan.
Ezemplu 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>Ezemplu 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>Karakterístika sira ne'ebé útil liután
Karregamentu lais
Karrega imajen sira ne'ebé ita-boot haree lalais liu
Ida-ne'e karrega de'it imajen sira ne'ebé besik ba área vizivel. Entaun bandwidth barak liután ba imajen sira ne'ebé vizivel.
API
Permite ita-boot atu halo buat barak liután
Ida-ne'e permite ita-boot atu aumenta no hasai imajen sira ho programa, muda opsaun sira ka reajen ba eventu sira.
Estensaun sira
Fornese ita-boot ho solusaun sira ba senáriu individuál sira
Ida-ne'e maka kolesaun artigu blog nian ne'ebé buras ho tempu no kontein kódigu fragmentu sira ne'ebé ajuda atu habelar ho fasil Gridzy.Gallery .
Utilizadór Kona-ba Biblioteka
Mai ita hahú negósiu!
Klik butaun atu haree planu sira!