Versi 2.x – Gridzy.Gallery

Situs web telah diterjemahkan secara otomatis. Jika ada yang kurang jelas, silakan lihat dokumentasi bahasa Inggris.

Penggunaan Dasar

Unggah file Gridzy ke server Anda dan tambahkan ke situs web Anda (biasanya di bagian kepala):

<link rel="stylesheet" href="gridzy/gridzy.min.css" />
<script src="gridzy/gridzy.min.js"></script>

Tambahkan kode HTML (di mana saja di bagian badan):

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

Itu saja! Itu contoh yang berfungsi penuh. Tidak diperlukan inisialisasi tambahan.

Konfigurasi

Cara termudah untuk mengonfigurasi Gridzy adalah dengan hanya menggunakan atribut HTML. Anda hanya perlu memberi awalan data-gridzy- pada nama opsi. Jadi, untuk menyetel opsi spaceBetween , cukup tambahkan atribut data-gridzy-spaceBetween .

<div class="gridzy" data-gridzy-spaceBetween="20" data-gridzy-desiredHeight="400">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

Opsi Utama

	Nilai Default	Keterangan
`animate`	`true`	Menentukan apakah animasi harus digunakan saat kisi berubah (misalnya, saat mengubah ukuran jendela browser atau saat mengatur filter).
`layout`	`justified`	Menentukan tata letak yang digunakan. Gridzy.js 2 mendukung dua tata letak yang berbeda `justified` dan `waterfall` . Masing-masing memiliki parameter opsi tambahannya sendiri, yang dapat Anda temukan di bawah tabel ini.
`filter`	`*`	Menentukan gambar mana yang akan ditampilkan. Pemilih CSS apa pun dapat digunakan sebagai nilai di sini. Biasanya ditetapkan secara otomatis melalui `filterControls` (lihat opsi berikutnya). Lihat Filter
`filterControls`		Menentukan elemen formulir mana yang dapat digunakan untuk memfilter gambar. Pemilih CSS apa pun yang memilih elemen formulir HTML dapat digunakan sebagai nilai di sini. Lihat Filter
`autoConsiderScrollBars`	`true`	Untuk memprediksi lebar yang tersedia jika bilah gulir muncul atau menghilang. Sebaiknya biarkan tetap `true` kecuali otomatisme ini menyebabkan masalah.

Justified Opsi Tata Letak

	Nilai Default	Keterangan
`autoFontSize`	`false`	Secara otomatis memperbarui properti font-size dari setiap kotak berdasarkan ukuran kotak asli. Secara default, properti font-size tidak ditetapkan secara eksplisit.
`desiredHeight`	`190`	Menentukan tinggi baris elemen yang diinginkan. Tinggi sebenarnya akan dihitung tergantung pada lebar yang tersedia dan elemen dalam baris.
`hideOnMissingImage`	`true`	Menyembunyikan kotak yang berisi gambar yang tidak dapat dimuat.
`spaceBetween`	`4`	Menentukan jarak antara elemen dalam piksel.
`lastRowAlign` sejak versi 2.3.0	`justified`	Menentukan perilaku baris terakhir. Nilai yang diizinkan adalah `left` , `center` , `right` , dan `justified` .
`singleRowAlign` sejak versi 2.3.0	`justified`	Menentukan perilaku jika hanya ada satu baris. Nilai yang diizinkan adalah `left` , `center` , `right` , dan `justified` .
~~`fillLastRow`~~ ~~sejak versi 2.1.0~~	~~`true`~~	DIHAPUS sejak versi 2.4.0 (TIDAK DIGUNAKAN LAGI sejak versi 2.3.0 ) Menyusun gambar sehingga baris terakhir selalu terisi penuh. Jika Anda berencana untuk menambahkan gambar secara dinamis, sebaiknya nonaktifkan ini. Tidak berpengaruh pada baris tunggal (lihat `fillSingleRow` ).
`fillSingleRow` sejak versi 2.1.0	~~`true`~~	DIHAPUS sejak versi 2.4.0 (TIDAK DIGUNAKAN LAGI sejak versi 2.3.0 ) Jika hanya ada satu baris, fitur ini akan mengatur gambar-gambar sehingga baris tersebut selalu terisi penuh. Jika Anda hanya memiliki satu atau dua gambar di galeri, sebaiknya fitur ini dinonaktifkan.

Waterfall Opsi Tata Letak

	Nilai Default	Keterangan
`autoFontSize`	`false`	Secara otomatis memperbarui properti font-size dari setiap kotak berdasarkan ukuran kotak asli. Secara default, properti font-size tidak ditetapkan secara eksplisit.
`desiredWidth`	`250`	Menentukan lebar kolom yang diinginkan. Lebar sebenarnya akan dihitung tergantung pada lebar yang tersedia dan jumlah kolom.
`hideOnMissingImage`	`true`	Menyembunyikan kotak yang berisi gambar yang tidak dapat dimuat.
`horizontalOrder`	`false`	Menentukan bahwa elemen-elemen ditempatkan secara ketat satu elemen di setiap kolom dari kiri ke kanan, kemudian dimulai lagi di kolom paling kiri, terlepas dari kolom mana yang lebih banyak tempatnya. Secara default, elemen-elemen akan selalu ditempatkan di kolom dengan tinggi terkecil.
`spaceBetween`	`4`	Menentukan jarak antara elemen dalam piksel.
`singleRowAlign` since version 2.7.0	`justified`	Defines the behavior when not all columns can be filled due to too few images. Allowed values are `left`, `center`, `right` and `justified`.

Opsi Lebih Lanjut

Untuk pilihan yang lebih canggih, periksa API .

HTML semantik

Struktur HTML Gridzy yang paling sederhana adalah ini:

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

Namun, Gridzy sangat fleksibel dan Anda dapat menggunakan hampir semua struktur HTML lainnya. Hanya ada beberapa hal yang perlu dipertimbangkan:

Tiap anak elemen kontainer mewakili satu item dalam kisi.
Baik elemen kontainer maupun turunannya dapat berupa tipe tag apa pun, seperti ul dan li (pertimbangkan untuk mengatur ulang default browser).
Jika suatu elemen img bukan merupakan anak langsung, elemen tersebut memerlukan kelas gridzyImage .

Jadi ini juga merupakan struktur HTML yang berfungsi:

<ul class="gridzy">
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
    </span>
  </li>
</ul>

Terutama jika Anda ingin menambahkan teks, Anda memerlukan struktur HTML tingkat lanjut. Untuk mempelajari lebih lanjut tentang hal ini, lihat Teks & Tampilan .

Teks dan Kulit

Jika Anda ingin menambahkan teks ke galeri Anda, Anda perlu menentukan tampilannya. Oleh karena itu, tersedia beberapa tampilan yang telah ditentukan sebelumnya. Setiap tampilan terdiri dari file CSS. Anda perlu menambahkan file ini sebagai tambahan ke file Gridzy utama (biasanya di bagian kepala):

<link rel="stylesheet" href="gridzy/skins/gridzySkinClassic/style.min.css" />

Selanjutnya Anda memerlukan struktur HTML tingkat lanjut:

<div class="gridzy gridzySkinClassic">
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    <figcaption class="gridzyCaption">a caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    <figcaption class="gridzyCaption">another caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
    <figcaption class="gridzyCaption">yet another caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
    <figcaption class="gridzyCaption">a caption text again</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
    <figcaption class="gridzyCaption">one last caption text</figcaption>
  </figure>
</div>

Jika Anda bertanya-tanya tentang struktur HTML, lihatlah Semantic HTML .

Untuk keterangan, Anda dapat menggunakan jenis tag apa pun, pastikan tag tersebut memiliki kelas gridzyCaption . Elemen img memerlukan kelas gridzyImage .

Contoh di atas menunjukkan skin gridzySkinClassic . Untuk menggunakan skin yang berbeda, cukup ganti nama skin dengan salah satu dari berikut ini:

Kulit Termasuk

	Kelas yang tersedia
gridzyKulitKosong titik awal yang baik untuk membuat kulit Anda sendiri pratinjau langsung	`gridzySkinBlank`
gridzySkinClassic pratinjau langsung	`gridzySkinClassic` `gridzySkinClassicLight`(TIDAK DIGUNAKAN LAGI sejak versi 2.6.0)
gridzySkinFullOverlay pratinjau langsung	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(TIDAK DIGUNAKAN LAGI sejak versi 2.6.0)
gridzySkinLift pratinjau langsung	`gridzySkinLift` `gridzySkinLiftLight`(TIDAK DIGUNAKAN LAGI sejak versi 2.6.0)
gridzySkinMagnifier fungsi zoom tidak disertakan pratinjau langsung	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(TIDAK DIGUNAKAN LAGI sejak versi 2.6.0)

Semua skin di atas hanya memerlukan file CSS, tetapi ada skin tambahan yang juga memerlukan file JavaScript:

<link rel="stylesheet" href="gridzy/skins/gridzySkinBlur/style.min.css" />
<script src="gridzy/skins/gridzySkinBlur/script.min.js"></script>

	Kelas yang tersedia
gridzySkinBlur tidak bekerja di IE pratinjau langsung	`gridzySkinBlur` `gridzySkinBlurLight`(TIDAK DIGUNAKAN LAGI sejak versi 2.6.0)
gridzySkinCard pratinjau langsung	`gridzySkinCard` `gridzySkinCardLight`(TIDAK DIGUNAKAN LAGI sejak versi 2.6.0)

Pilihan Kulit

Sejak versi 2.6.0 ada Opsi untuk mengonfigurasi tampilan bawaan. Bergantung pada tampilan tertentu, Anda dapat mengatur warna latar belakang, warna teks, dan bayangan teks. Anda hanya perlu menggunakan properti khusus CSS seperti yang dapat Anda lihat di sini:

<div class="gridzy gridzySkinClassic" style="--background: rgba(0, 80, 117, .8); --color: rgb(238, 238, 238); ">
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    <figcaption class="gridzyCaption">a caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    <figcaption class="gridzyCaption">another caption text</figcaption>
  </figure>

  ...

</div>

Lihat variabel yang didukung dan nilai default untuk setiap skin di sini:

gridzySkinClassic

Variabel	Nilai Default	Informasi
`--background`	`rgba(0, 0, 0, .7)`	memungkinkan nilai latar belakang CSS apa pun
`--color`	`rgb(255, 255, 255)`	memungkinkan nilai warna CSS apa pun
`--text-shadow`	`none`	memungkinkan nilai bayangan teks CSS apa pun

gridzySkinFullOverlay

Variabel	Nilai Default	Informasi
`--background`	`rgba(0, 0, 0, .7)`	memungkinkan nilai latar belakang CSS apa pun
`--color`	`rgb(255, 255, 255)`	memungkinkan nilai warna CSS apa pun
`--text-shadow`	`none`	memungkinkan nilai bayangan teks CSS apa pun

gridzySkinLift

Variabel	Nilai Default	Informasi
`--background`	`rgba(0, 0, 0, .7)`	memungkinkan nilai latar belakang CSS apa pun
`--color`	`rgb(255, 255, 255)`	memungkinkan nilai warna CSS apa pun
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	memungkinkan nilai bayangan teks CSS apa pun

gridzySkinMagnifier

Variabel	Nilai Default	Informasi
`--background`	`rgba(0, 0, 0, .7)`	memungkinkan nilai latar belakang CSS apa pun
`--color`	`rgb(255, 255, 255)`	memungkinkan nilai warna CSS apa pun

Kulit ini tidak mendukung --text-shadow

gridzySkinBlur

Variabel	Nilai Default	Informasi
`--background`	`rgba(0, 0, 0, .7)`	memungkinkan nilai latar belakang CSS apa pun
`--color`	`rgb(255, 255, 255)`	memungkinkan nilai warna CSS apa pun
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	memungkinkan nilai bayangan teks CSS apa pun

gridzySkinCard

Variabel	Nilai Default	Informasi
`--background`	`rgba(0, 0, 0, 1)`	memungkinkan nilai latar belakang CSS apa pun
`--color`	`rgb(255, 255, 255)`	memungkinkan nilai warna CSS apa pun
`--text-shadow`	`none`	memungkinkan nilai bayangan teks CSS apa pun

Semua tampilan yang telah ditetapkan sebelumnya hanya mendukung teks sederhana. Anda dapat membuat tampilan Anda sendiri dan lebih kompleks. Silakan lihat Style Gridzy .

Gaya Gridzy

Jika tidak ada skin yang telah ditentukan sesuai dengan kebutuhan Anda, Anda dapat mendesain skin Anda sendiri.

Cara termudah adalah dengan menyalin tampilan yang sudah ada terlebih dahulu dan menyesuaikannya dengan kebutuhan Anda. Tampilan gridzySkinBlank yang telah ditetapkan sebelumnya biasanya akan memberikan dasar yang baik serta dokumentasi yang baik dalam berkas CSS:

/** SKIN Blank **/

/* all gallery items (direct children of the main container element) */
.gridzySkinBlank > .gridzyItem {
  overflow: hidden;
}

/* all gallery images (predefined in Gridzy's main CSS file, but can be overridden) */
.gridzySkinBlank .gridzyImage {
}

/* all gallery captions (just create your very own style) */
.gridzySkinBlank .gridzyCaption {
  margin: 0;
  padding: .5em;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: opacity .5s;
  overflow: auto;
  background: rgba(0, 0, 0, .7);
  color: rgb(255, 255, 255);
}

.gridzySkinBlank > .gridzyItem:hover .gridzyCaption {
  opacity: 1;
}

Dalam berkas CSS, Anda akan menemukan kelas gridzySkinBlank , gridzyImage dan gridzyCaption . Gridzy sendiri tidak memerlukan kelas-kelas ini. Kelas-kelas ini hanya digunakan untuk penataan gaya, jadi Anda dapat menghapus atau mengganti namanya jika Anda mau.

Selain itu, Anda akan menemukan kelas CSS gridzyItem . Gridzy menetapkan kelas ini secara otomatis ke semua turunan langsung dari elemen wadah utama. Jadi, Anda dapat menggunakan kelas ini untuk memberi gaya pada item galeri Anda.

Pikirkan Hal-hal Penting

Konten item harus sepenuhnya responsif. Pertimbangkan bahwa ukuran elemen pasti akan berubah. Gunakan nilai persentase, bukan nilai piksel. Dan lihat opsi tata letak Gridzy autoFontSize , yang mengikat ukuran font ke ukuran kotak item.
Setiap item harus memiliki rasio aspek yang terdefinisi dengan baik. Rasio aspek item tidak akan pernah berubah dan diperlukan untuk menghitung grid. Jadi jika suatu item tidak secara otomatis memiliki rasio aspek yang terdefinisi dengan baik, tentukan terlebih dahulu secara manual (misalnya melalui css).

Dalam beberapa kasus, mungkin lebih mudah untuk menata konten item sebelum Gridzy diinisialisasi. Hapus saja kelas gridzy atau file javascript Gridzy untuk sementara waktu.

Selesai! Itu saja yang Anda butuhkan untuk membuat skin Anda sendiri. Sebagian besar skin yang telah ditetapkan tidak menggunakan lebih dari ini.

Namun, masih ada lagi yang bisa ditambahkan jika Anda suka…

Kulit Lanjutan

Gridzy menggunakan lebih banyak kelas CSS daripada hanya gridzyItem . Sebagian besar kelas tersebut akan diatur secara otomatis dan Anda juga dapat menggunakannya untuk penataan gaya.

Kelas Kontainer Utama

Nama Kelas	Keterangan
`gridzy` untuk mengatur secara manual	Gridzy secara otomatis menemukan elemen dengan kelas ini dan menginisialisasinya.
`gridzyAnimated`	Akan diatur secara otomatis jika opsi `animate` bernilai `true` . Jika kelas ini diatur secara manual, opsi `animate` akan otomatis bernilai `true` juga (kecuali jika secara eksplisit diatur ke `false` ).

Kelas Barang

Nama Kelas	Keterangan
`gridzyItem`	Akan ditetapkan segera setelah item memulai proses inisialisasi. Tidak akan pernah dihapus.
`gridzyItemInitializing`	Akan ditetapkan segera setelah item memulai proses inisialisasi. Akan digantikan oleh `gridzyItemReady` segera setelah item diinisialisasi sepenuhnya. Berarti bukan gambar yang dimuat sepenuhnya (lihat `gridzyItemLoading` ), tetapi item siap untuk ditampilkan.
`gridzyItemReady`	Akan mengganti `gridzyItemInitializing` segera setelah item diinisialisasi sepenuhnya. Tidak akan pernah dihapus. Berarti bukan gambar yang dimuat sepenuhnya (lihat `gridzyItemComplete` ), tetapi item siap untuk ditampilkan.
`gridzyItemLoading`	Akan ditetapkan segera setelah item memulai proses inisialisasi. Akan digantikan oleh `gridzyItemComplete` segera setelah gambar yang ada (biasanya hanya satu) dimuat sepenuhnya.
`gridzyItemComplete`	Akan mengganti `gridzyItemLoading` segera setelah gambar yang ada (biasanya hanya satu) dimuat sepenuhnya. Tidak akan pernah dihapus.
`gridzyItemInitialToVisible`	Akan ditetapkan segera setelah item mulai muncul pertama kali. Akan dihapus segera setelah item terlihat sepenuhnya.
`gridzyItemVisible`	Akan ditetapkan segera setelah item terlihat sepenuhnya. Akan dihapus segera setelah item mulai menghilang.
`gridzyItemVisibleToHidden`	Akan ditetapkan segera setelah item mulai menghilang. Akan dihapus segera setelah item sepenuhnya tersembunyi.
`gridzyItemHidden`	Akan ditetapkan segera setelah item tersebut benar-benar tersembunyi. Akan dihapus segera setelah item tersebut mulai muncul.
`gridzyItemHiddenToVisible`	Akan ditetapkan segera setelah item mulai muncul (kecuali muncul pertama kali – lihat kelas `gridzyItemInitialToVisible` ). Akan dihapus segera setelah item terlihat sepenuhnya.
`gridzyItemVisibleToVisible`	Akan ditetapkan segera setelah ada yang berubah di grid, tetapi item itu sendiri tetap terlihat. Akan dihapus segera setelah animasi perubahan selesai.

Secara default, indikator proses dan animasi untuk muncul dan menghilangnya gambar telah ditentukan sebelumnya oleh file CSS utama Gridzy.

Dengan kelas-kelas CSS yang disebutkan di atas, Anda dapat membuat indikator proses dan animasi Anda sendiri. Cobalah lihat berkas CSS utama Gridzy untuk memahami apa yang harus Anda timpa. Jangan khawatir, semuanya terdokumentasi dengan baik di sana.

Optimalkan Pemuatan

Jika Anda menggunakan banyak gambar, mungkin akan lebih baik jika membantu Gridzy membangun grid lebih cepat.

Mencegah Gambar Melompat

Gridzy benar-benar membutuhkan rasio aspek semua gambar untuk menghitung grid. Fakta ini mengakibatkan elemen melompat jika beberapa gambar sudah siap dan yang lainnya belum. Semakin banyak gambar, efek ini bisa semakin mengganggu.

Untuk mencegah perilaku ini, cukup tetapkan atribut width dan height untuk semua elemen img . Penting untuk menetapkan nilai yang benar untuk setiap gambar, jika tidak gambar akan terdistorsi. Nilai yang benar adalah lebar dan tinggi asli dari masing-masing gambar:

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

Setelah itu Gridzy dapat langsung menghitung grid tanpa perlu mengetahui ukuran gambar sebenarnya.

Pemuatan Malas

Untuk memuat hanya gambar yang berada dalam viewport yang terlihat, cukup ikuti langkah-langkah berikut:

Masukkan atribut width dan height seperti dijelaskan di atas (pastikan untuk menggunakan nilai yang benar)
Ganti semua atribut src dengan data-gridzylazysrc seperti yang ditunjukkan di bawah ini (jika Anda juga memiliki atribut srcset , ganti dengan data-gridzylazysrcset ).

<div class="gridzy">
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img data-gridzylazysrc="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

Setelah langkah-langkah ini gambar akan dimuat segera setelah berada di dekat atau di dalam viewport.

Indikator Proses

Indikator proses adalah ikon animasi kecil yang muncul saat gambar dimuat. Jika Anda menggunakan teks & tampilan , indikator proses akan ditampilkan secara otomatis. Jika tidak, Anda perlu beberapa penyesuaian:

Letakkan setiap elemen img ke dalam elemen div
(atau ke elemen lainnya – lihat HTML semantik untuk informasi lebih lanjut)
Tambahkan kelas gridzyImage ke setiap elemen img

<div class="gridzy">
  <div><img src="https://loremflickr.com/640/480?random=1" class="gridzyImage" alt="a random image" /></div>
  <div><img src="https://loremflickr.com/480/640?random=2" class="gridzyImage" alt="another random image" /></div>
  <div><img src="https://loremflickr.com/640/640?random=3" class="gridzyImage" alt="yet another random image" /></div>
  <div><img src="https://loremflickr.com/640/480?random=4" class="gridzyImage" alt="a random image again" /></div>
  <div><img src="https://loremflickr.com/640/480?random=5" class="gridzyImage" alt="one last random image" /></div>
</div>

Setelah itu Anda akan melihat indikator proses jika gambar memerlukan waktu untuk dimuat.

Filternya

Filter di Gridzy cukup sederhana tetapi ampuh. Apa pun jenis filter yang Anda butuhkan, kemungkinan besar itu dapat direalisasikan. Yang Anda butuhkan hanyalah sedikit CSS dan beberapa elemen formulir HTML …

Berikut adalah contoh fungsional:

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Mari Membangunnya Langkah demi Langkah

1. Pertama kita perlu struktur HTML Gridzy yang biasa dan mengatur nama kelas untuk semua item galeri sehingga kita dapat memfilternya setelahnya

<div class="gridzy">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Dalam contoh ini, kami hanya menggunakan satu kelas untuk setiap elemen. Namun, Anda juga dapat menetapkan beberapa kelas untuk satu elemen, jika elemen tersebut dapat ditemukan melalui beberapa filter.

2. Kemudian kita tambahkan beberapa tombol yang bisa kita gunakan untuk mengubah filternya

<button value="*">All</button>
<button value=".animals">Animals</button>
<button value=".architecture">Architecture</button>
<button value=".people">People</button>

<div class="gridzy">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Selain tombol, Anda juga dapat menggunakan elemen formulir lainnya seperti kotak centang, tombol radio, bidang pilih, dan seterusnya.

Seperti yang dapat Anda lihat, nilai tombol adalah pemilih CSS biasa. Begitu selesai, klik tombol tersebut akan menampilkan gambar yang cocok dengan pemilih CSS tersebut. Secara teknis, ini hanya menyetel opsi filter ke nilai ini.

Anda juga dapat menggunakan selector yang lebih kompleks. Misalnya :not(.animals) juga dapat digunakan, begitu pula .animals.people dan .animals, .people .

3. Terakhir, kami merangkum tombol-tombol tersebut dalam wadah div dan mengikatnya ke galeri Gridzy, dengan menyetel opsi filterControls :

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Seperti yang dapat Anda lihat, kami juga menggunakan pemilih CSS untuk opsi filterControls . Wadah div dengan atribut id hanya berfungsi untuk membuat tombol lebih mudah dipilih melalui pemilih CSS tersebut.

Itu saja!

Jika Anda lebih suka solusi JavaScript, periksa API .

API

Meskipun Gridzy memiliki API-nya sendiri, sebagian besar hal dapat dilakukan tanpa API tersebut, cukup dengan memanipulasi DOM. Gridzy akan memperhatikannya dan menyesuaikan grid. Namun, ada juga API yang sangat canggih …

Memanipulasi DOM

Untuk semua manipulasi Document Object Model (DOM), pertama-tama kita memerlukan elemen kontainer:

// get the container element
var gridzyElement = document.querySelector('.gridzy');

Tambahkan Gambar

Penting untuk membangun dan mengisi elemen anak baru secara penuh sebelum Anda menambahkannya ke elemen kontainer. Jika tidak, Gridzy tidak dapat mendeteksi dimensi yang benar.

// create a new img element
var newImage = document.createElement('img');

// add src attribute (!! before you add it to the container element !!)
newImage.src = 'https://loremflickr.com/640/480';

// add it as last element to the container element
gridzyElement.appendChild(newImage);

// or as first element (or anywhere in between)
gridzyElement.insertBefore(newImage, gridzyElement.firstChild);

Hapus Gambar

// remove the first image
gridzyElement.removeChild(gridzyElement.firstElementChild);

Ubah Opsi

// change the spaceBetween option to a specific value
gridzyElement.setAttribute('data-gridzy-spaceBetween', '10');

// change the layout option to a specific value
gridzyElement.setAttribute('data-gridzy-layout', 'waterfall');

// reset the spaceBetween option to its default value
gridzyElement.removeAttribute('data-gridzy-spaceBetween');

Informasi lebih lanjut tentang manipulasi DOM dapat ditemukan di dokumen web MDN . Tersedia juga Pengantar DOM .

API milik sendiri

Untuk menggunakan API, pertama-tama kita memerlukan instance Gridzy, yang terikat pada elemen kontainer Gridzy:

// get the Gridzy instance
var gridzyInstance = document.querySelector('.gridzy').gridzy;

Dapatkan Opsi

// get the value of a single option
var currentLayout = gridzyInstance.getOption('layout');

Dapatkan Semua Opsi

// get all option values as an object
var currentOptions = gridzyInstance.getOptions();

Atur Opsi

// set specific option values
gridzyInstance.setOptions({
  spaceBetween: 10,
  layout: 'waterfall'
});

// or reset options to their default values
gridzyInstance.setOptions({
  spaceBetween: null,
  layout: null
});

Terapkan Filter

Menerapkan filter berarti menyetel opsi filter yang dapat berupa pemilih CSS apa pun yang valid:

// set the filter to match items with class "animals"
gridzyInstance.setOptions({
  filter: '.animals'
});

// reset the filter to match all items again
gridzyInstance.setOptions({
  filter: '*'
});

// set the filter to match items without class "animals"
gridzyInstance.setOptions({
  filter: ':not(.animals)'
});

// set the filter to match items with class "animals" or "people"
gridzyInstance.setOptions({
  filter: '.animals, .people'
});

// set the filter to match items that have both classes, "animals" and "people"
gridzyInstance.setOptions({
  filter: '.animals.people'
});

Tambahkan Fungsi Panggilan Balik

TIDAK DIGUNAKAN LAGI sejak versi 2.4.0
Gunakan Acara yang modern dan lebih fleksibel. Lihat bagian berikutnya untuk detailnya.

~~Gridzy.js 2 mendukung beberapa opsi untuk fungsi panggilan balik. Opsi tersebut hanya dapat diatur melalui API milik sendiri, tetapi sama seperti opsi lainnya:~~

// same as set other options
gridzyInstance.setOptions({
  onOptionsChanged: function() {
    // will be executed each time the options have changed.
  },
  onBeforeOptionsChanged: function() {
    // will be executed, before new options take effect.
  }
});

	~~Keterangan~~
~~`onBeforeOptionsChanged`~~	~~Fungsi panggilan balik yang dipanggil langsung sebelum mengatur opsi.~~
~~`onOptionsChanged`~~	~~Fungsi panggilan balik yang dipanggil langsung setelah mengatur opsi.~~
~~`onBeforeRender`~~	~~Fungsi panggilan balik yang dipanggil langsung sebelum rendering.~~
~~`onRender`~~	~~Fungsi panggilan balik yang dipanggil langsung setelah rendering.~~

Gunakan Acara

sejak versi 2.4.0

Anda dapat menggunakan acara Gridzy persis seperti acara JavaScript biasa:

document.addEventListener('gridzyOptionsChanged', function(event) {
    // will be executed each time the options have changed.
});

document.addEventListener('gridzyBeforeOptionsChanged', function(event) {
    // will be executed, before new options take effect.
});

Beberapa peristiwa dipicu pada elemen kontainer Gridzy dan peristiwa lain dipicu pada elemen item individual dalam elemen kontainer.

Peristiwa yang terjadi pada elemen kontainer Gridzy:

	Keterangan
`gridzyBeforeInit`	Kebakaran sebelum inisialisasi galeri.
`gridzyInit`	Kebakaran setelah inisialisasi galeri.
`gridzyBeforeOptionsChanged`	Menembak sebelum mengatur opsi.
`gridzyOptionsChanged`	Menyala setelah mengatur opsi.
`gridzyBeforeRender`	Kebakaran sebelum dirender.
`gridzyRender`	Kebakaran setelah rendering.

Jika Anda melewatkan acara apa pun di sini, silakan kirim permintaan dukungan .

event.target menyediakan elemen kontainer Gridzy.
event.detail.instance menyediakan instance Gridzy.

Peristiwa yang terjadi pada elemen item:

	Keterangan
`gridzyItemBeforeInit`	Diaktifkan sebelum inisialisasi item.
`gridzyItemInit`	Menyala setelah inisialisasi item.
`gridzyItemLoading`	Menyala saat item mulai dimuat.
`gridzyItemReady`	Diaktifkan saat item siap untuk kalkulasi grid. Jadi rasio aspeknya diketahui, tetapi gambar mungkin masih dimuat.
`gridzyItemComplete`	Menyala ketika gambar item dimuat secara penuh.

Jika Anda melewatkan acara apa pun di sini, silakan kirim permintaan dukungan .

event.target menyediakan elemen item masing-masing.
event.detail.instance menyediakan instance Gridzy.

API – Global

Ada beberapa fungsi yang independen dari instance Gridzy. Jadi, kita tidak perlu mendapatkan instance sebelumnya.

Dapatkan Opsi Default

// get the default value of a single option
var defaultLayout = Gridzy.getDefaultOption('layout');

Dapatkan Semua Opsi Default

// get all default option values as an object, including the default layout options of the default layout
var defaultOptions = Gridzy.getDefaultOptions();

// or get all default option values, including the default layout options of a specific layout
var defaultOptions = Gridzy.getDefaultOptions('waterfall');

Tetapkan Opsi Default

Ini tidak menyetel opsi dari semua instance Gridzy yang sudah diinisialisasi, tetapi menentukan dasar untuk instance baru. Namun, jika opsi instance yang sudah ada disetel ulang melalui nilai null , maka opsi tersebut akan menggunakan nilai default yang baru.

// set default option values
Gridzy.setDefaultOptions({
  spaceBetween: 10,
  layout: 'waterfall'
});

Anda dapat menggunakan ini untuk menyetel opsi secara global, jika Anda memanggilnya sebelum DOM siap. Jadi Anda tidak perlu lagi menyetel opsi sebagai atribut.

Otomatisme

Selama semua automatisme Gridzy.js 2 aktif, metode di bawah ini tidak diperlukan. Namun, automatisme dapat dinonaktifkan untuk menggunakan Gridzy dengan cara yang lebih tradisional:

// disable automatic initializations
Gridzy.setDefaultOptions({
  autoInitOnDomReady: false,
  autoInitOnDomMutation: false
});

// or switch off all mutation observers
Gridzy.setDefaultOptions({
  autoInitOnDomMutation: false,
  autoSyncChildListMutation: false,
  autoSyncAttributesMutation: false,
  autoSyncChildClassMutation: false,
  autoSyncImageMutation: false
});

Beberapa opsi ini tidak dapat diatur melalui data-gridzy- attributes atau melalui setOptions() , karena alasan logis:

	Nilai Default	Keterangan
`autoInitOnDomReady`	`true`	Mendeteksi elemen dengan kelas `gridzy` saat memuat halaman dan menginisialisasinya. Dapat diatur melalui `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Pengamat Mutasi	`true`	Mendeteksi elemen baru dengan kelas `gridzy` segera setelah muncul di DOM dan menginisialisasinya. (misalnya saat menggunakan transisi halaman) Dapat diatur melalui `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Pengamat Mutasi	`true`	Mendeteksi apakah elemen anak (gambar) ditambahkan atau dihapus, dan memperbarui kisi secara otomatis. Dapat diatur melalui `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Menentukan apakah atribut `data-gridzy-` umumnya digunakan atau tidak. Jika `false` , opsi hanya dapat ditetapkan melalui API milik sendiri. Dapat diatur melalui `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Pengamat Mutasi	`true`	Mendeteksi perubahan atribut `data-gridzy-` dan memperbarui grid secara otomatis. Mendeteksi juga jika kelas `gridzyAnimated` ditambahkan atau dihapus dan jika terjadi perubahan atribut `style` . Jika `useOptionAttributes` bernilai `false` , maka hanya mendeteksi perubahan atribut `style` . Dapat diatur melalui `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Pengamat Mutasi	`true`	Mendeteksi perubahan atribut `class` dari semua elemen anak (gambar). Relevan terkait filter. Dapat diatur melalui `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Pengamat Mutasi sejak versi 2.5.0	`true`	Mendeteksi perubahan atribut `src` dari semua gambar. Relevan bila digunakan dengan React atau pustaka serupa. Dapat diatur melalui `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Pengamat Ubah Ukuran sejak versi 2.6.0	`true`	Mendeteksi perubahan lebar elemen. Relevan terkait desain responsif. (Sebelum versi 2.6.0, pendengar peristiwa pengubahan ukuran jendela digunakan) Dapat diatur melalui `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Inisialisasi Secara Manual

// initialize a new Gridzy instance
var gridzyInstance = new Gridzy(document.querySelector('.gridzy'), {
  spaceBetween: 10,
  layout: 'waterfall'
});

Hancurkan Instansi

Secara kasar, kebalikan dari inisialisasi Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sinkronkan Daftar Anak Secara Manual

// after child elements (images) are added to or removed from the DOM.
gridzyInstance.syncChildList();

Sinkronkan Elemen Anak Tunggal Secara Manual

Biasanya tidak diperlukan, kecuali dalam kasus yang sangat jarang.

// after child elements (images) are added to the DOM and only one of them should be synced to Gridzy.
gridzyInstance.syncChild(childElement);

Sinkronkan Atribut Secara Manual

Perhatikan bahwa opsi useOptionAttributes harus true untuk ini.

// after data-gridzy- attributes have changed
gridzyInstance.syncAttributes();

Rendering Paksa

Biasanya tidak diperlukan, bahkan jika semua otomatisme dimatikan

gridzyInstance.render();

Plugin WordPress

Pustaka JavaScript

Melayani