Gridzy.Gallery
Perpustakaan JavaScript
Pangalaman foto sè palèng luar biasa sè ètemmoè. Akherra bâdâ orèng sè ngartè cara ngalakonè rèya BENDHER!
Milo Persic – pangghuna perpustakaan
Wawasan Cepet
1 menit video tutorial
Ajhâri rèya coma è dâlem saminit:
Pangangghuy dasar
Konfigurasi
Filter
Ropana
Gaya Keterangan
Gaya keterangan sè ella ètentukan sabellunna kaangghuy solusi sè ghâmpang bân ghâncang
Pasèra'aghi gambar kaangghuy nengghu gaya keterangan sè èkonfigurasi. Maèn kalabân tombol bân pemilih warna kaangghuy ngonfigurasi gaya sè ètonjhuaghi.
Tag & Filter
Kaangghuy nojjhu dâ' gambarra kalabân cara sè lebbi terstruktur
Sistem filter sè èbâdâ'aghi cè' fleksibelna. Fakta jhâ' pemilih CSS èghunaaghi kaangghuy nyaring saongghuna mampu aghâbây para' sakabbhina jenis filter.
Cè' cocokna
bisa èghunaaghi kalabân bânnya' kotak lampu
Gabung galeri kalabân lightbox apa bhâi. Kemungkinan jhâ' rèya cocok para' 100%. Klik gambar kaangghuy nengghu kotak lampu PhotoSwipe mènangka contona.
Bâdâ artikel blog kalabân cuplikan kode sè la èpasra'aghi:
Fleksibel
Aghâbây Gaya Khusus
Manabi panjennengan ampon akrab sareng CSS, panjennengan bisa aghâbây gaya item galeri akadhi sè panjennengan terro.
CSS dâri conto sè ètonjhuaghi:
/* 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;
}Angghuy HTML apa bhâi
Sampèyan bisa aghâdhui HTML para' kabbhi. Namong bâdâ sakone' larangan. Conto sè ètonjhuaghi è dinna' kaduwâ'na ngasèllaghi hasèl visual sè padhâ.
Conto 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>Conto 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>Fitur sè lebbi èghunaaghi
Malas èmoat
èmoat gambar sè èbâca lebbi ghâncang
panèka namong èmoat gambar sè semma' dâ' area sè èkaton. Daddi lebbi bânnya' bandwidth ghâbây gambar sè èkaton.
API
èghâbây kaangghuy ngalakonè lebbi bânnya'
Arèya mampu aghâbây panjennengan bisa nambah bân maèlang gambar sacara program, ngobâ opsi otabâ bereaksi dâ' kadhâddhiyân.
Ekstensi
nyadhiyaaghi solusi ghâbây skenario individu
panèka koleksi artikel blog sè tombu dâri bâkto ka bâkto bân ngandung cuplikan kode sè èghunaaghi kaangghuy èpabhâjheng Gridzy.Gallery .
Pangangghuy Tentang Perpustakaan
Mara molaè alako!
Klik tombol kaangghuy marèksa rencanana!