Vérsi 2.x – Gridzy.Gallery

Situs wéb parantos ditarjamahkeun sacara otomatis. Upami aya anu teu jelas, mangga tingali dokuméntasi Inggris.

Pamakéan Dasar

Unggah file Gridzy ka server anjeun sareng tambahkeun kana halaman wéb anjeun (biasana dina bagian sirah):

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

Tambahkeun kode HTML (di mana waé dina bagian awak):

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

Éta pisan! Éta conto fungsi pinuh. Taya initialization tambahan diperlukeun.

Konfigurasi

Cara panggampangna pikeun ngonpigurasikeun Gridzy nyaéta, ngan ukur nganggo atribut HTML. Anjeun ngan kedah awalan nami pilihan sareng data-gridzy- . Janten, pikeun nyetél pilihan spaceBetween , tambahkeun 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>

Pilihan Utama

	Nilai standar	Katerangan
`animate`	`true`	Nangtukeun naha animasi kedah dianggo nalika grid robah (contona, nalika ngatur ukuran jandela browser atanapi nalika nyetel saringan).
`layout`	`justified`	Nangtukeun perenah dipaké. Gridzy.js 2 ngarojong dua layouts béda `justified` na `waterfall` . Tiap di antarana boga parameter pilihan tambahan sorangan, nu anjeun tiasa manggihan handap tabel ieu.
`filter`	`*`	Nangtukeun gambar mana anu kedah ditingalikeun. Sagala CSS-pamilih bisa dipaké salaku nilai dieu. Biasana diatur sacara otomatis via `filterControls` (tingali pilihan salajengna). Pariksa Filter
`filterControls`		Nangtukeun elemen bentuk mana anu tiasa dianggo pikeun nyaring gambar. Sagala pamilih CSS, nu milih elemen formulir HTML, bisa dipaké salaku nilai dieu. Pariksa Filter
`autoConsiderScrollBars`	`true`	Pikeun ngaduga lebar sadia lamun gulung bar nembongan atawa leungit. Disarankeun pikeun ngantepkeun éta `true` upami automatism ieu nyababkeun masalah.

Justified Pilihan Tata Letak

	Nilai standar	Katerangan
`autoFontSize`	`false`	Ngamutahirkeun otomatis sipat ukuran font unggal kotak dumasar kana ukuran kotak aslina. Sacara standar sipat font-ukuran teu diatur eksplisit.
`desiredHeight`	`190`	Nangtukeun jangkungna dipikahoyong baris unsur. Jangkungna saleresna bakal diitung gumantung kana lebar anu sayogi sareng elemen dina barisan.
`hideOnMissingImage`	`true`	Nyumputkeun kotak nu ngandung gambar nu teu bisa dimuat.
`spaceBetween`	`4`	Nangtukeun jarak antara elemen dina piksel.
`lastRowAlign` saprak versi 2.3.0	`justified`	Nangtukeun paripolah baris panungtungan. Nilai anu diidinan `left` , `center` , `right` sareng `justified` .
`singleRowAlign` saprak versi 2.3.0	`justified`	Nangtukeun kabiasaan lamun aya ngan hiji baris tunggal. Nilai anu diidinan `left` , `center` , `right` sareng `justified` .
~~`fillLastRow`~~ ~~saprak versi 2.1.0~~	~~`true`~~	DIpiceun saprak versi 2.4.0 (DEPRECATED saprak versi 2.3.0 ) Nyusun gambar supados baris panungtung salawasna pinuh kaeusi. Upami anjeun badé nambihan gambar sacara dinamis, éta tiasa janten ide anu saé pikeun nganonaktipkeun ieu. Henteu aya pangaruh dina baris tunggal (tingali `fillSingleRow` ).
`fillSingleRow` saprak versi 2.1.0	~~`true`~~	DIpiceun saprak versi 2.4.0 (DEPRECATED saprak versi 2.3.0 ) Lamun ngan aya hiji baris, eta ngatur gambar sangkan baris salawasna pinuh pinuh. Lamun bisa lumangsung nu boga ngan hiji atawa dua gambar di galeri, eta bisa jadi mangrupakeun ide nu sae pikeun mareuman ieu.

Waterfall Pilihan Tata Letak

	Nilai standar	Katerangan
`autoFontSize`	`false`	Ngamutahirkeun otomatis sipat ukuran font unggal kotak dumasar kana ukuran kotak aslina. Sacara standar sipat font-ukuran teu diatur eksplisit.
`desiredWidth`	`250`	Nangtukeun lebar kolom anu dipikahoyong. Lebar saleresna bakal diitung gumantung kana lebar anu sayogi sareng jumlah kolom.
`hideOnMissingImage`	`true`	Nyumputkeun kotak nu ngandung gambar nu teu bisa dimuat.
`horizontalOrder`	`false`	Nangtukeun yén elemen disimpen mastikeun hiji unsur dina unggal kolom ti kénca ka katuhu, lajeng dimimitian deui dina kolom paling kénca bebas dimana kolom leuwih tempat. Sacara standar elemen bakal salawasna disimpen dina kolom jeung jangkungna pangleutikna.
`spaceBetween`	`4`	Nangtukeun jarak antara elemen dina 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`.

Pilihan Langkung Advanced

Pikeun pilihan nu leuwih canggih, pariksa kaluar API .

HTML Semantis

Struktur HTML pangbasajanna Gridzy nyaéta kieu:

<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 pisan fléksibel sareng anjeun tiasa nganggo ampir struktur HTML anu sanés. Aya ngan sababaraha titik mertimbangkeun:

Unggal anak tina unsur wadahna ngagambarkeun hiji item dina grid nu.
Boh unsur wadahna sareng murangkalihna tiasa janten jinis tag naon waé, sapertos ul sareng li (ngan mertimbangkeun ngareset standar browser).
Upami unsur img sanés mangrupikeun anak langsung, éta peryogi kelas gridzyImage .

Janten ieu ogé struktur HTML anu tiasa dianggo:

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

Utamana upami anjeun hoyong nambihan caption, anjeun peryogi struktur HTML canggih. Pikeun leuwih jéntré ngeunaan éta, tingali Captions & Skins .

Captions & Kulit

Upami anjeun hoyong nambihan caption kana galeri anjeun, anjeun kedah ngartikeun penampilan. Ku alatan éta, aya sababaraha kulit anu tos siap. Unggal kulit diwangun ku file CSS. Anjeun kedah nambihan file ieu salian ti file Gridzy utama (biasana dina bagian sirah):

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

Salajengna anjeun peryogi struktur HTML canggih:

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

Mun anjeun wondering ngeunaan struktur HTML, nyandak katingal di HTML Semantik .

Pikeun caption anjeun tiasa nganggo jinis tag naon waé, ngan ukur mastikeun yén éta ngagaduhan kelas gridzyCaption . Unsur img peryogi kelas gridzyImage .

Conto di luhur nembongkeun anjeun kulit gridzySkinClassic . Pikeun ngagunakeun anu béda, ngan ganti ngaran kulit ku salah sahiji ieu:

Kaasup Kulit

	Kelas sadia
gridzySkinBlank titik awal alus pikeun nyieun hiji kulit sorangan sawangan hirup	`gridzySkinBlank`
gridzySkinClassic sawangan hirup	`gridzySkinClassic` `gridzySkinClassicLight`(DEPRECATED saprak versi 2.6.0)
gridzySkinFullOverlay sawangan hirup	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(DEPRECATED saprak versi 2.6.0)
gridzySkinLift sawangan hirup	`gridzySkinLift` `gridzySkinLiftLight`(DEPRECATED saprak versi 2.6.0)
gridzySkinMagnifier pungsi zum teu kaasup sawangan hirup	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(DEPRECATED saprak versi 2.6.0)

Sadaya kulit di luhur ngan ukur peryogi file CSS, tapi aya kulit tambahan anu ogé peryogi file JavaScript:

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

	Kelas sadia
gridzySkinBlur teu dianggo dina IE sawangan hirup	`gridzySkinBlur` `gridzySkinBlurLight`(DEPRECATED saprak versi 2.6.0)
gridzySkinCard sawangan hirup	`gridzySkinCard` `gridzySkinCardLight`(DEPRECATED saprak versi 2.6.0)

Pilihan Kulit

Kusabab versi 2.6.0 aya Pilihan pikeun ngonpigurasikeun kulit anu diwangun. Gumantung kana kulit spésifik anjeun tiasa nyetél warna latar, warna téks sareng kalangkang téks. Anjeun ngan ukur kedah nganggo sipat khusus CSS sapertos anu anjeun tingali di dieu:

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

Pariksa variabel anu dirojong sareng nilai standar pikeun unggal kulit di dieu:

gridzySkinClassic

Variabel	Nilai standar	Émbaran
`--background`	`rgba(0, 0, 0, .7)`	ngamungkinkeun sagala nilai tukang CSS
`--color`	`rgb(255, 255, 255)`	ngamungkinkeun sagala nilai warna CSS
`--text-shadow`	`none`	ngamungkinkeun sagala nilai CSS téks-kalangkang

gridzySkinFullOverlay

Variabel	Nilai standar	Émbaran
`--background`	`rgba(0, 0, 0, .7)`	ngamungkinkeun sagala nilai tukang CSS
`--color`	`rgb(255, 255, 255)`	ngamungkinkeun sagala nilai warna CSS
`--text-shadow`	`none`	ngamungkinkeun sagala nilai CSS téks-kalangkang

gridzySkinLift

Variabel	Nilai standar	Émbaran
`--background`	`rgba(0, 0, 0, .7)`	ngamungkinkeun sagala nilai tukang CSS
`--color`	`rgb(255, 255, 255)`	ngamungkinkeun sagala 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)`	ngamungkinkeun sagala nilai CSS téks-kalangkang

gridzySkinMagnifier

Variabel	Nilai standar	Émbaran
`--background`	`rgba(0, 0, 0, .7)`	ngamungkinkeun sagala nilai tukang CSS
`--color`	`rgb(255, 255, 255)`	ngamungkinkeun sagala nilai warna CSS

Kulit ieu henteu ngadukung --text-shadow

gridzySkinBlur

Variabel	Nilai standar	Émbaran
`--background`	`rgba(0, 0, 0, .7)`	ngamungkinkeun sagala nilai tukang CSS
`--color`	`rgb(255, 255, 255)`	ngamungkinkeun sagala nilai warna CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	ngamungkinkeun sagala nilai CSS téks-kalangkang

gridzySkinCard

Variabel	Nilai standar	Émbaran
`--background`	`rgba(0, 0, 0, 1)`	ngamungkinkeun sagala nilai tukang CSS
`--color`	`rgb(255, 255, 255)`	ngamungkinkeun sagala nilai warna CSS
`--text-shadow`	`none`	ngamungkinkeun sagala nilai CSS téks-kalangkang

Sadaya kulit anu tos siapkeun ngan ukur ngadukung caption téks anu sederhana. Anjeun tiasa nyiptakeun kulit anjeun nyalira sareng langkung kompleks. Mangga tingali Style Gridzy .

Gaya Gridzy

Upami teu aya kulit anu tos ditetepkeun cocog sareng kabutuhan anjeun, anjeun tiasa ngagayakeun kulit anjeun nyalira.

Cara panggampangna nyaéta nyalin heula kulit anu tos aya sareng adaptasi kana kabutuhan anjeun. gridzySkinBlank kulit anu tos ditetepkeun biasana bakal nyayogikeun yayasan anu saé ogé dokuméntasi anu saé dina 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;
}

Dina file CSS anjeun bakal mendakan kelas gridzySkinBlank , gridzyImage sareng gridzyCaption . Gridzy sorangan henteu peryogi kelas-kelas ieu. Éta ngan ukur dianggo pikeun gaya sareng ku kituna anjeun tiasa ngahapus atanapi ngaganti nami upami anjeun resep.

Sajaba anjeun nimu kelas CSS gridzyItem . Gridzy susunan kelas ieu otomatis ka sadaya barudak langsung tina unsur wadahna utama. Janten, anjeun tiasa nganggo kelas ieu pikeun ngagayakeun barang-barang galeri anjeun.

Pikiran Hal Penting

Eusi item kudu pinuh responsif. Pertimbangkeun yén ukuran unsur pasti bakal robih. Paké nilai persentase tinimbang nilai piksel. Sareng tingali pilihan Gridzy layout autoFontSize , anu ngabeungkeut ukuran font kana ukuran kotak barang.
Unggal item kudu boga rasio aspék well-diartikeun. Rasio aspék item moal pernah robih sareng diperyogikeun pikeun ngitung grid. Janten upami hiji item henteu otomatis gaduh rasio aspek anu jelas, tangtoskeun sacara manual (contona via css).

Dina sababaraha kasus, meureun leuwih gampang pikeun gaya eusi item saméméh Gridzy dimimitian. Kantun miceun gridzy kelas atanapi file javascript Gridzy samentawis pikeun ieu.

Éta pisan! Éta sadayana anu anjeun peryogikeun pikeun ngawangun kulit anjeun nyalira. Seuseueurna kulit anu tos ditetepkeun henteu nganggo langkung seueur tibatan ieu.

Tapi tiasa aya deui upami anjeun resep…

Kulit canggih

Gridzy nganggo langkung seueur kelas CSS tibatan ngan ukur gridzyItem . Kaseueuranana bakal disetél sacara otomatis sareng anjeun ogé tiasa dianggo pikeun gaya.

Kelas Wadahna Utama

Ngaran Kelas	Katerangan
`gridzy` pikeun nyetél sacara manual	Gridzy otomatis mendakan elemen sareng kelas ieu sareng ngamimitianana.
`gridzyAnimated`	Bakal disetel sacara otomatis upami pilihan `animate` `true` . Upami kelas ieu diatur sacara manual, pilihan `animate` bakal otomatis `true` ogé (iwal upami sacara eksplisit disetel ka `false` ).

Kelas Item

Ngaran Kelas	Katerangan
`gridzyItem`	Bakal disetel pas item dimimitian prosés initializing. Moal dipupus.
`gridzyItemInitializing`	Bakal disetel pas item dimimitian prosés initializing. Bakal diganti ku `gridzyItemReady` pas item nu pinuh initialized. Teu hartosna yén gambar pinuh dimuat (tingali `gridzyItemLoading` ), tapi item geus siap meunang katempo.
`gridzyItemReady`	Bakal ngaganti `gridzyItemInitializing` pas item nu pinuh initialized. Moal dipupus. Éta henteu hartosna yén gambar pinuh dimuat (tingali `gridzyItemComplete` ), tapi barang siap katingali.
`gridzyItemLoading`	Bakal disetel pas item dimimitian prosés initializing. Bakal diganti ku `gridzyItemComplete` pas gambar ngandung (biasana ngan hiji) pinuh dimuat.
`gridzyItemComplete`	Bakal ngaganti `gridzyItemLoading` pas gambar ngandung (biasana ngan hiji) pinuh dimuat. Moal dipupus.
`gridzyItemInitialToVisible`	Bakal disetel pas item mimiti muncul pertama kalina. Bakal dipupus pas barangna katingali lengkep.
`gridzyItemVisible`	Bakal disetel pas item nu pinuh katingali. Bakal dipiceun pas item mimiti ngaleungit.
`gridzyItemVisibleToHidden`	Bakal disetel pas item mimiti ngaleungit. Bakal dipupus pas item eta tos rengse disumputkeun.
`gridzyItemHidden`	Bakal disetel pas item eta tos rengse disumputkeun. Bakal dipiceun pas item mimiti muncul.
`gridzyItemHiddenToVisible`	Bakal disetel pas item mimiti muncul (iwal muncul kahiji kalina - tingali kelas `gridzyItemInitialToVisible` ). Bakal dipupus pas barangna katingali lengkep.
`gridzyItemVisibleToVisible`	Bakal diatur pas hal di grid nu robah, tapi item sorangan éta sarta tetep katingali. Bakal dihapus pas animasi robah rengse.

Sacara standar, indikator prosés sareng animasi pikeun nembongan sareng ngaleungit gambar parantos ditangtukeun ku file CSS utama Gridzy.

Kalayan kelas CSS anu disebatkeun di luhur ieu anjeun tiasa gaya indikator prosés sareng animasi anjeun nyalira. Wani katingal kana file CSS utama Gridzy, ngartos naon anjeun bakal kudu override. Taya sieun, sagalana geus well documented aya.

Ngaoptimalkeun Loading

Lamun make loba gambar, éta bisa jadi mangrupakeun ide nu sae pikeun mantuan Gridzy ngawangun grid nu leuwih gancang.

Nyegah Jumping Gambar

Gridzy leres-leres peryogi rasio aspék sadaya gambar pikeun ngitung grid. Kanyataan ieu nyababkeun unsur luncat upami sababaraha gambar parantos siap sareng anu sanésna henteu. Beuki gambar aya, beuki bangor bisa pangaruh ieu.

Pikeun nyegah kabiasaan ieu, ngan nyetel width jeung height atribut pikeun sakabéh elemen img . Kadé pikeun ngeset nilai bener pikeun tiap gambar individu, disebutkeun gambar bakal menyimpang. Nilai anu leres nyaéta lebar asli sareng jangkungna 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>

Teras Gridzy tiasa ngitung grid langsung tanpa kedah terang ukuran gambar anu leres.

Puguh Loading

Pikeun ngamuat ngan ukur gambar anu aya dina viewport anu katingali, tuturkeun léngkah ieu:

Selapkeun atribut width sareng height sapertos anu dijelaskeun di luhur (pastikeun nganggo nilai anu leres)
Ngaganti sakabeh atribut src kalawan data-gridzylazysrc ditémbongkeun saperti di handap ieu (lamun boga atribut srcset ogé, ngaganti aranjeunna ku 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>

Saatos léngkah-léngkah ieu gambar bakal dimuat pas aranjeunna caket atanapi di jero viewport.

Indikator Prosés

Indikator prosés nyaéta ikon animasi leutik anu muncul nalika gambarna dimuat. Upami anjeun nganggo caption & skins , indikator prosés bakal ditingalikeun sacara otomatis. Upami teu kitu, anjeun peryogi sababaraha pangaluyuan:

Pasang unggal unsur img kana unsur div
(atanapi kana unsur anu sanés - tingali HTML semantik pikeun langkung seueur)
Tambahkeun kelas gridzyImage ka unggal 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>

Saatos éta anjeun kedah ningali indikator prosés upami gambar nyandak waktos kanggo dimuat.

Saringan

Saringan dina Gridzy lumayan saderhana tapi kuat. Henteu masalah naon jinis saringan anu anjeun peryogikeun, sigana pisan yén éta tiasa direalisasikeun. Sadaya anu anjeun peryogikeun nyaéta, sakedik CSS sareng sababaraha elemen bentuk HTML ...

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

Hayu Urang Ngawangun Léngkah-léngkah

1. Kahiji urang peryogi struktur HTML biasa tina Gridzy tur nyetel ngaran kelas pikeun sakabéh item galeri sangkan bisa nyaring aranjeunna afterwards

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

Dina conto ieu urang ngan ngagunakeun hiji kelas pikeun tiap elemen. Tapi anjeun ogé tiasa nyetél sababaraha kelas pikeun unsur tunggal, upami unsur éta kedah dipendakan ku sababaraha saringan.

2. Teras we nambahkeun sababaraha tombol ngaliwatan nu urang bisa ngarobah saringan lajeng

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

Gantina tombol, Anjeun oge bisa make elemen formulir séjén kawas kotak centang, tombol radio, pilih widang jeung saterusna.

Sakumaha anjeun tiasa tingali, nilai-nilai tombol nyaéta pamilih CSS biasa. Pas urang réngsé, hiji klik dina tombol sapertos bakal nembongkeun gambar nu cocog eta CSS selector. Téhnisna ngan saukur nyetél pilihan filter kana nilai ieu.

Anjeun ogé tiasa nganggo pamilih anu langkung kompleks. Contona :not(.animals) bakal dianggo ogé, kitu ogé .animals.people jeung .animals, .people .

3. Anu pamungkas, urang encapsulate tombol dina wadahna div jeung meungkeut ka galeri Gridzy, ku nyetel pilihan 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>

Sakumaha anjeun tiasa tingali, kami ogé nganggo pamilih CSS pikeun pilihan filterControls . Wadah div sareng atribut id ngan ukur ngajantenkeun tombol-tombol langkung gampang dipilih ku pamilih CSS éta.

Éta pisan!

Upami anjeun resep solusi JavaScript, pariksa API .

API

Sanajan Gridzy boga API sorangan, lolobana hal bisa dipigawé tanpa eta, cukup ku manipulasi DOM. Gridzy bakal perhatikeun éta sareng nyaluyukeun grid. Tapi aya ogé API anu kuat pisan…

Manipulasi DOM

Pikeun sakabéh manipulasi Dokumén Objék Modél (DOM) urang mimitina kudu unsur wadahna:

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

Tambahkeun Gambar

Penting pikeun pinuh ngawangun sareng ngeusian unsur anak énggal sateuacan anjeun nambihanana kana unsur wadahna. Upami teu kitu, Gridzy moal tiasa ngadeteksi diménsi anu leres.

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

Cabut Gambar

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

Robah Pilihan

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

Langkung seueur ngeunaan ngamanipulasi DOM anjeun tiasa mendakan di MDN web docs . Aya ogé Perkenalan kana DOM sayogi.

API proprietary

Pikeun nganggo API, urang peryogi conto Gridzy, anu ngabeungkeut unsur wadah Gridzy:

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

Meunang Pilihan

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

Meunangkeun Sadaya Pilihan

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

Setel Pilihan

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

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

Larapkeun Filter

Nerapkeun saringan ngan ukur netepkeun filter pilihan anu tiasa janten pamilih CSS anu sah:

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

Tambahkeun Fungsi Callback

DEPRECATED saprak versi 2.4.0
Anggo Kajadian modern sareng langkung fleksibel. Tempo bagian salajengna pikeun detil.

~~Gridzy.js 2 ngarojong sababaraha pilihan pikeun fungsi callback. Éta ngan ukur tiasa disetél ku API proprietary, tapi sapertos pilihan anu sanés:~~

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

	~~Katerangan~~
~~`onBeforeOptionsChanged`~~	~~Pungsi callback anu disauran langsung sateuacan netepkeun pilihan.~~
~~`onOptionsChanged`~~	~~Pungsi callback nu invoked langsung saatos pilihan setelan.~~
~~`onBeforeRender`~~	~~Pungsi callback anu disauran langsung sateuacan rendering.~~
~~`onRender`~~	~~fungsi callback nu invoked langsung saatos rendering.~~

Paké Kajadian

saprak versi 2.4.0

Anjeun tiasa nganggo acara Gridzy persis sapertos 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.
});

Sababaraha acara dipecat dina unsur wadahna Gridzy sarta acara sejenna dipecat dina elemen item individu dina unsur wadahna.

Kajadian dipecat dina unsur wadah Gridzy:

	Katerangan
`gridzyBeforeInit`	Kahuruan saméméh initialization galeri.
`gridzyInit`	Seuneu sanggeus initialization galeri.
`gridzyBeforeOptionsChanged`	Seuneu saméméh setelan pilihan.
`gridzyOptionsChanged`	Seuneu sanggeus pilihan setelan.
`gridzyBeforeRender`	Seuneu saméméh Rendering.
`gridzyRender`	Seuneu sanggeus Rendering.

Upami anjeun sono acara naon waé di dieu, punten kirimkeun pamundut dukungan .

event.target nyadiakeun unsur wadahna Gridzy.
event.detail.instance nyadiakeun conto Gridzy.

Kajadian dipecat dina elemen item:

	Katerangan
`gridzyItemBeforeInit`	Kahuruan saméméh initialization item.
`gridzyItemInit`	Kahuruan sanggeus initialization item.
`gridzyItemLoading`	Kahuruan nalika barang mimiti dimuat.
`gridzyItemReady`	Kahuruan nalika item geus siap pikeun itungan grid. Janten rasio aspék dipikanyaho, tapi gambarna masih tiasa dimuat.
`gridzyItemComplete`	Kahuruan nalika gambar item pinuh dimuat.

Upami anjeun sono acara naon waé di dieu, punten kirimkeun pamundut dukungan .

event.target nyadiakeun unsur item masing-masing.
event.detail.instance nyadiakeun conto Gridzy.

API - Global

Aya sababaraha fungsi anu bebas tina instansi Gridzy. Janten urang henteu kedah kéngingkeun conto sateuacanna.

Meunangkeun Pilihan Default

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

Meunangkeun Sadaya Pilihan 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');

Setel Pilihan Default

Ieu henteu nyetél pilihan sadaya instansi Gridzy anu parantos diinisialisasi, tapi netepkeun dasar pikeun instansi anyar. Nanging, upami pilihan tina conto anu tos aya bakal direset via nilai null , éta bakal nganggo nilai standar anyar.

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

Anjeun tiasa nganggo ieu pikeun nyetél pilihan sacara global, upami anjeun nyauran sateuacan DOM siap. Janten anjeun henteu kedah nyetél pilihan salaku atribut deui.

Automatism

Salami sadayana automatisms of Gridzy.js 2 aktip, teu perlu pikeun métode handap. Tapi automatisms tiasa dipareuman pikeun ngagunakeun Gridzy dina cara anu langkung 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
});

Sababaraha pilihan ieu teu tiasa diatur via atribut data-gridzy- atanapi via setOptions() , kusabab alesan logis:

	Nilai standar	Katerangan
`autoInitOnDomReady`	`true`	Ngadeteksi elemen kalawan `gridzy` kelas dina loading kaca sarta initializes aranjeunna. Settable via `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Pengamat Mutasi	`true`	Ngadeteksi elemen anyar kalawan kelas `gridzy` pas maranéhna muncul dina DOM tur initializes aranjeunna. (contona dina ngagunakeun transisi halaman) Settable via `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Pengamat Mutasi	`true`	Ngadeteksi naha elemen anak (gambar) ditambahkeun atawa dihapus, sarta otomatis ngamutahirkeun grid. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Nangtukeun naha atribut `data-gridzy-` umumna dianggo atanapi henteu. Lamun ieu téh pilihan `false` bisa diatur ukur via API proprietary. Settable via `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Pengamat Mutasi	`true`	Ngadeteksi parobahan `data-gridzy-` atribut, sarta ngamutahirkeun grid otomatis. Ogé ngadeteksi lamun kelas `gridzyAnimated` ditambahkeun atawa dihapus sarta lamun parobahan atribut `style` lumangsung. Upami `useOptionAttributes` `false` , éta ngan ukur ngadeteksi parobahan atribut `style` . Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Pengamat Mutasi	`true`	Ngadeteksi parobahan atribut `class` sadaya elemen anak (gambar). Relevan ngeunaan saringan. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Pengamat Mutasi saprak versi 2.5.0	`true`	Ngadeteksi parobahan atribut `src` sadaya gambar. Relevan nalika dianggo sareng React atanapi perpustakaan anu sami. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` RésizeObserver saprak versi 2.6.0	`true`	Ngadeteksi parobahan lebar unsur. Relevan ngeunaan desain responsif. (Saméméh vérsi 2.6.0, pangdéngé acara ukuran jandela dipaké) Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Initialize sacara manual

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

Ngancurkeun Instance

Sacara kasar, sabalikna tina ngamimitian Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Singkronkeun Daptar Anak ku cara manual

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

Nyingkronkeun Elemen Anak Tunggal ku cara manual

Biasana henteu diperyogikeun, iwal dina kasus anu jarang pisan.

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

Singkronkeun atribut ku cara manual

Catet yén pilihan useOptionAttributes kedah true pikeun ieu.

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

Angkatan Rendering

Biasana henteu diperyogikeun, sanaos sadayana otomatis dipareuman

gridzyInstance.render();

Plugin WordPress

Perpustakaan JavaScript

Palayanan