Gridzy.Gallery
Pustaka JavaScript
Pengalaman foto paling menakjubkan yang pernah saya temukan. Akhirnya seseorang mengerti cara melakukannya dengan BENAR!
Milo Persic – pengguna perpustakaan
Wawasan Singkat
Tutorial video 1 menit
Pelajari ini hanya dalam satu menit:
Penggunaan dasar
Konfigurasi
Filternya
Penampilan
Gaya Judul
Gaya teks yang telah ditentukan sebelumnya untuk solusi mudah dan cepat
Arahkan kursor ke gambar untuk melihat gaya teks yang dikonfigurasi. Mainkan tombol dan pemilih warna untuk mengonfigurasi gaya bawaan yang ditampilkan.
Tag & Filter
Untuk menampilkan gambar Anda dengan cara yang lebih terstruktur
Sistem filter bawaan sangat fleksibel. Fakta bahwa pemilih CSS digunakan untuk penyaringan sebenarnya memungkinkan hampir semua jenis filter.
Sangat Kompatibel
Dapat Digunakan Dengan Banyak Lightbox
Gabungkan galeri dengan lightbox mana pun. Kemungkinannya kompatibel hampir 100%. Klik gambar untuk melihat lightbox PhotoSwipe sebagai contoh.
Ada artikel blog dengan potongan kode yang sudah jadi:
Sangat Fleksibel
Buat Gaya Kustom
Jika Anda familier dengan CSS, Anda dapat menata item galeri sesuai keinginan.
CSS dari contoh yang ditampilkan:
/* 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;
}Gunakan HTML apa pun
Anda dapat menggunakan hampir semua HTML. Hanya ada sedikit batasan. Kedua contoh yang ditampilkan di sini 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
Pemuatan Malas
Memuat gambar yang Anda lihat lebih cepat
Ini hanya memuat gambar yang dekat dengan area yang terlihat. Jadi bandwidth lebih besar untuk gambar yang terlihat.
API
Memungkinkan Anda melakukan lebih banyak hal
Hal ini memungkinkan Anda untuk menambahkan dan menghapus gambar secara terprogram, mengubah pilihan, atau bereaksi terhadap peristiwa.
Ekstensi
Memberikan Anda solusi untuk skenario individual
Ini adalah kumpulan artikel blog yang berkembang seiring waktu dan berisi potongan kode bermanfaat untuk memperluas Gridzy.Gallery dengan mudah.
Pengguna Tentang Perpustakaan
Mari kita mulai bisnis!
Klik tombol untuk memeriksa rencananya!