Gridzy.Gallery
Perpustakaan JavaScript
Pengalaman bergambar yang paling menakjubkan yang saya temui. Akhirnya seseorang memahami cara melakukan BETUL ini!
Milo Persic – pengguna perpustakaan
Wawasan Pantas
1 minit video tutorial
Pelajari ini hanya dalam satu minit:
Penggunaan asas
Konfigurasi
Penapis
Penampilan
Gaya Kapsyen
Gaya kapsyen yang dipratakrifkan untuk penyelesaian cepat yang mudah
Tuding imej untuk melihat gaya kapsyen yang dikonfigurasikan. Main dengan butang dan pemilih warna untuk mengkonfigurasi gaya terbina dalam yang ditunjukkan.
Teg & Penapis
Untuk memaparkan imej anda dengan cara yang lebih berstruktur
Sistem penapis terbina dalam sangat fleksibel. Hakikat bahawa pemilih CSS digunakan untuk penapisan sebenarnya membolehkan hampir semua jenis penapis.
Sangat Serasi
Boleh Digunakan Dengan Banyak Peti Cahaya
Gabungkan galeri dengan mana-mana peti cahaya. Kebarangkalian ia serasi adalah hampir 100%. Klik imej untuk melihat peti cahaya PhotoSwipe sebagai contoh.
Terdapat artikel blog dengan coretan kod siap sedia:
Sangat Fleksibel
Buat Gaya Tersuai
Jika anda biasa dengan CSS, anda boleh menggayakan item galeri seperti yang anda mahukan.
CSS contoh yang ditunjukkan:
/* 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 mana-mana HTML
Anda boleh menggunakan hampir semua HTML. Terdapat hanya sedikit sekatan. Contoh yang ditunjukkan di sini kedua-duanya 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>Ciri Lebih Berguna
Malas Memuatkan
Memuatkan imej yang anda lihat dengan lebih pantas
Ini hanya memuatkan imej yang berdekatan dengan kawasan yang boleh dilihat. Jadi lebih lebar jalur untuk imej yang boleh dilihat.
API
Membolehkan anda melakukan lebih banyak lagi
Ini membolehkan anda menambah dan mengalih keluar imej secara pengaturcaraan, menukar pilihan atau bertindak balas kepada peristiwa.
Sambungan
Memberi anda penyelesaian untuk senario individu
Ia ialah koleksi artikel blog yang berkembang dari semasa ke semasa dan mengandungi coretan kod yang berguna untuk melanjutkan Gridzy.Gallery dengan mudah.
Pengguna Mengenai Perpustakaan
Jom mula berniaga!
Klik butang untuk menyemak rancangan!