Versi 2.x – Gridzy.Gallery

Situs web enda enggo iterjemahken secara otomatis. Adi lit si la jelas, banci siperdiateken dokumentasi bahasa Inggris.

Penggunaan Dasar .

Upload file-file Gridzy ku serverndu janah tambahken ku websitendu (biasana i bas bagin kepala):

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

Tambahken kode HTML (i japa pe i bas bagin 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>

Enda me! Enda me contoh si lengkap fungsina. Labo perlu inisialisasi ekstra.

Konfigurasi

Cara si gampang guna mengkonfigurasi Gridzy eme, alu make atribut HTML saja. Perlu saja ibahanndu awalan gelar-gelar pilihen alu data-gridzy- . Jadi, guna ngaturken pilihen spaceBetween , tambahken saja 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>

Pilihen Utama .

	Nilai Bawaan	Penjelasen
`animate`	`true`	Nentuken apakah animasi arus ipake sanga grid berubah (misalna, sanga ngubah ukuren jendela browser ntah pe sanga ngaturken filter).
`layout`	`justified`	Nentuken tata letak si ipakena. Gridzy.js 2 mendukung dua tata letak si berbeda `justified` ras `waterfall` . Masing-masing lit parameter pilihen tambahenna, si banci idatndu i teruh tabel enda.
`filter`	`*`	Nentuken gambar si apai si arus icidahken. CSS-selector kai pe banci ipake jadi nilai ijenda. Biasana iaturken secara otomatis arah `filterControls` (nen pilihen selanjutna). Perdiateken Saringan .
`filterControls`		Nentuken unsur bentuk si apai si banci ipake guna menyaring gambar-gambar e. Pemilih CSS kai pe, si milih elemen form HTML, banci ipake jadi nilai i jenda. Perdiateken Saringan .
`autoConsiderScrollBars`	`true`	Guna memprediksi lebar si lit adi bilah gulungen muncul ntah pe lanai lit. Lalap isaranken gelah itadingken i bas `true` kecuali otomatisme enda erbahanca lit masalah.

Justified pilihen tata letak

	Nilai Bawaan	Penjelasen
`autoFontSize`	`false`	Otomatis ipelimbaruina properti ukuren huruf tiap kotak erpalasken ukuren kotak aslina. Secara default properti ukuren huruf la iaturken secara eksplisit.
`desiredHeight`	`190`	Nentuken tinggi si isuraken i bas barisen elemen. Tinggina situhuna ihitung tergantung ku lebar si lit ras unsur-unsur si lit i bas barisen e.
`hideOnMissingImage`	`true`	Ibunikenna kotak-kotak si lit gambarna si la banci imuat.
`spaceBetween`	`4`	Nentuken jarak antar elemen ibas piksel.
`lastRowAlign` mulai versi 2.3.0 nari.	`justified`	Nentuken perbahanen si lit i bas barisen si terakhir. Nilai si banci ibereken eme `left` , `center` , `right` ras `justified` .
`singleRowAlign` mulai versi 2.3.0 nari.	`justified`	Mendefinisiken perbahanen adi lit sada baris ngenca. Nilai si banci ibereken eme `left` , `center` , `right` ras `justified` .
~~`fillLastRow`~~ ~~mulai versi 2.1.0 nari.~~	~~`true`~~	IHAPUS mulai versi 2.4.0. (LAI Igunaken mulai versi 2.3.0 ) Iaturkenna gambar-gambar e gelah barisen si terakhir lalap lengkap iisi. Adi lit rencanandu nambahi gambar secara dinamis, banci saja mehuli adi inonaktifkenndu enda. La lit pengaruhna man baris si sada (nen `fillSingleRow` ).
`fillSingleRow` mulai versi 2.1.0 nari.	~~`true`~~	IHAPUS mulai versi 2.4.0. (LAI Igunaken mulai versi 2.3.0 ) ~~Adi sada baris ngenca, iaturkenna gambar-gambar e gelah baris e lalap lengkap isi. Adi banci terjadi sada ntah dua gambar ngenca lit bas galeri, banci saja mehuli adi inonaktifkenndu enda.~~

Waterfall Tata Letak

	Nilai Bawaan	Penjelasen
`autoFontSize`	`false`	Otomatis ipelimbaruina properti ukuren huruf tiap kotak erpalasken ukuren kotak aslina. Secara default properti ukuren huruf la iaturken secara eksplisit.
`desiredWidth`	`250`	Nentuken lebar kolom si isuraken. Lebar si sebenarna ihitung tergantung ku lebar si lit ras jumlah kolom.
`hideOnMissingImage`	`true`	Ibunikenna kotak-kotak si lit gambarna si la banci imuat.
`horizontalOrder`	`false`	Mendefinisiken maka unsur-unsur e itamaken alu ketat sada unsur ibas tep-tep kolom mulai kiri ku kanan, kenca si e ibenaken mulihi ibas kolom si paling kiri mandiri ibas kolom si apai si lebih inganna. Secara default unsur-unsur e lalap itamaken i bas kolom si tinggina si kitikna.
`spaceBetween`	`4`	Nentuken jarak antar elemen ibas 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`.

Pilihen si lebih maju .

Guna pilihen si lebih maju, nehenlah API .

HTML si ertina

Struktur HTML Gridzy si paling sederhana eme:

<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>

Tapi, Gridzy enda fleksibel kel janah banci ipakendu hampir kerina struktur HTML si deban. Lit piga-piga hal si perlu siperdiateken:

Tiap anak unsur wadah e mewakili sada barang ibas kisi-kisi.
Baik unsur wadah bagepe anak-anakna banci jenis tag kai pe, misalna ul ras li (pertimbangkan saja guna mereset default browser).
Adi sada elemen img labo anak langsung sendiri, maka perlu kelas gridzyImage .

Jadi enda pe sada struktur HTML si erdahin:

<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>

Terlebih adi ateta nambahi caption, perlu struktur HTML si canggih. Guna meteh terbuen kerna si e, nehenlah Captions & Skins .

Keterangan ras Kulit

Adi atendu nambahi caption ku galerindu, perlu itentukenndu penampilenna. Emaka, lit piga-piga kulit si enggo itentuken. Tiap kulit terdiri ibas sada file CSS. Perlu itambahkenndu file enda selain file-file Gridzy utama (biasana i bas bagin ulu):

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

Selanjutna perlu struktur HTML si maju:

<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>

Adi lit si tersungkun-sungkun kerna struktur HTML, nehenlah Semantic HTML .

Bagi caption banci ipakendu jenis tag kai pe, pastiken saja lit kelas gridzyCaption . Unsur img perlu kelas gridzyImage .

Contoh i datas ncidahken man bandu kulit gridzySkinClassic . Guna make si deban, ganti saja gelar kulit alu salah sada si enda:

Kulit si termasuk .

	Kelas si lit .
Kulit si kosong titik awal si mehuli guna erbahan kulit sendiri . pratinjau langsung	`gridzySkinBlank`
gridzySkinClassic pratinjau langsung	`gridzySkinClassic` `gridzySkinClassicLight`(LAI Igunaken mulai versi 2.6.0)
gridzySkinFullOverlay pratinjau langsung	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(LAI Igunaken mulai versi 2.6.0)
gridzySkinLift pratinjau langsung	`gridzySkinLift` `gridzySkinLiftLight`(LAI Igunaken mulai versi 2.6.0)
gridzySkinMagnifier fungsi zoom la termasuk . pratinjau langsung	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(LAI Igunaken mulai versi 2.6.0)

Kerina skin i datas hanya perlu file CSS, tapi lit ka skin tambahen si perlu ka file JavaScript:

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

	Kelas si lit .
gridzySkinBlur labo erdahin i bas IE . pratinjau langsung	`gridzySkinBlur` `gridzySkinBlurLight`(LAI Igunaken mulai versi 2.6.0)
gridzySkinCard pratinjau langsung	`gridzySkinCard` `gridzySkinCardLight`(LAI Igunaken mulai versi 2.6.0)

Pilihen Kulit .

Mulai versi 2.6.0 lit Opsi guna mengkonfigurasi kulit-kulit si lit i bas. Tergantung kulit si khusus banci iaturkenndu warna latar belakang, warna teks ras bayangan teks. Kam hanya perlu make properti khusus CSS bagi si banci idahndu i jenda:

<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>

Perdiateken variabel si idukung ras nilai default guna tiap kulit i jenda:

gridzySkinClassic

Variabel	Nilai Bawaan	Berita
`--background`	`rgba(0, 0, 0, .7)`	banci lit nilai latar belakang CSS .
`--color`	`rgb(255, 255, 255)`	banci lit nilai warna CSS .
`--text-shadow`	`none`	banci lit nilai teks-bayangan CSS .

gridzySkinFullOverlay

Variabel	Nilai Bawaan	Berita
`--background`	`rgba(0, 0, 0, .7)`	banci lit nilai latar belakang CSS .
`--color`	`rgb(255, 255, 255)`	banci lit nilai warna CSS .
`--text-shadow`	`none`	banci lit nilai teks-bayangan CSS .

gridzySkinLift

Variabel	Nilai Bawaan	Berita
`--background`	`rgba(0, 0, 0, .7)`	banci lit nilai latar belakang CSS .
`--color`	`rgb(255, 255, 255)`	banci lit nilai warna CSS .
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	banci lit nilai teks-bayangan CSS .

gridzySkinMagnifier

Variabel	Nilai Bawaan	Berita
`--background`	`rgba(0, 0, 0, .7)`	banci lit nilai latar belakang CSS .
`--color`	`rgb(255, 255, 255)`	banci lit nilai warna CSS .

Kulit enda la mendukung --text-shadow

gridzySkinBlur

Variabel	Nilai Bawaan	Berita
`--background`	`rgba(0, 0, 0, .7)`	banci lit nilai latar belakang CSS .
`--color`	`rgb(255, 255, 255)`	banci lit nilai warna CSS .
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	banci lit nilai teks-bayangan CSS .

gridzySkinCard

Variabel	Nilai Bawaan	Berita
`--background`	`rgba(0, 0, 0, 1)`	banci lit nilai latar belakang CSS .
`--color`	`rgb(255, 255, 255)`	banci lit nilai warna CSS .
`--text-shadow`	`none`	banci lit nilai teks-bayangan CSS .

Kerina kulit si enggo itentuken hanya mendukung caption teks si sederhana. Banci ibanndu kulitndu sendiri ras lebih kompleks. Silahken siperdiateken Gaya Gridzy .

Gaya Gridzy .

Adi la lit kulit si enggo itentuken si cocok ras kebutuhenndu, banci ibahanndu gayandu sendiri.

Cara si gampangna eme salin lebe kulit si enggo lit janah sesuaiken ras kebutuhenndu sendiri. Kulit gridzySkinBlank si enggo itentuken biasana mereken palas si mehuli bage pe dokumentasi si mehuli i bas file 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;
}

I bas file CSS e banci idatndu kelas-kelas gridzySkinBlank , gridzyImage rasCaption gridzyCaption . Gridzy sendiri labo perlu kelas-kelas enda. Si enda hanya ipake guna styling ras emaka banci itangtangindu ntah pe igantindu gelarna adi ngena atendu.

Tambah si e, banci idatndu kelas CSS gridzyItem . Gridzy ngaturken kelas enda secara otomatis man kerina anak langsung elemen wadah utama. Jadi, banci ipakendu kelas enda guna nggayaken barang-barang galerindu.

Pikiren Hal-hal si Penting .

Isi barang e arus lengkap ras tanggapenna. Perdiateken maka ukuren unsur e pasti berubah. Pakelah nilai persentase labo nilai piksel. Janah nehenlah pilihen tata letak Gridzy autoFontSize , si ngiket ukuren-huruf ku ukuren kotak item.
Tiap barang arus lit rasio aspekna si enggo itentuken alu mehuli. Rasio aspek barang e la pernah berubah janah iperluken guna ngitung kisi-kisi. Jadi adi sada item la otomatis lit rasio aspekna si enggo itentuken alu mehuli, predefinisiken secara manual (misalna melalui css).

I bas piga-piga kasus, banci saja lebih gampang nggayaken isi barang-barang e ope denga Gridzy sangana inisialisasi. Cukup tangtangi kelas gridzy ntah pe file javascript Gridzy sementara guna enda.

Enda me! Enda ngenca si iperlukenndu guna membangun kulitndu sendiri. Kebanyaken kulit si enggo itentuken labo make lebih asa si enda.

Tapi banci saja lit denga si deban adi ngena atendu ...

Kulit si maju .

Gridzy make lebih melala kelas CSS asangken hanya gridzyItem . Melala si iaturken secara otomatis janah banci ipakendu guna styling pe.

Kelas-kelas Wadah Utama .

Gelar Kelas	Penjelasen
`gridzy` guna ngaturken alu manual .	Gridzy otomatis ndarami elemen-elemen ras kelas enda ras inisialisasiken.
`gridzyAnimated`	Bakal iaturken secara otomatis adi pilihen `animate` `true` . Adi kelas enda iaturken secara manual, pilihen `animate` otomatis pe jadi `true` (kecuali adi secara eksplisit iaturken ku `false` ).

Kelas-kelas Barang

Gelar Kelas	Penjelasen
`gridzyItem`	Bakal iaturken kenca item e mulai proses inisialisasi. Labo pernah itangtangi.
`gridzyItemInitializing`	Bakal iaturken kenca item e mulai proses inisialisasi. Bakal igantiken alu `gridzyItemReady` kenca barang e enggo lengkap iinisialisasi. Ertina labo gambar enggo lengkap (nen `gridzyItemLoading` ), tapi item enggo siap guna teridah.
`gridzyItemReady`	Bakal igantikenna `gridzyItemInitializing` kenca barang e enggo lengkap iinisialisasi. Labo pernah itangtangi. Ertina labo gambar enggo lengkap (nen `gridzyItemComplete` ), tapi item enggo siap guna teridah.
`gridzyItemLoading`	Bakal iaturken kenca item e mulai proses inisialisasi. Bakal igantiken alu `gridzyItemComplete` kenca gambar si lit i bas (biasana sada ngenca) enggo lengkap.
`gridzyItemComplete`	Bakal menggantiken `gridzyItemLoading` kenca gambar si lit i bas (biasana sada ngenca) enggo lengkap i muat. Labo pernah itangtangi.
`gridzyItemInitialToVisible`	Bakal iaturken kenca barang e mulai muncul tangtangna. Bakal itangtangi kenca barang e enggo lengkap teridah.
`gridzyItemVisible`	Bakal iaturken kenca barang e enggo lengkap teridah. Bakal itangtangi kenca barang e mulai bene.
`gridzyItemVisibleToHidden`	Bakal iaturken kenca barang e mulai bene. Bakal itangtangi kenca barang e enggo tuhu-tuhu ibuniken.
`gridzyItemHidden`	Bakal iaturken kenca barang e enggo tuhu-tuhu ibuniken. Bakal itangtangi kenca barang e mulai muncul.
`gridzyItemHiddenToVisible`	Bakal iaturken kenca barang e mulai muncul (kecuali muncul tangtangna – nehen kelas `gridzyItemInitialToVisible` ). Bakal itangtangi kenca barang e enggo lengkap teridah.
`gridzyItemVisibleToVisible`	Bakal iaturken kenca lit si berubah i bas kisi-kisi, tapi barang e sendiri enggo ras tetap teridah. Bakal itangtangi kenca dung animasi perubahen.

Secara default indikator proses ras animasi guna gambar si muncul ras si lesap enggo itentuken lebe alu file CSS utama Gridzy.

Alu kelas CSS si enggo isingetken ndai banci ibahanndu gaya indikator proses ras animasindu sendiri. Beranilah kam ngenehen ku bas file CSS utama Gridzy, guna ngangkai kai si arus igantikenndu. Labo mbiar, kerina enggo idokumentasiken alu mehuli i je.

Optimalken Pemuatan

Adi melala gambar si ipakendu, banci jadi mehuli adi isampatindu Gridzy mbangun kisi-kisi e alu pedas.

Cegahlah Gambar si Lompat .

Gridzy mutlak perlu rasio aspek kerina gambar guna ngitung kisi-kisi. Fakta enda erbahanca unsur-unsur lompat adi lit gambar si enggo siap ras si debanna lenga. Reh buena gambar si lit, reh menggangguna banci efek enda.

Guna mencegah perbahanen enda, aturken saja atribut width ras height man kerina elemen img . Penting kel itetapken nilai-nilai si benar man tep-tep gambar individu, adi lang gambar-gambar e pasti terdistorsi. Nilai si benar eme lebar ras tinggi asli gambar masing-masing:

<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>

Kenca si e Gridzy banci minter ngitung kisi-kisi e alu la perlu meteh ukuren gambar-gambar e situhuna.

Malas Muat

Guna muat gambar si lit i bas viewport si teridah saja, ikutken saja langkah-langkah enda:

Sisipken atribut width ras height bagi si enggo ituriken i datas (pastiken make nilai si benar)
Gantiken kerina atribut src alu data-gridzylazysrc bagi si lit i teruh enda (adi lit atribut srcset pe, gantiken alu 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>

Kenca langkah-langkah enda gambar-gambar e i muat kenca enggo ndeher ntah pe i bas viewport.

Indikator Proses .

Indikator proses eme ikon animasi si kitik si muncul sanga gambar e sangana muat. Adi ipakendu caption & skin , indikator prosesna teridah secara otomatis. Adi lang perlu piga-piga penyesuaien:

Itamaken tiap elemen img jadi elemen div
(ntah pe ku elemen si deban – nehen HTML semantik guna lebih jelasna)
Tambahken kelas gridzyImage ku tiap 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>

Kenca si e arus idahndu indikator proses adi gambar-gambar e perlu waktu guna muat.

Saringan

Filter ibas Gridzy cukup sederhana tapi erkuasa. La soal filter si uga si iperlukenndu, kemungkinen si mbelin banci irealisasiken. Si iperlukenndu eme, sitik CSS ras piga-piga elemen bentuk HTML ...

Enda me contoh fungsionalna:

<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 Sibangun Langkah demi Langkah .

1. Pertama-tama perlu kita struktur HTML si biasa Gridzy ras ngaturken gelar kelas guna kerina item galeri gelah banci si saring kenca si e .

<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>

Ibas contoh enda kita hanya make sada kelas guna tiap unsur. Tapi banci ka iaturkenndu piga-piga kelas guna sada elemen, adi elemen e arusna banci idatken arah piga-piga filter.

2. Jenari sitambahken piga-piga tombol si arah e banci siganti filter-filter e maka .

<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>

Asangken tombol-tombol e, banci ka ipakendu elemen formulir si deban bagi kotak centang, tombol radio, pilih bidang ras sidebanna.

Bagi si enggo idahndu, nilai-nilai tombol-tombol e biasana pemilih CSS. Kenca dung kita, adi si klik tombol si bage, teridah me gambar-gambar si cocok ras CSS selector e. Secara teknis ia hanya mengatur pilihen filter ku nilai enda.

Banci ka ipakendu pemilih si ndauh lebih kompleks. Umpamana :not(.animals) pasti erdahin ka, bage pe .animals.people ras .animals, .people .

3. Si terakhir, si rangkum tombol-tombol e ibas sada wadah div ras si ikat ku galeri Gridzy, alu mengatur 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>

Bagi si enggo idahndu, kita pe make pemilih CSS guna pilihen filterControls . Wadah div si lit atribut id hanya berfungsi guna erbahan tombol-tombol e lebih gampang ipilih melalui CSS selector e.

Enda me!

Adi lebih ipilihndu solusi JavaScript, nehenlah API .

API

Amin gia Gridzy lit API-na sendiri, tapi sebagian besar hal banci ilakoken tanpa ia, hanya alu memanipulasi DOM. Gridzy pasti mperdiatekenca janah isesuaikenna kisi-kisi e. Tapi lit ka nge API si seh kel gegehna ...

Memanipulasi DOM .

Bagi kerina manipulasi Model Objek Dokumen (DOM) siperluken lebe unsur wadah :

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

Tambahken gambar

Penting kal lengkap membangun ras mengisi elemen anak si mbaru ope denga itambahken ku elemen wadah. Adi lang Gridzy la banci mendeteksi dimensi si 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 Pilihen

// 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');

Lebih lanjut kerna manipulasi DOM banci idatndu i bas dokumen web MDN . Lit ka pe Pengantar DOM si lit.

API si lit hak milikna

Guna make API, perlu lebe instansi Gridzy, si terikat ku elemen wadah Gridzy:

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

Dapetken Pilihen .

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

Datken Kerina Pilihen .

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

Aturken Pilihen

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

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

Terapkenlah Saringan

Nerapken filter eme hanya mengatur filter pilihen si banci jadi pemilih CSS si sah kai pe:

// 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'
});

Tambahken Fungsi Panggilen Mulihken .

NGGO LA ERGUNA mulai versi 2.4.0.
Pakelah Acara si modern ras lebih fleksibel sebage pengganti. Nehen bagin si seterusna guna meteh terbuen.

~~Gridzy.js 2 mendukung piga-piga pilihen guna fungsi panggilen balik. Banci saja iaturkenna arah API si lit hak milikna, tapi bali bagi pilihen si deban:~~

// 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.
  }
});

	~~Penjelasen~~
~~`onBeforeOptionsChanged`~~	~~Fungsi callback si iundang langsung ope denga ibahan pilihen.~~
~~`onOptionsChanged`~~	~~Fungsi callback si iundang langsung kenca enggo ibahan pilihen.~~
~~`onBeforeRender`~~	~~Fungsi callback si iundang langsung ope denga ibahan rende.~~
~~`onRender`~~	~~Fungsi callback si iundang langsung kenca rende.~~

Gunaken Acara .

mulai versi 2.4.0 nari.

Banci ipakendu acara Gridzy persis bagi acara JavaScript si 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.
});

Piga-piga peristiwa itembak ku elemen wadah Gridzy ras peristiwa si deban itembak ku elemen item individu i bas elemen wadah.

Peristiwa si itembak i bas elemen wadah Gridzy:

	Penjelasen
`gridzyBeforeInit`	Api-api ope denga inisialisasi galeri.
`gridzyInit`	Api kenca inisialisasi galeri.
`gridzyBeforeOptionsChanged`	Api ope denga ibahan pilihen.
`gridzyOptionsChanged`	Api kenca enggo itetapken pilihen.
`gridzyBeforeRender`	Api ope denga ibereken.
`gridzyRender`	Api kenca rende.

Adi lit acara si la ikut i jenda, kirimkenlah permintaan dukungen .

event.target mereken unsur wadah Gridzy.
event.detail.instance mereken contoh Gridzy.

Acara si itembak i bas unsur-unsur item:

	Penjelasen
`gridzyItemBeforeInit`	Api-api ope denga inisialisasi barang.
`gridzyItemInit`	Api kenca item inisialisasi.
`gridzyItemLoading`	Api sanga barang e mulai muat.
`gridzyItemReady`	Api-api sanga barang e enggo siap guna perhitungen kisi-kisi. Jadi rasio aspekna enggo iteh, tapi gambarna banci saja tetap loading.
`gridzyItemComplete`	Api-api sanga gambar barang e enggo lengkap.

Adi lit acara si la ikut i jenda, kirimkenlah permintaan dukungen .

event.target mereken unsur item masing-masing.
event.detail.instance mereken contoh Gridzy.

API – Sedunia

Lit piga-piga fungsi si mandiri ibas instansi Gridzy nari. Emaka labo perlu kita ndatken instansi sebelumna.

Dapetken Pilihen Bawaan .

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

Datken Kerina Pilihen Bawaan .

// 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');

Aturken Pilihen Bawaan .

Enda labo ngaturken pilihen kerina instansi Gridzy si enggo iinisialisasi, tapi menentuken dasar guna instansi si mbaru. Tapi, adi sada pilihen instansi si enggo lit i-reset arah nilai null , maka ipakena nilai bawaan si mbaru.

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

Banci ipakendu enda guna ngaturken pilihen secara global, adi iteleponndu ope denga DOM enggo siap. Emaka lanai perlu ibahanndu pilihen jadi atribut.

Otomatisme

Selagi kerina otomatisme Gridzy.js 2 aktif, la perlu cara-cara si lit i teruh enda. Tapi otomatisme banci imateken guna make Gridzy alu cara si 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
});

Piga-piga pilihen enda la banci iaturken arah atribut data-gridzy- ntah pe arah setOptions() , erkiteken alasen si logis:

	Nilai Bawaan	Penjelasen
`autoInitOnDomReady`	`true`	Ideteksi elemen-elemen si lit kelasna `gridzy` i bas pemuatan halaman ras iinisialisasi. Banci iaturken arah `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Pengamat Mutasi	`true`	Ideteksi elemen-elemen si mbaru alu kelas `gridzy` kenca muncul i bas DOM ras i-inisialisasi. (misalna kerna make transisi halamen) Banci iaturken arah `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Pengamat Mutasi	`true`	Ideteksi apakah elemen anak (gambar) itambahken ntah pe itangtangi, janah iperbarui grid secara otomatis. Banci iaturken arah `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Idefinisiken apakah atribut `data-gridzy-` umumna ipake ntah lang. Adi enda `false` pilihen banci iaturken hanya melalui API proprietari. Banci iaturken arah `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Pengamat Mutasi	`true`	Ideteksi perubahen atribut `data-gridzy-` , janah ipelimbaruina grid secara otomatis. Bagepe mendeteksi adi kelas `gridzyAnimated` itambahken ntah pe itangtangi ras adi terjadi perubahen atribut `style` . Adi `useOptionAttributes` `false` , maka ideteksi perubahen atribut `style` ngenca. Banci iaturken arah `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Pengamat Mutasi	`true`	Ideteksi perubahen atribut `class` kerina unsur anak (gambar). Relevan kerna saring-saring. Banci iaturken arah `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Pengamat Mutasi mulai versi 2.5.0 nari.	`true`	Ideteksi perubahen atribut `src` kerina gambar. Relevan adi ipake ras React ntah pe perpustakaan si seri. Banci iaturken arah `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Ubah UkurenPengamat mulai versi 2.6.0 nari.	`true`	Ideteksi perubahen lebar unsur. Relevan kerna desain si responsif. (Ope versi 2.6.0 enggo ipake pendengar acara perubahen ukuren jendela) Banci iaturken arah `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Inisialisasi alu manual .

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

Hancurkenlah Instansi e .

Kasarna ikataken, kebalikenna eme inisialisasi Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sinkronisasi Daftar Anak alu Manual .

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

Sinkronken sada Elemen Anak Alu Manual .

Biasana labo iperluken, kecuali i bas kasus si jarang kel.

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

Sinkronisasi Atribut alu Manual .

Perdiateken maka pilihen useOptionAttributes arus true guna si enda.

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

Paksa si ibahan .

Biasana la perlu, aminna pe kerina otomatisme enggo mate .

gridzyInstance.render();

Plugin WordPress

Perpustakaan JavaSkript

Pengelako