Gridzy.Gallery
Perpustakaan JavaScript
Pengalaman foto paling menakjubkan yang pernah gue temuin. Akhirnya ada yang ngerti cara ngelakuin ini BENER!
Milo Persic – pengguna perpustakaan
Wawasan Cepat
1 menit video tutorial
Pelajari ini cuma dalam semenit:
Penggunaan dasar
Konfigurasi
Filter
Tampilan
Gaya Keterangan
Gaya keterangan yang udah ditentuin sebelumnya untuk solusi cepat yang mudah
Arahin kursor gambar buat liat gaya keterangan yang udah dikonfigurasi. Main tombol dan pemilih warna buat ngatur gaya bawaan yang ditunjukin.
Tag & Filter
Buat nampilin gambar lu dengan cara yang lebih terstruktur
Sistem filter bawaan sangat fleksibel. Fakta bahwa pemilih CSS dipake buat nyaring sebenernye ngaktifin hampir semua jenis filter.
Kompatibel banget
Bisa dipake dengan banyak kotak lampu
Gabungin galeri dengan lightbox apa aja. Kemungkinan kalo itu kompatibel hampir 100%. Klik gambar buat ngeliat kotak lampu PhotoSwipe sebagai contoh.
Fleksibel banget
Bikin gaya khusus
Kalo lu udah kenal ama CSS, lu bisa ngegayain item galeri dengan cara yang lu mau.
CSS dari contoh yang ditunjukin:
/* 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;
}Pake HTML apa aja
Lu bisa make hampir semua HTML. Cuma ada dikit banget pembatasan. Contoh yang ditunjukin di sini keduanya menghasilkan hasil visual yang sama.
Contoh 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>Contoh 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 yang lebih berguna
Males Muat
Muat gambar yang lu liat lebih cepet
Ini cuma muat gambar yang deket ama area yang keliatan. Jadi lebih banyak bandwidth buat gambar yang keliatan.
API
Memungkinkan lu buat ngelakuin lebih banyak lagi
Ini memungkinkan lu buat nambahin dan ngilangin gambar secara program, ngerubah opsi atau bereaksi terhadap peristiwa.
Ekstensi
Nyediain lu solusi buat skenario individu
Ini adalah kumpulan artikel blog yang tumbuh dari waktu ke waktu dan berisi cuplikan kode yang membantu untuk dengan mudah memperpanjang Gridzy.Gallery .
Pengguna Tentang Perpustakaan
Ayo mulai usaha!
Klik tombolnye buat liat rencananye!