Gridzy.Gallery

webBhâsa Madhurâ

Versi 2.x

Situs web panèka ampon èterjemahaghi otomatis. Manabi bâdâ sè ta' jellas, ngereng èbâca dokumentasi bhâsa Inggris.

Pangangghuy Dasar

Unggah file Gridzy ka server bân tamba'aghi ka situs web (biasana è bagian kepala):

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

Tambahaghi kode HTML (è dhimma bhâi è bâgiyân 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>

Jareya! panèka conto sè èghunaaghi samporna. ta' parlo inisialisasi tambahan.

Konfigurasi

Cara sè palèng ghâmpang kaangghuy ngonfigurasi Gridzy panèka, namong aghâdhui atribut HTML. Sampèyan coma parlo aghâbây awalan nyamana opsi kalabân data-gridzy- . Daddi, kaangghuy aghâbây opsi spaceBetween , tamba'aghi 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 Otama

Nilai BawaanDeskripsi
animatetrueNeteppaghi ponapa animasi kodhu èghunaaghi bâkto grid aoba (contona, bâkto ngobâ ukuran jendela browser otabâ bâkto aghâbây filter).
layoutjustifiedNerrangngaghi tata letak sè èghunaaghi. Gridzy.js 2 nolonge duwâ' tata letak sè bhân-sabbhân justified bân waterfall . Bâng-sèbângnga andi' parameter opsi tambahan dhibi', sè bisa ètemmoè è bâbâ tabel panèka.
filter*Neteppaghi gambar sè kodhu ètonjhuaghi. CSS-selector bisa èghunaaghi mènangka nilai è dinna'. Biasana èset otomatis lèbât filterControls (bâca opsi salanjhângnga).
Parèksa Filter
filterControlsNeteppaghi elemen bhângon sè bisa èghunaaghi kaangghuy nyaring gambar. Sabbhân pemilih CSS, sè mèlè elemen formulir HTML, bisa èghunaaghi mènangka nilai è dinna'.
Parèksa Filter
autoConsiderScrollBarstrueKaangghuy memprediksi lebar sè bâdâ manabi scroll bar muncul otabâ èlang. Salanjhângnga èsaranaghi kaangghuy èbâgi è true kajhâba otomatisme panèka aghâbây masalah.

Justified Pilihan Tata Letak

Nilai BawaanDeskripsi
autoFontSizefalseOtomatis mabâru properti ukuran font dâri bhân-sabbhân kotak èbâdâ'aghi dâri ukuran kotak aslina. Sacara default properti font-size ta' èset secara eksplisit.
desiredHeight190Neteppaghi tèngghina baris elemen sè èkaterro. Tenggina sè sabendherra bhâkal èhitung tagantong dâri lebar sè bâdâ bân elemen-elemen è baris.
hideOnMissingImagetrueNotop kotak sè aghândhu' gambar sè ta' bisa èmoat.
spaceBetween4Neteppaghi jarak antara elemen è dâlem piksel.
lastRowAlign
molaè versi 2.3.0		justifiedNeteppagi tengka gulina baris se dhi-budhi. Nilai sè èijinaghi panèka left , center , right bân justified .
singleRowAlign
molaè versi 2.3.0		justifiedNerrangngaghi kalakoan manabi namong bâdâ sèttong baris. Nilai sè èijinaghi panèka left , center , right bân justified .
fillLastRow
molaè versi 2.1.0		trueÈHAPÂR sajjhek versi 2.4.0 (ÈHÂBÂR sajjhek versi 2.3.0 )
Ator gambar sopajâ baris sè dhi-budhi salanjangnga èesse'è. Manabi panjennengan rèncanana aghâbây gambar sacara dinamis, bisaos ide sè beccè' kaangghuy non-aktifaghi.
Ta' aghâdhui pangaro dâ' sèttong baris (bâca fillSingleRow ).
fillSingleRow
molaè versi 2.1.0		trueÈHILANG molaè versi 2.4.0 (TA' ÈHÂBÂH sajjhek versi 2.3.0 )
Manabi namong bâdâ sèttong baris, èator gambarra saènggâ baris panèka salanjangnga èisi. Manabi panjennengan namong andi' sèttong otabâ duwâ' gambar è galeri, bisaos ide sè sae kaangghuy non-aktifaghi.

Waterfall Pilihan Tata Letak

Nilai BawaanDeskripsi
autoFontSizefalseOtomatis mabâru properti ukuran font dâri bhân-sabbhân kotak èbâdâ'aghi dâri ukuran kotak aslina. Sacara default properti font-size ta' èset secara eksplisit.
desiredWidth250Neteppaghi lebar kolom sè èkaterro. Lebar sè sabendherra bhâkal èhitung tagantong dâri lebar sè bâdâ bân jumlah kolom.
hideOnMissingImagetrueNotop kotak sè aghândhu' gambar sè ta' bisa èmoat.
horizontalOrderfalseÈjhârbâ'aghi jhâ' elemen-elemen panèka èpasang sèttong elemen è bhân-sabbhân kolom dâri kacer ka kanganna, saterrossa molaè polè è kolom sè palèng kacer ta' èbâgi dâ' kolom sè lebbi bânnya' kennengnganna. Sacara default, elemen-elemen bhâkal salanjangnga èpasang è kolom kalabân tèngghi sè palèng kenik.
spaceBetween4Neteppaghi jarak antara elemen è dâlem piksel.
singleRowAlign
since version 2.7.0		justifiedDefines the behavior when not all columns can be filled due to too few images. Allowed values are left, center, right and justified.

Pilihan sè Lebbi Lanjutan

kaangghuy opsi sè lebbi canggih, parèksa API .

HTML semantik

Struktur HTML Gridzy sè palèng saderhana panèka:

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

Namong, Gridzy cè' fleksibelna bân panjhennengngan bisa aghâdhui struktur HTML laènna. Namong bâdâ pan-bârâmpan poin sè kodhu èpèkkèr:

  • Bâng-sèbâng ana' dâri elemen wadah èwakili sèttong item è grid.
  • Elemen wadah bân ana'na bisa aropa'aghi jenis tag apa bhâi, akadhi ul bân li (pèkkèrraghi kaangghuy mabâli default browser).
  • Manabi elemen img bhunten anak langsung dhibi', parlo kelas gridzyImage .

Daddi panèka jhughân struktur HTML sè abâdâh:

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

Otamana mon be'na terro namba'aghi keterangan, be'na parlo struktur HTML sè canggih. Kaangghuy onèng lebbi jhâu, bâca Captions & Skins .

Keterangan & Kolè'

Manabi panjennengan terro nambahaghi keterangan ka galeri, panjennengan kodhu nerrangngaghi penampilanna. Daddi, pan-bârâmpan kolè' sè ella ètentukan sabellunna bâdâ. Bâng-sèbângnga kolè' èpadhâddhi dâri file CSS. Sampèyan kodhu nambah file panèka salaèn file Gridzy otama (biasana è bâgiyân head):

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

Salaèn jârèya, panjhennengngan parlo struktur HTML sè 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>

Manabi panjennengan terro taowa parkara struktur HTML, abassaghi HTML Semantic .

kaangghuy caption, panjennengan bisa aghâdhui jenis tag ponapa bisaos, pastèaghi jhâ' bâdâ kelas gridzyCaption . Elemen img parlo kelas gridzyImage .

Conto è attas nojjhuaghi kolè gridzySkinClassic . kaangghuy aghâdhui sè laèn, ghântè nyamana kolè'na kalabân sala sèttong dâri panèka:

Kolè' sè èserrat

Kelas sè èsediaaghi
gridzySkinBlank
titik awal sè beccè' kaangghuy aghâbây kolè' dhibi'
pratinjau langsung		gridzySkinBlank
gridzySkinClassic
pratinjau langsung		gridzySkinClassic
gridzySkinClassicLight(TA' ÈHÂGHI'aghi sajjhek versi 2.6.0)
gridzySkinFullOverlay
pratinjau langsung		gridzySkinFullOverlay
gridzySkinFullOverlayLight(TA' ÈHÂGHI'aghi sajjhek versi 2.6.0)
gridzySkinLift
pratinjau langsung		gridzySkinLift
gridzySkinLiftLight(TA' ÈHÂGHI'aghi sajjhek versi 2.6.0)
gridzySkinMagnifier
fungsi zoom ta' ètama'aghi
pratinjau langsung		gridzySkinMagnifier
gridzySkinMagnifierLight(TA' ÈHÂGHI'aghi sajjhek versi 2.6.0)

Kabbhi skin è attas coma parlo file CSS, namong bâdâ skin tambahan sè parlo jhughân file JavaScript:

<link rel="stylesheet" href="gridzy/skins/gridzySkinBlur/style.min.css" />
<script src="gridzy/skins/gridzySkinBlur/script.min.js"></script>
Kelas sè èsediaaghi
gridzySkinBlur
ta' abâdâh è IE
pratinjau langsung		gridzySkinBlur
gridzySkinBlurLight(TA' ÈHÂGHI'aghi sajjhek versi 2.6.0)
gridzySkinCard
pratinjau langsung		gridzySkinCard
gridzySkinCardLight(TA' ÈHÂGHI'aghi sajjhek versi 2.6.0)

Pilihan Kolè'

molaè versi 2.6.0 bâdâ Opsi kaangghuy ngonfigurasi kulit sè èbâdâ'aghi. Tagantong dâri kolè' sè spesifik, panjhennengngan bisa aghâbây warna latar, warna teks bân bayangan teks. Sampèyan kodhu aghâdhui properti khusus CSS akadhi sè bisa èkaton è dinna':

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

Parèksa variabel sè èdukung bân nilai bawaan ghâbây bhân-sabbhân kolè' è dinna':

gridzySkinClassic
VariabelNilai BawaanInformasi
--backgroundrgba(0, 0, 0, .7)èghâbây nilai latar CSS apa bhâi
--colorrgb(255, 255, 255)èghâbây nilai warna CSS apa bhâi
--text-shadownoneèghâbây nilai teks-bayangan CSS apa bhâi
gridzySkinFullOverlay
VariabelNilai BawaanInformasi
--backgroundrgba(0, 0, 0, .7)èghâbây nilai latar CSS apa bhâi
--colorrgb(255, 255, 255)èghâbây nilai warna CSS apa bhâi
--text-shadownoneèghâbây nilai teks-bayangan CSS apa bhâi
gridzySkinLift
VariabelNilai BawaanInformasi
--backgroundrgba(0, 0, 0, .7)èghâbây nilai latar CSS apa bhâi
--colorrgb(255, 255, 255)èghâbây nilai warna CSS apa bhâi
--text-shadow0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)èghâbây nilai teks-bayangan CSS apa bhâi
gridzySkinMagnifier
VariabelNilai BawaanInformasi
--backgroundrgba(0, 0, 0, .7)èghâbây nilai latar CSS apa bhâi
--colorrgb(255, 255, 255)èghâbây nilai warna CSS apa bhâi

Kolè' panèka ta' nolonge --text-shadow

gridzySkinBlur
VariabelNilai BawaanInformasi
--backgroundrgba(0, 0, 0, .7)èghâbây nilai latar CSS apa bhâi
--colorrgb(255, 255, 255)èghâbây nilai warna CSS apa bhâi
--text-shadow0 0 10px rgb(0, 0, 0)èghâbây nilai teks-bayangan CSS apa bhâi
gridzySkinCard
VariabelNilai BawaanInformasi
--backgroundrgba(0, 0, 0, 1)èghâbây nilai latar CSS apa bhâi
--colorrgb(255, 255, 255)èghâbây nilai warna CSS apa bhâi
--text-shadownoneèghâbây nilai teks-bayangan CSS apa bhâi

Kabbhi skin sè ella ètentukan coma nolong keterangan teks sè sèderhana. Sampèyan bisa aghâbây kolè'na dhibi' bân lebbi kompleks. Ngereng jhâjhârbâ'aghi Style Gridzy .

Gaya Gridzy

Manabi tadâ' kolè' sè ètentukan sabellunna sè cocok ghâbây kabutowan, panjhennengngan bisa aghâbây kolè' dhibi'.

Cara sè palèng ghâmpang panèka nyalin kolè' sè ella bâdâ bân èadaptasi dâ' kabutowan dhibi'. gridzySkinBlank kulit sè ella ètentukan sabellunna biasana bhâkal aberri' landasan sè beccè' bân jhughân dokumentasi sè beccè' è 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;
}

È dâlem file CSS, panjhennengngan bhâkal nemmoè kelas gridzySkinBlank , gridzyImage bân gridzyCaption . Gridzy dhibi' ta' parlo kellas-kelas panèka. Bâdâ sè èghunaaghi kaangghuy aghâbây gaya bân dâddhi panjhennengngan bisa maèlang otabâ aoba nyamana manabi panjhennengngan senneng.

Salaèn jârèya, panjhennengngan bhâkal nemmoaghi kelas CSS gridzyItem . Gridzy aghâbây kelas panèka otomatis ghâbây kabbhi ana' langsung dâri elemen wadah otama. Daddi, be'na bisa aghâdhui kellas panèka kaangghuy aghâbây gaya barang-barang è galeri be'na.

Pèkkèran Hal-hal Penting

  1. Kandungan barang kodhu èrespon sacara samporna. Anggap jhâ' ukuran elemen tantona bhâkal aoba. Angghuy nilai persentase èbandhingaghi nilai piksel. Bân jhâjhârbâ'aghi opsi tata letak Gridzy autoFontSize , sè èikat font-size dâ' ukuran kotak barang.
  2. Bâng-sèbâng barang kodhu andi' rasio aspek sè èjhârbâ'aghi kalabân beccè'. Rasio aspek barang ta' kera aoba bân parlo kaangghuy ngètong kisi-kisi. Daddi mon sèttong barang ta' otomatis andi' rasio aspek sè ètentukan kalabân beccè', ètentukan sabellunna sacara manual (contohna lèbât css).

È pan-bârâmpan kasus, bisaos lebbi ghâmpang kaangghuy aghâbây gaya konten item sabellunna Gridzy èinisialisasi. Cukup èpaèlang gridzy kelas otabâ file javascript Gridzy ghâbây panèka.

Jareya! panèka sè èparloaghi kaangghuy mabângun kolè'na dhibi'. Kabânnya'an kolè' sè ella ètentukan sabellunna ta' aghuna'aghi lebbi dâri panèka.

Tapè bisaos bâdâ polè manabi panjhennengngan senneng ...

Kolè' Lanjutan

Gridzy aghunaaghi lebbi bânnya' kelas CSS dâri gridzyItem . Kabânnya'an dâri rèng-orèng panèka bhâkal èset otomatis bân panjhennengngan bisa aghunaaghi kaangghuy aghâbây gaya jhughân.

Kelas Wadah Otama

nyamana kellasDeskripsi
gridzy
kaangghuy èset manual		Gridzy otomatis nemmoè elemen kalabân kelas panèka bân èinisialisasi.
gridzyAnimatedbhâkal èset otomatis manabi opsi animate panèka true . Manabi kellas panèka èset manual, opsi animate bhâkal otomatis èghâdhui true jhughân (salaèn manabi èset secara eksplisit dâ' false ).

Kelas Barang

nyamana kellasDeskripsi
gridzyItembhâkal èset è bâkto barang molaè proses inisialisasi. ta' kera èpaèlang.
gridzyItemInitializingbhâkal èset è bâkto barang molaè proses inisialisasi. bhâkal èghântè'è sareng gridzyItemReady è bâkto barang kasebbhut èinisialisasi samporna. Artena bhunten jhâ' gambar ampon èisi (bâca gridzyItemLoading ), namong barang ampon siap èkaton.
gridzyItemReadybhâkal aghântè gridzyItemInitializing è bâkto item panèka èinisialisasi samporna. ta' kera èpaèlang. Artena bhunten jhâ' gambar ampon èisi (bâca gridzyItemComplete ), namong barang ampon siap èkaton.
gridzyItemLoadingbhâkal èset è bâkto barang molaè proses inisialisasi. bhâkal èghântè'è sareng gridzyItemComplete è bâkto gambar sè bâdâ (biasana namong sèttong) èisi.
gridzyItemCompletebhâkal aghântè gridzyItemLoading è bâkto gambar sè bâdâ (biasana namong sèttong) èmoat samporna. ta' kera èpaèlang.
gridzyItemInitialToVisiblebhâkal èset è bâkto barang molaè muncul pertama kalèna. bhâkal èpaèlang è bâkto barangna la èkaton.
gridzyItemVisiblebhâkal èset è bâkto barangna la èkaton. bhâkal èpaèlang è bâkto barang molaè èlang.
gridzyItemVisibleToHiddenbhâkal èset è bâkto barang molaè èlang. bhâkal èpaèlang è bâkto barang kasebbhut èsèmpen samporna.
gridzyItemHiddenbhâkal èset è bâkto barang kasebbhut èsèmpen samporna. bhâkal èpaèlang è bâkto barang molaè kalowar.
gridzyItemHiddenToVisiblebhâkal èset è bâkto item molaè muncul (salaèn muncul pertama kalèna – bâca kelas gridzyItemInitialToVisible ). bhâkal èpaèlang è bâkto barangna la èkaton.
gridzyItemVisibleToVisiblebhâkal èset è bâkto bâdâ sè aoba è grid, tapè barang jârèya dhibi' bân pagghun èkaton. bhâkal èpaèlang è bâkto animasi obâ'ân ampon lastare.

Sacara default indikator proses bân animasi ghâbây gambar sè muncul bân èlang ètentukan sabellunna sareng file CSS otama Gridzy.

Kalabân kelas CSS sè èsebbhut è attas panèka, panjhennengngan bisa aghâbây indikator proses bân animasi panjhennengngan dhibi'. Berani ngabas ka file CSS otama Gridzy, kaangghuy ngartè apa sè kodhu èobâ. ta' tako', sadhâjâna èdokumentasiaghi kalabân beccè' è dhissa'.

Optimasi Pemuatan

Manabi panjennengan aghunaaghi bânnya' gambar, bisaos ide sè beccè' kaangghuy abhânto Gridzy mabângun grid lebbi ghâncang.

Cegah Gambar Lompat

Gridzy parlo rasio aspek dâri kabbhi gambar kaangghuy ngètong grid. Fakta-fakta panèka ngasèlaghi elemen-elemen sè lompat manabi bâdâ gambar sè siap bân sè laènna ghi' ta' siap. Sajan bânnya' gambar, sajan ghâgghâr efek panèka.

Kaangghuy nyegghâ kalakoan panèka, cokop atur atribut width bân height ghâbây kabbhi elemen img . Penteng kaangghuy aghâbây nilai sè teppa' ghâbây bhân-sabbhân gambar, mon ta' gambar bhâkal èdistorsi. Nilai sè teppa' panèka lebar bân tèngghi aslina gambar sè èmaksod:

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

Saellana jârèya Gridzy bisa ngètong grid langsung ta' parlo onèng ukuran gambar sè sabendherra.

Malas èmoat

Kaangghuy ngèbâ gambar sè bâdâ è viewport sè èkaton, toro'è langkah-langkah panèka:

  1. Maso'aghi atribut width bân height akadhi sè èjhârbâ'aghi è attas (pastèaghi aghâdhui nilai sè teppa')
  2. Ghântè kabbhi atribut src kalabân data-gridzylazysrc akadhi sè ètonjhuaghi è bâbâ panèka (mon be'na andi' atribut srcset jhughân, ghâli kalabân 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>

Saellana langkah-langkah panèka, gambar bhâkal èmoat è bâkto semma' otabâ è dâlem viewport.

Indikator Proses

Indikator proses panèka ikon animasi kènè' sè muncul è bâkto gambar èmoat. Manabi panjennengan aghunaaghi keterangan & kulit , indikator proses bhâkal ètonjhuaghi otomatis. Mon bhunten, panjhennengngan parlo pan-bârâmpan panyesuaian:

  1. Maso'aghi bhân-sabbhân elemen img dâ' elemen div
    (otabâ dâ' elemen laènna – bâca HTML semantik kaangghuy lebbi jhâu)
  2. Tambahaghi kelas gridzyImage ka bhân-sabbhân 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>

Saellana jârèya, panjhennengngan kodhu nengghu indikator proses manabi gambar ghâpanèka parlo bâkto kaangghuy èmoat.

Filter

Filter è Gridzy cè' saderhana namong kobâsa. ta' parduli filter ponapa sè èparloaghi, kamungkinan cè' bânnya'na bisa èwujudaghi. sè èparloaghi coma, sakone' CSS bân sakone' elemen formulir HTML ...

è attas panèka 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>

Mara Bângun Langkah demi Langkah

1. Pertama kita parlo struktur HTML Gridzy sè biasa bân aghâbây nyamana kelas ghâbây kabbhi item galeri saènggâ kita bisa nyaring saellana jârèya

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

È contona panèka kaulâh namong aghunaaghi sèttong kellas ghâbây bhân-sabbhân elemen. Namong panjennengan bisa jhughân aghâbây pan-bârâmpan kellas ghâbây sèttong elemen, manabi elemen kasebbhut kodhu ètemmoè lèbât pan-bârâmpan filter.

2. Saterrossa kaulâh nambahaghi pan-bârâmpan tombol sè èghâbây kaulâh bisa ngobâ filter saterrossa

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

Ghântèna tombol, panjhennengngan bisa jhughân aghâdhui elemen formulir laèn akadhi kotak centang, tombol radio, bidang pilih bân salaènna.

akadhi sè èkaton, nilai-nilai tombol panèka biasana èpilih CSS. Saellana lastare, klik tombol kasebbhut bhâkal nojjhu dâ' gambar sè cocok sareng pemilih CSS kasebbhut. Sacara teknis, panèka coma aghâbây opsi filter ghâbây nilai panèka.

Sampèyan bisa jhughân aghâdhui selektor sè lebbi kompleks. Contona :not(.animals) bhâkal abâdâ jhughân, bân jhughân .animals.people bân .animals, .people .

3. Sè kapèng tello', kaulâh èkapsulasi tombol-tombol è dâlem wadah div bân èikat ka galeri Gridzy, kalabân aghâbây 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>

akadhi sè èkaton, kaulâh jhughân aghuna'aghi CSS selector ghâbây opsi filterControls . div container kalabân atribut id namong abâdâhaghi tombol sè lebbi ghâmpang èpilih lèbât CSS selector kasebbhut.

Jareya!

Manabi panjennengan lebbi senneng solusi JavaScript, parèksa API .

API

Maske Gridzy andi' API dhibi', bânnya' hal sè bisa èlakoni tanpa API, coma kalabân manipulasi DOM. Gridzy bhâkal ngaonèngè bân aghâbây grid. Namong bâdâ jhughân API sè cè' kowadda ...

Manipulasi DOM

kaangghuy kabbhi manipulasi Model Objek Dokumen (DOM) kaulâh parlo elemen wadah:

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

Tambahaghi Gambar

Penteng kaangghuy mabângun bân ngisi elemen ana' anyar sabellunna ètamba'aghi ka elemen wadah. Mon bhunten, Gridzy ta' bisa ngaonèngè dimensi sè teppa'.

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

èpaèlang gambar

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

Obâ 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');

Lebbi jhârna' tentang manipulasi DOM bisa ètemmoè è MDN web docs . Bâdâ jhughân Pengantar DOM sè èsediaaghi.

API sè èghâdhui

Kaangghuy aghâdhui API, kaulâh parlo instansi Gridzy, sè èikat dâ' elemen wadah Gridzy:

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

olle opsi

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

Ngala' sakabbhina opsi

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

Ator Opsi

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

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

ghâbây filter

aghâdhui filter coma aghâbây filter opsi sè bisa èghâbây pemilih CSS sè 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'
});

Tambah Fungsi Callback

èlang sajjhek versi 2.4.0
Angghuy Acara sè modern bân lebbi fleksibel. Èbâca bâgiyân salastarèna kaangghuy rincian.

Gridzy.js 2 nolonge pan-bârâmpan opsi ghâbây fungsi panggilan balik. Bâdâ sè bisa èset coma lèbât API sè èghâdhui, tapè akadhi opsi laènna:

// 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.
  }
});
Deskripsi
onBeforeOptionsChangedFungsi panggilan balik sè èpanggil langsung sabellunna aghâbây opsi.
onOptionsChangedFungsi panggilan balik sè èpanggil langsung saamponna èsettel opsi.
onBeforeRenderFungsi panggilan balik sè èpanggil langsung sabellunna èghâbây.
onRenderFungsi panggilan balik sè èpanggil langsung saamponna rendering.

Angghuy Acara

molaè versi 2.4.0

Sampèyan bisa aghâdhui acara Gridzy akadhi acara JavaScript biyasana:

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

Bâdâ acara sè èpecat è elemen wadah Gridzy bân acara laènna èpecat è elemen item individu è dâlem elemen wadah.

Acara sè èpèyara è elemen kontainer Gridzy:

Deskripsi
gridzyBeforeInitApi sabellunna inisialisasi galeri.
gridzyInitKebakaran saellana inisialisasi galeri.
gridzyBeforeOptionsChangedèpèyara sabellunna aghâbây opsi.
gridzyOptionsChangedèpèyara saellana èsettel opsi.
gridzyBeforeRenderApi sabellunna èghâbây.
gridzyRenderApi saellana èghâbây.
Manabi panjennengan ta' noro' acara è dinna', ngereng kirim parnyo'onan sokongan .

event.target nyadhiyaaghi elemen wadah Gridzy.
event.detail.instance nyadhiyaaghi instansi Gridzy.

Acara sè èpèyara è elemen item:

Deskripsi
gridzyItemBeforeInitèpèyara sabellunna item èmolaè.
gridzyItemInitèpèyara saellana item èmolaè.
gridzyItemLoadingèpèyara bâkto barang molaè èmoat.
gridzyItemReadyèpèyara mon barang la siap kaangghuy èètong grid. Daddi rasio aspekna la èkennal, tapè gambarra bisa ghi' èmoat.
gridzyItemCompleteèpèyara mon gambar barang la èisi.
Manabi panjennengan ta' noro' acara è dinna', ngereng kirim parnyo'onan sokongan .

event.target nyadhiyaaghi elemen item sè èmaksod.
event.detail.instance nyadhiyaaghi instansi Gridzy.

API – Global

Bâdâ pan-bârâmpan fungsi sè ta' èbâgi dâri instansi Gridzy. Daddi kaulâh ta' parlo ngala' conto sabellunna.

Ngala' Opsi Bawaan

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

Ngala' sakabbhina opsi 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');

Ator Opsi Bawaan

Arèya ta' aghâbây opsi dâri kabbhi instansi Gridzy sè ella èinisialisasi, tapè aghâbây dasar ghâbây instansi anyar. Namong, manabi opsi dâri instansi sè ampon bâdâ bhâkal èreset lèbât nilai null , bhâkal aghâdhui nilai default anyar.

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

Sampèyan bisa aghunaaghi panèka kaangghuy aghâbây opsi sacara global, manabi Sampèyan nelpon sabellunna DOM siap. Daddi be'na ta' parlo aghâbây opsi mènangka atribut polè.

Otomatisme

Manabi kabbhi otomatisisme Gridzy.js 2 aktif, ta' parlo cara-cara è bâbâ panèka. Namong otomatisisme bisa èpatè'è kaangghuy aghâdhui Gridzy kalabân cara sè lebbi 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
});

pan-bârâmpan opsi panèka ta' bisa èset lèbât atribut data-gridzy- otabâ lèbât setOptions() , polana alasan logis:

Nilai BawaanDeskripsi
autoInitOnDomReadytrueNgaonèngghi elemen kalabân gridzy kelas è bâkto èbâdâ'aghi halaman bân èinisialisasi.

bisa èset lèbât Gridzy.setDefaultOptions()
autoInitOnDomMutation
MutationObserver		trueNgaonèngghi elemen anyar kalabân gridzy kelas è bâkto muncul è DOM bân èinisialisasi. (contohna, aghâdhui transisi halaman)

bisa èset lèbât Gridzy.setDefaultOptions()
autoSyncChildListMutation
MutationObserver		trueNgaonenge apa elemen ana' (gambar) ètambâi otabâ èpaèlang, bân mabâru grid otomatis.

Bisa èset lèbât data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
useOptionAttributestrueNerrangngaghi ponapa atribut data-gridzy- umumna èghunaaghi otabâ bhunten. Manabi panèka false opsi bisa èset namong lèbât API sè èghâdhui.

Bisa èset lèbât new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncAttributesMutation
Pengamat Mutasi		trueNgaonenge obâ'ân atribut data-gridzy- , bân mabâru grid sacara otomatis. Jugan èdeteksi manabi kelas gridzyAnimated ètamba otabâ èpaèlang bân manabi bâdâ obâ'ân atribut style . Manabi useOptionAttributes false , namong èdeteksi obâ'ân atribut style .

Bisa èset lèbât data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncChildClassMutation
Pengamat Mutasi		trueNgaonenge obâ'ân atribut class dâri kabbhi elemen ana' (gambar). Relevan tentang filter.

Bisa èset lèbât data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncImageMutation
Pengamat Mutasi

molaè versi 2.5.0		trueNgaonenge obâ'ân atribut src dâri kabbhi gambar. Relevan manabi èghunaaghi sareng React otabâ perpustakaan sè padâ.

Bisa èset lèbât data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoRenderOnResize
Ubâ Ukuran Pengamat

molaè versi 2.6.0		trueNgaonenge obâ'ân lebar elemen. Relevan è bâbâna rancangan sè responsif. (Sabellunna versi 2.6.0, pendengar acara resize jendela èghunaaghi)

Bisa èset lèbât data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()

Inisialisasi Manual

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

Ancor Instansi

èkabâ'aghi kasar, èbâli'aghi dâri inisialisasi Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sinkronisasi Daftar Anak Sacara Manual

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

Sinkronisasi Elemen Anak Tunggal Sacara Manual

Biasana ta' parlo, kajabana è bâkto sè cè' langka'na.

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

Sinkronisasi Atribut Sacara Manual

Catet jhâ' opsi useOptionAttributes kodhu true ghâbây panèka.

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

Rendering Paksa

Biasana ta' parlo, sanajân kabbhi otomatisasi èpatè'è

gridzyInstance.render();