Versi 2.x – Gridzy.Gallery

Situs web wis diterjemahake kanthi otomatis. Yen ana sing ora jelas, mangga deleng dokumentasi Inggris.

Panggunaan dhasar

Unggah file Gridzy menyang server sampeyan lan tambahake menyang situs web sampeyan (biasane ing bagean sirah):

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

Tambah kode HTML (ing endi wae ing bagean 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>

Mekaten! Iku contone kanthi fungsi. Ora initialization ekstra dibutuhake.

Konfigurasi

Cara paling gampang kanggo ngatur Gridzy yaiku, mung nggunakake atribut HTML. Sampeyan mung kudu prefix jeneng pilihan karo data-gridzy- . Dadi, kanggo nyetel pilihan spaceBetween , mung nambah 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 Default	Katrangan
`animate`	`true`	Nemtokake apa animasi kudu digunakake nalika kothak diganti (contone, nalika ngowahi ukuran jendhela browser utawa nalika nyetel saringan).
`layout`	`justified`	Nemtokake tata letak sing digunakake. Gridzy.js 2 ndhukung loro noto beda `justified` lan `waterfall` . Saben wong duwe paramèter opsi tambahan dhewe, sing bisa ditemokake ing ngisor tabel iki.
`filter`	`*`	Nemtokake gambar sing kudu ditampilake. Sembarang CSS-pamilih bisa digunakake minangka nilai kene. Biasane disetel kanthi otomatis liwat `filterControls` (ndeleng pilihan sabanjure). Priksa Filter
`filterControls`		Nemtokake unsur wangun sing bisa digunakake kanggo nyaring gambar. Sembarang pamilih CSS, sing milih unsur wangun HTML, bisa digunakake minangka nilai kene. Priksa Filter
`autoConsiderScrollBars`	`true`	Kanggo prédhiksi jembar sing kasedhiya yen gulung garis katon utawa ilang. Disaranake supaya tetep `true` kajaba otomatisme iki nyebabake masalah.

Justified Pilihan Tata Letak

	Nilai Default	Katrangan
`autoFontSize`	`false`	Nganyari kanthi otomatis properti ukuran font saben kothak adhedhasar ukuran kothak asli. Kanthi gawan, properti ukuran font ora disetel kanthi jelas.
`desiredHeight`	`190`	Nemtokake dhuwur sing dikarepake saka baris unsur. Dhuwur sing nyata bakal diitung gumantung saka jembar sing kasedhiya lan unsur ing baris kasebut.
`hideOnMissingImage`	`true`	Ndhelikake kothak sing ngemot gambar sing ora bisa dimuat.
`spaceBetween`	`4`	Nemtokake jarak antarane unsur ing piksel.
`lastRowAlign` wiwit versi 2.3.0	`justified`	Nemtokake prilaku baris pungkasan. Nilai sing diijini `left` , `center` , `right` lan `justified` .
`singleRowAlign` wiwit versi 2.3.0	`justified`	Nemtokake prilaku yen mung ana siji baris. Nilai sing diijini `left` , `center` , `right` lan `justified` .
~~`fillLastRow`~~ ~~wiwit versi 2.1.0~~	~~`true`~~	DIBUAT wiwit versi 2.4.0 (DEPRECATED wiwit versi 2.3.0 ) Ngatur gambar supaya baris pungkasan tansah diisi. Yen sampeyan rencana nambah gambar kanthi dinamis, bisa uga apik kanggo mateni iki. Ora ana pengaruh ing baris siji (pirsani `fillSingleRow` ).
`fillSingleRow` wiwit versi 2.1.0	~~`true`~~	DIBUAT wiwit versi 2.4.0 (DEPRECATED wiwit versi 2.3.0 ) ~~Yen mung ana siji larik, iku ngatur gambar supaya larik tansah kebak. Yen bisa kedadeyan yen sampeyan mung duwe siji utawa rong gambar ing galeri, bisa uga apike mateni iki.~~

Waterfall Pilihan Tata Letak

	Nilai Default	Katrangan
`autoFontSize`	`false`	Nganyari kanthi otomatis properti ukuran font saben kothak adhedhasar ukuran kothak asli. Kanthi gawan, properti ukuran font ora disetel kanthi jelas.
`desiredWidth`	`250`	Nemtokake jembar kolom sing dikarepake. Jembar nyata bakal diitung gumantung saka jembar sing kasedhiya lan jumlah kolom.
`hideOnMissingImage`	`true`	Ndhelikake kothak sing ngemot gambar sing ora bisa dimuat.
`horizontalOrder`	`false`	Nemtokake yen unsur diselehake strictly siji unsur ing saben kolom saka kiwa menyang tengen, banjur miwiti maneh ing kolom paling kiwa independen kang kolom luwih panggonan. Kanthi gawan unsur bakal tansah diselehake ing kolom karo dhuwur paling cilik.
`spaceBetween`	`4`	Nemtokake jarak antarane unsur ing 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 Luwih Lanjut

Kanggo opsi sing luwih maju, priksa API .

HTML Semantik

Struktur HTML paling gampang saka Gridzy yaiku:

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

Nanging, Gridzy fleksibel banget lan sampeyan bisa nggunakake meh kabeh struktur HTML liyane. Mung ana sawetara poin sing kudu ditimbang:

Saben anak saka unsur wadhah makili siji item ing kothak.
Unsur wadhah lan anak-anake bisa dadi jinis tag apa wae, kayata ul lan li (mung nimbang kanggo ngreset standar browser).
Yen unsur img dudu anak langsung, butuh kelas gridzyImage .

Dadi iki uga minangka struktur HTML sing bisa digunakake:

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

Utamane yen sampeyan pengin nambah katrangan, sampeyan butuh struktur HTML sing canggih. Kanggo mangerteni sing luwih lengkap babagan iki, deleng Caption & Skins .

Caption & Skins

Yen sampeyan pengin nambah katrangan menyang galeri sampeyan, sampeyan kudu nemtokake tampilan. Mulane, sawetara kulit sing wis ditemtokake kasedhiya. Saben kulit kasusun saka file CSS. Sampeyan kudu nambah file iki saliyane file Gridzy utama (biasane ing bagean sirah):

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

Kajaba iku, sampeyan butuh struktur HTML sing luwih 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>

Yen sampeyan kepingin weruh babagan struktur HTML, deleng Semantic HTML .

Kanggo caption sampeyan bisa nggunakake sembarang tipe tag, mung mesthekake yen wis kelas gridzyCaption . Unsur img mbutuhake kelas gridzyImage .

Conto ing ndhuwur nuduhake sampeyan kulit gridzySkinClassic . Kanggo nggunakake sing beda, mung ngganti jeneng kulit nganggo salah siji saka iki:

Klebu Kulit

	Kelas kasedhiya
gridzySkinBlank titik wiwitan apik kanggo nggawe kulit dhewe pratayang urip	`gridzySkinBlank`
gridzySkinClassic pratayang urip	`gridzySkinClassic` `gridzySkinClassicLight`(DEPRECATED wiwit versi 2.6.0)
gridzySkinFullOverlay pratayang urip	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(DEPRECATED wiwit versi 2.6.0)
gridzySkinLift pratayang urip	`gridzySkinLift` `gridzySkinLiftLight`(DEPRECATED wiwit versi 2.6.0)
gridzySkinMagnifier fungsi zoom ora klebu pratayang urip	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(DEPRECATED wiwit versi 2.6.0)

Kabeh kulit ing ndhuwur mung mbutuhake file CSS, nanging ana kulit tambahan sing uga mbutuhake file JavaScript:

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

	Kelas kasedhiya
gridzySkinBlur ora bisa ing IE pratayang urip	`gridzySkinBlur` `gridzySkinBlurLight`(DEPRECATED wiwit versi 2.6.0)
gridzySkinCard pratayang urip	`gridzySkinCard` `gridzySkinCardLight`(DEPRECATED wiwit versi 2.6.0)

Pilihan Kulit

Wiwit versi 2.6.0 ana Pilihan kanggo ngatur kulit dibangun ing. Gumantung ing kulit tartamtu sampeyan bisa nyetel werna latar mburi, werna teks lan bayangan teks. Sampeyan mung kudu nggunakake properti khusus CSS kaya sing sampeyan deleng ing kene:

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

Priksa variabel sing didhukung lan nilai standar kanggo saben kulit ing kene:

gridzySkinClassic

Variabel	Nilai Default	Informasi
`--background`	`rgba(0, 0, 0, .7)`	ngidini sembarang nilai latar mburi CSS
`--color`	`rgb(255, 255, 255)`	ngidini sembarang nilai werna CSS
`--text-shadow`	`none`	ngidini sembarang nilai CSS teks-bayangan

gridzySkinFullOverlay

Variabel	Nilai Default	Informasi
`--background`	`rgba(0, 0, 0, .7)`	ngidini sembarang nilai latar mburi CSS
`--color`	`rgb(255, 255, 255)`	ngidini sembarang nilai werna CSS
`--text-shadow`	`none`	ngidini sembarang nilai CSS teks-bayangan

gridzySkinLift

Variabel	Nilai Default	Informasi
`--background`	`rgba(0, 0, 0, .7)`	ngidini sembarang nilai latar mburi CSS
`--color`	`rgb(255, 255, 255)`	ngidini sembarang nilai werna CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	ngidini sembarang nilai CSS teks-bayangan

gridzySkinMagnifier

Variabel	Nilai Default	Informasi
`--background`	`rgba(0, 0, 0, .7)`	ngidini sembarang nilai latar mburi CSS
`--color`	`rgb(255, 255, 255)`	ngidini sembarang nilai werna CSS

Kulit iki ora ndhukung --text-shadow

gridzySkinBlur

Variabel	Nilai Default	Informasi
`--background`	`rgba(0, 0, 0, .7)`	ngidini sembarang nilai latar mburi CSS
`--color`	`rgb(255, 255, 255)`	ngidini sembarang nilai werna CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	ngidini sembarang nilai CSS teks-bayangan

gridzySkinCard

Variabel	Nilai Default	Informasi
`--background`	`rgba(0, 0, 0, 1)`	ngidini sembarang nilai latar mburi CSS
`--color`	`rgb(255, 255, 255)`	ngidini sembarang nilai werna CSS
`--text-shadow`	`none`	ngidini sembarang nilai CSS teks-bayangan

Kabeh kulit sing wis ditemtokake mung ndhukung katrangan teks sing prasaja. Sampeyan bisa nggawe kulit dhewe lan luwih rumit. Mangga deleng Style Gridzy .

Gaya Gridzy

Yen ora ana kulit sing wis ditemtokake sing cocog karo kabutuhan sampeyan, sampeyan bisa nggawe gaya dhewe.

Cara paling gampang yaiku nyalin kulit sing wis ana lan adaptasi karo kabutuhan sampeyan. gridzySkinBlank kulit sing wis ditemtokake biasane bakal nyedhiyakake dhasar sing apik uga dokumentasi sing apik ing 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;
}

Ing file CSS sampeyan bakal nemokake kelas gridzySkinBlank , gridzyImage lan gridzyCaption . Gridzy dhewe ora butuh kelas kasebut. Iki mung digunakake kanggo gaya lan supaya sampeyan bisa mbusak utawa ngganti jeneng yen sampeyan seneng.

Kajaba iku, sampeyan bakal nemokake kelas CSS gridzyItem . Gridzy nyetel kelas iki kanthi otomatis kanggo kabeh anak langsung saka unsur wadhah utama. Dadi, sampeyan bisa nggunakake kelas iki kanggo gaya item ing galeri.

Pikiran Sing Penting

Isi item kudu responsif kanthi lengkap. Coba sing ukuran unsur mesthi bakal ngganti. Gunakake nilai persentase tinimbang nilai piksel. Lan deleng pilihan tata letak Gridzy autoFontSize , sing ngiket ukuran font menyang ukuran kothak item.
Saben item kudu duwe rasio aspek sing ditemtokake kanthi apik. Rasio aspek item ora bakal owah lan dibutuhake kanggo ngetung kothak. Dadi yen item ora kanthi otomatis duwe rasio aspek sing wis ditemtokake kanthi apik, predefine kanthi manual (contone liwat css).

Ing sawetara kasus, bisa uga luwih gampang kanggo gaya isi item sadurunge Gridzy miwiti. Mung mbusak gridzy kelas utawa file javascript Gridzy sementara kanggo iki.

Mekaten! Iku kabeh sing perlu kanggo mbangun kulit dhewe. Umume kulit sing wis ditemtokake ora nggunakake luwih akeh tinimbang iki.

Nanging bisa uga ana liyane yen sampeyan seneng ...

Kulit majeng

Gridzy nggunakake luwih akeh kelas CSS tinimbang mung gridzyItem . Umume bakal disetel kanthi otomatis lan sampeyan uga bisa nggunakake kanggo gaya.

Kelas Kontainer Utama

Jeneng Kelas	Katrangan
`gridzy` kanggo nyetel kanthi manual	Gridzy kanthi otomatis nemokake unsur karo kelas iki lan miwiti.
`gridzyAnimated`	Bakal disetel kanthi otomatis yen pilihan `animate` `true` . Yen kelas iki disetel kanthi manual, opsi `animate` bakal kanthi otomatis uga `true` (kajaba yen kanthi tegas disetel dadi `false` ).

Kelas Item

Jeneng Kelas	Katrangan
`gridzyItem`	Bakal disetel sanalika item miwiti proses initializing. Ora bakal dibusak.
`gridzyItemInitializing`	Bakal disetel sanalika item miwiti proses initializing. Bakal diganti dening `gridzyItemReady` sanalika item wis diinisialisasi kanthi lengkap. Tegese ora gambar wis kebak dimuat (ndeleng `gridzyItemLoading` ), nanging item siap kanggo katon.
`gridzyItemReady`	Bakal ngganti `gridzyItemInitializing` sanalika item wis diinisialisasi kanthi lengkap. Ora bakal dibusak. Tegese ora gambar wis kebak dimuat (ndeleng `gridzyItemComplete` ), nanging item siap kanggo katon.
`gridzyItemLoading`	Bakal disetel sanalika item miwiti proses initializing. Bakal diganti dening `gridzyItemComplete` sanalika gambar sing ana (biasane mung siji) wis kebak.
`gridzyItemComplete`	Bakal ngganti `gridzyItemLoading` sanalika gambar sing ana (biasane mung siji) dimuat. Ora bakal dibusak.
`gridzyItemInitialToVisible`	Bakal disetel sanalika item wiwit katon pisanan. Bakal dibusak sanalika item wis rampung katon.
`gridzyItemVisible`	Bakal disetel sanalika item katon kanthi lengkap. Bakal dibusak sanalika item wiwit ilang.
`gridzyItemVisibleToHidden`	Bakal disetel sanalika item wiwit ilang. Bakal dibusak sanalika item wis rampung didhelikake.
`gridzyItemHidden`	Bakal disetel sanalika item wis rampung didhelikake. Bakal dibusak sanalika item wiwit katon.
`gridzyItemHiddenToVisible`	Bakal disetel sanalika item wiwit katon (kajaba katon pisanan - ndeleng kelas `gridzyItemInitialToVisible` ). Bakal dibusak sanalika item wis rampung katon.
`gridzyItemVisibleToVisible`	Bakal disetel sanalika soko ing kothak diganti, nanging item dhewe lan tetep katon. Bakal dibusak sanalika animasi pangowahan rampung.

Kanthi gawan, indikator proses lan animasi kanggo gambar sing katon lan ilang wis ditemtokake dening file CSS utama Gridzy.

Kanthi kelas CSS kasebut ing ndhuwur sampeyan bisa nggawe gaya indikator lan animasi proses sampeyan dhewe. Wani dipikir menyang Gridzy file CSS utama, kanggo ngerti apa sing bakal kudu timpa. Ora wedi, kabeh wis didokumentasikake kanthi apik.

Ngoptimalake Loading

Yen sampeyan nggunakake akeh gambar, iku bisa dadi apike kanggo mbantu Gridzy mbangun kothak luwih cepet.

Nyegah Mlumpat Gambar

Gridzy pancen mbutuhake rasio aspek kabeh gambar kanggo ngetung kothak. Kasunyatan iki nyebabake unsur mlumpat yen sawetara gambar wis siyap lan liyane ora. Sing liyane gambar ana, liyane ngganggu bisa efek iki.

Kanggo nyegah prilaku iki, mung nyetel atribut width lan height kanggo kabeh unsur img . Penting kanggo nyetel nilai sing bener kanggo saben gambar, yen ora, gambar kasebut bakal kleru. Nilai sing bener yaiku jembar lan dhuwur asli saka gambar kasebut:

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

Banjur Gridzy bisa langsung ngetung kothak tanpa kudu ngerti ukuran gambar sing bener.

Lazy Loading

Kanggo mbukak mung gambar sing ana ing viewport sing katon, tindakake langkah iki:

Lebokake atribut width lan height kaya sing kasebut ing ndhuwur (priksa manawa nggunakake nilai sing bener)
Ganti kabeh atribut src nganggo data-gridzylazysrc kaya sing kapacak ing ngisor iki (yen sampeyan uga duwe atribut srcset , ganti nganggo 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>

Sawise langkah-langkah iki, gambar bakal dimuat sanalika cedhak utawa ana ing area pandang.

Indikator Proses

Indikator proses yaiku lambang animasi cilik sing katon nalika gambar lagi dimuat. Yen sampeyan nggunakake caption & skins , indikator proses bakal ditampilake kanthi otomatis. Yen ora, sampeyan butuh sawetara pangaturan:

Sijine saben unsur img menyang unsur div
(utawa menyang unsur liyane - deleng HTML semantik kanggo luwih akeh)
Tambah kelas gridzyImage kanggo saben unsur 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>

Sawise sampeyan kudu ndeleng pratondho proses yen gambar njupuk wektu kanggo mbukak.

Filter-filter

Filter-filter ing Gridzy cukup prasaja nanging kuat. Ora ketompo apa jenis panyaring sing sampeyan butuhake, mesthine bisa diwujudake. Sampeyan mung perlu, rada CSS lan sawetara unsur wangun HTML ...

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

Ayo Dibangun Step by Step

1. Pisanan kita kudu struktur HTML biasanipun Gridzy lan nyetel jeneng kelas kanggo kabeh item galeri supaya kita bisa nyaring sakwise

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

Ing conto iki kita mung nggunakake siji kelas kanggo saben unsur. Nanging sampeyan uga bisa nyetel macem-macem kelas kanggo unsur siji, yen unsur kasebut kudu bisa ditemokake liwat sawetara saringan.

2. Banjur kita nambah sawetara tombol liwat kang kita bisa ngganti saringan banjur

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

Tinimbang tombol, sampeyan uga bisa nggunakake unsur wangun liyane kaya kothak centhang, tombol radio, pilih kolom lan ing.

Kaya sing sampeyan ngerteni, nilai tombol kasebut minangka pamilih CSS biasa. Sawise rampung, klik tombol kasebut bakal nampilake gambar sing cocog karo pamilih CSS kasebut. Secara teknis, mung nyetel pilihan filter kanggo nilai kasebut.

Sampeyan uga bisa nggunakake pamilih sing luwih rumit. Contone :not(.animals) uga bisa digunakake, uga .animals.people lan .animals, .people .

3. Pungkasan, kita encapsulate tombol ing wadhah div lan ikatan menyang galeri Gridzy, kanthi 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>

Kaya sing sampeyan ngerteni, kita uga nggunakake pamilih CSS kanggo pilihan filterControls . Wadah div kanthi atribut id mung bisa nggawe tombol luwih gampang dipilih liwat pamilih CSS kasebut.

Mekaten!

Yen luwih seneng solusi JavaScript, priksa API .

API

Sanajan Gridzy duwe API dhewe, umume bisa ditindakake tanpa, mung kanthi ngapusi DOM. Gridzy bakal sok dong mirsani lan nyetel kothak. Nanging ana uga API sing kuat banget ...

Manipulasi DOM

Kanggo kabeh manipulasi Document Object Model (DOM) kita butuh unsur wadah:

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

Tambah Gambar

Penting kanggo mbangun lan ngisi unsur anak anyar sadurunge ditambahake menyang unsur wadhah. Yen ora, Gridzy ora bisa ndeteksi dimensi sing bener.

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

Mbusak Gambar

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

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

Luwih lengkap babagan manipulasi DOM sing bisa ditemokake ing dokumen web MDN . Ana uga Pambuka kanggo DOM kasedhiya.

API proprietary

Kanggo nggunakake API, kita butuh conto Gridzy, sing diikat menyang unsur wadhah Gridzy:

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

Entuk Pilihan

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

Entuk Kabeh 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
});

Aplikasi Filter

Nglamar filter mung nyetel filter pilihan sing bisa dadi pamilih CSS sing bener:

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

DEPRECATED wiwit versi 2.4.0
Gunakake Acara modern lan luwih fleksibel tinimbang. Deleng bagean sabanjure kanggo rincian.

~~Gridzy.js 2 ndhukung sawetara opsi kanggo fungsi callback. Bisa disetel mung liwat API proprietary, nanging kaya opsi liyane:~~

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

	~~Katrangan~~
~~`onBeforeOptionsChanged`~~	~~Fungsi callback sing dijaluk langsung sadurunge nyetel pilihan.~~
~~`onOptionsChanged`~~	~~Fungsi callback sing dijaluk langsung sawise setelan pilihan.~~
~~`onBeforeRender`~~	~~Fungsi callback sing dijaluk langsung sadurunge rendering.~~
~~`onRender`~~	~~Fungsi callback sing dijaluk langsung sawise rendering.~~

Gunakake Acara

wiwit versi 2.4.0

Sampeyan bisa nggunakake acara Gridzy persis kaya acara JavaScript biasanipun:

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

Sawetara acara dipecat ing unsur wadhah Gridzy lan acara liyane dipecat ing unsur item individu ing unsur wadhah.

Acara dipecat ing unsur wadhah Gridzy:

	Katrangan
`gridzyBeforeInit`	Fires sadurunge gallery initialization.
`gridzyInit`	Fires sawise gallery initialization.
`gridzyBeforeOptionsChanged`	Fires sadurunge nyetel pilihan.
`gridzyOptionsChanged`	Fires sawise setelan pilihan.
`gridzyBeforeRender`	Fires sadurunge Rendering.
`gridzyRender`	Fires sawise Rendering.

Yen sampeyan ora kejawab acara apa wae ing kene, kirimake panyuwunan dhukungan .

event.target nyedhiyakake unsur wadhah Gridzy.
event.detail.instance nyedhiyakake conto Gridzy.

Acara sing ditindakake ing unsur item:

	Katrangan
`gridzyItemBeforeInit`	Fires sadurunge initialization item.
`gridzyItemInit`	Fires sawise initialization item.
`gridzyItemLoading`	Muter nalika item wiwit dimuat.
`gridzyItemReady`	Fires nalika item wis siyap kanggo pitungan kothak. Dadi rasio aspek dikenal, nanging gambar isih bisa dimuat.
`gridzyItemComplete`	Muncul nalika gambar item wis kebak.

Yen sampeyan ora kejawab acara apa wae ing kene, kirimake panyuwunan dhukungan .

event.target nyedhiyakake unsur item sing gegandhengan.
event.detail.instance nyedhiyakake conto Gridzy.

API - Global

Ana sawetara fungsi sing independen saka kedadean Gridzy. Dadi kita ora perlu njaluk conto sadurunge.

Entuk Pilihan Default

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

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

Iki ora nyetel pilihan kabeh kasus Gridzy sing wis diwiwiti, nanging nemtokake basis kanggo kasus anyar. Nanging, yen opsi saka conto sing wis ana bakal direset liwat nilai null , iku bakal nggunakake nilai standar anyar.

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

Sampeyan bisa nggunakake iki kanggo nyetel opsi global, yen sampeyan nelpon sadurunge DOM siap. Dadi sampeyan ora perlu nyetel opsi minangka atribut maneh.

otomatis

Anggere kabeh automatisms saka Gridzy.js 2 aktif, ana ora perlu kanggo cara ing ngisor iki. Nanging automatisme bisa dipateni kanggo nggunakake Gridzy kanthi cara sing luwih 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
});

Sawetara opsi iki ora bisa disetel liwat atribut data-gridzy- utawa liwat setOptions() , amarga alasan logis:

	Nilai Default	Katrangan
`autoInitOnDomReady`	`true`	Ndeteksi unsur karo kelas `gridzy` ing kaca loading lan initializes. Bisa disetel liwat `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Pengamat Mutasi	`true`	Ndeteksi unsur anyar karo kelas `gridzy` sanalika padha katon ing DOM lan initializes. (contone nggunakake transisi kaca) Bisa disetel liwat `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Pengamat Mutasi	`true`	Ndeteksi apa unsur anak (gambar) ditambahake utawa dibusak, lan nganyari kothak kanthi otomatis. Settable liwat `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Nemtokake apa atribut `data-gridzy-` umume digunakake utawa ora. Yen iki `false` opsi mung bisa disetel liwat API proprietary. Settable liwat `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Pengamat Mutasi	`true`	Ndeteksi owah-owahan atribut `data-gridzy-` , lan nganyari kothak kanthi otomatis. Uga ndeteksi yen kelas `gridzyAnimated` ditambahake utawa dibusak lan yen ana owah-owahan atribut `style` . Yen `useOptionAttributes` `false` , mung ndeteksi owah-owahan atribut `style` . Settable liwat `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Pengamat Mutasi	`true`	Ndeteksi owah-owahan atribut `class` kabeh unsur anak (gambar). Relevan babagan saringan. Settable liwat `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Pengamat Mutasi wiwit versi 2.5.0	`true`	Ndeteksi owah-owahan atribut `src` kabeh gambar. Relevan nalika digunakake karo React utawa perpustakaan sing padha. Settable liwat `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Ngowahi ukuran Observer wiwit versi 2.6.0	`true`	Ndeteksi owah-owahan saka jembaré unsur. Relevan babagan desain responsif. (Sadurunge versi 2.6.0, pamireng acara ngowahi ukuran jendhela digunakake) Settable liwat `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Initialize kanthi manual

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

Numpes Instance

Kira-kira ngandika, ngelawan saka initializing Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Nyelarasake dhaptar anak kanthi manual

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

Nyelarasake Elemen Anak Tunggal kanthi Manual

Biasane ora perlu, kajaba ing kasus sing arang banget.

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

Nyelarasake atribut kanthi manual

Elinga yen opsi useOptionAttributes kudu true kanggo iki.

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

Force Rendering

Biasane ora perlu, sanajan kabeh otomatis dipateni

gridzyInstance.render();

Plugin WordPress

Pustaka JavaScript

Layanan