Versi 2.x – Gridzy.Gallery

Laman web telah diterjemahkan secara automatik. Jika ada yang tidak jelas, sila lihat dokumentasi bahasa Inggeris.

Penggunaan Asas

Muat naik fail Gridzy ke pelayan anda dan tambahkannya ke tapak web anda (biasanya di bahagian kepala):

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

Tambahkan kod HTML (di mana-mana sahaja dalam bahagian badan):

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

Itu sahaja! Itulah contoh yang berfungsi sepenuhnya. Tiada permulaan tambahan diperlukan.

Konfigurasi

Cara paling mudah untuk mengkonfigurasi Gridzy ialah, hanya menggunakan atribut HTML. Anda hanya perlu awalan nama pilihan dengan data-gridzy- . Jadi, untuk menetapkan pilihan spaceBetween , cuma tambah 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 Lalai	Penerangan
`animate`	`true`	Tentukan sama ada animasi harus digunakan apabila grid berubah (contohnya, apabila mengubah saiz tetingkap penyemak imbas atau semasa menetapkan penapis).
`layout`	`justified`	Mentakrifkan susun atur yang digunakan. Gridzy.js 2 menyokong dua reka letak berbeza `justified` dan `waterfall` . Setiap daripada mereka mempunyai parameter pilihan tambahan sendiri, yang boleh anda temui di bawah jadual ini.
`filter`	`*`	Menentukan imej yang patut ditunjukkan. Mana-mana pemilih CSS boleh digunakan sebagai nilai di sini. Biasanya ditetapkan secara automatik melalui `filterControls` (lihat pilihan seterusnya). Semak Penapis
`filterControls`		Tentukan elemen bentuk yang boleh digunakan untuk menapis imej. Mana-mana pemilih CSS, yang memilih elemen bentuk HTML, boleh digunakan sebagai nilai di sini. Semak Penapis
`autoConsiderScrollBars`	`true`	Untuk meramalkan lebar yang tersedia jika bar skrol muncul atau hilang. Sentiasa disyorkan untuk membiarkannya menjadi `true` melainkan automatisme ini menyebabkan masalah.

Justified Pilihan Reka Letak

	Nilai Lalai	Penerangan
`autoFontSize`	`false`	Mengemas kini sifat saiz fon setiap kotak secara automatik berdasarkan saiz kotak asal. Secara lalai sifat saiz fon tidak ditetapkan secara eksplisit.
`desiredHeight`	`190`	Mentakrifkan ketinggian baris elemen yang dikehendaki. Ketinggian sebenar akan dikira bergantung pada lebar yang tersedia dan elemen dalam baris.
`hideOnMissingImage`	`true`	Menyembunyikan kotak yang mengandungi imej yang tidak dapat dimuatkan.
`spaceBetween`	`4`	Mentakrifkan jarak antara elemen dalam piksel.
`lastRowAlign` sejak versi 2.3.0	`justified`	Mentakrifkan kelakuan baris terakhir. Nilai yang dibenarkan ialah `left` , `center` , `right` dan `justified` .
`singleRowAlign` sejak versi 2.3.0	`justified`	Mentakrifkan tingkah laku jika terdapat hanya satu baris. Nilai yang dibenarkan ialah `left` , `center` , `right` dan `justified` .
~~`fillLastRow`~~ ~~sejak versi 2.1.0~~	~~`true`~~	DIKELUARKAN sejak versi 2.4.0 (TAMAT sejak versi 2.3.0 ) Menyusun imej supaya baris terakhir sentiasa diisi sepenuhnya. Jika anda bercadang untuk menambahkan imej secara dinamik, mungkin idea yang baik untuk menyahaktifkan imej ini. Tidak memberi kesan pada baris tunggal (lihat `fillSingleRow` ).
`fillSingleRow` sejak versi 2.1.0	~~`true`~~	DIKELUARKAN sejak versi 2.4.0 (TAMAT sejak versi 2.3.0 ) Jika hanya terdapat satu baris, ia menyusun imej supaya baris sentiasa diisi sepenuhnya. Jika boleh berlaku bahawa anda hanya mempunyai satu atau dua imej dalam galeri, mungkin idea yang baik untuk menyahaktifkan imej ini.

Waterfall Pilihan Reka Letak

	Nilai Lalai	Penerangan
`autoFontSize`	`false`	Mengemas kini sifat saiz fon setiap kotak secara automatik berdasarkan saiz kotak asal. Secara lalai sifat saiz fon tidak ditetapkan secara eksplisit.
`desiredWidth`	`250`	Mentakrifkan lebar lajur yang dikehendaki. Lebar sebenar akan dikira bergantung pada lebar yang tersedia dan bilangan lajur.
`hideOnMissingImage`	`true`	Menyembunyikan kotak yang mengandungi imej yang tidak dapat dimuatkan.
`horizontalOrder`	`false`	Mentakrifkan bahawa elemen diletakkan dengan ketat satu elemen dalam setiap lajur dari kiri ke kanan, kemudian bermula sekali lagi dalam lajur paling kiri bebas di mana lajur lebih banyak tempat. Secara lalai, elemen akan sentiasa diletakkan dalam lajur dengan ketinggian terkecil.
`spaceBetween`	`4`	Mentakrifkan jarak antara elemen dalam piksel.
`singleRowAlign` since version 2.7.0	`justified`	Defines the behavior when not all columns can be filled due to too few images. Allowed values are `left`, `center`, `right` and `justified`.

Lebih Pilihan Lanjutan

Untuk pilihan lanjutan, lihat API .

HTML semantik

Struktur HTML Gridzy yang paling mudah ialah ini:

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

Walau bagaimanapun, Gridzy sangat fleksibel dan anda boleh menggunakan hampir semua struktur HTML yang lain. Hanya terdapat beberapa perkara yang perlu dipertimbangkan:

Setiap kanak-kanak elemen bekas mewakili satu item dalam grid.
Kedua-dua elemen bekas dan anak-anaknya boleh menjadi sebarang jenis teg, seperti ul dan li (pertimbangkan untuk menetapkan semula lalai penyemak imbas).
Jika elemen img bukan anak langsung itu sendiri, ia memerlukan kelas gridzyImage .

Jadi ini juga merupakan struktur HTML yang berfungsi:

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

Terutama jika anda ingin menambah kapsyen, anda memerlukan struktur HTML lanjutan. Untuk mengetahui lebih lanjut mengenainya, lihat Kapsyen & Kulit .

Kapsyen & Kulit

Jika anda ingin menambah kapsyen pada galeri anda, anda perlu menentukan rupa. Oleh itu, beberapa kulit yang telah ditetapkan tersedia. Setiap kulit terdiri daripada fail CSS. Anda perlu menambah fail ini sebagai tambahan kepada fail Gridzy utama (biasanya di bahagian kepala):

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

Tambahan pula anda memerlukan struktur HTML lanjutan:

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

Jika anda tertanya-tanya tentang struktur HTML, lihat HTML Semantik .

Untuk kapsyen anda boleh menggunakan sebarang jenis teg, cuma pastikan ia mempunyai kelas gridzyCaption . Elemen img memerlukan kelas gridzyImage .

Contoh di atas menunjukkan kepada anda kulit gridzySkinClassic . Untuk menggunakan yang lain, cuma gantikan nama kulit dengan salah satu daripada ini:

Termasuk Kulit

	Kelas Tersedia
gridzySkinBlank titik permulaan yang baik untuk mencipta kulit sendiri pratonton langsung	`gridzySkinBlank`
gridzySkinClassic pratonton langsung	`gridzySkinClassic` `gridzySkinClassicLight`(TAMAT sejak versi 2.6.0)
gridzySkinFullOverlay pratonton langsung	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(TAMAT sejak versi 2.6.0)
gridzySkinLift pratonton langsung	`gridzySkinLift` `gridzySkinLiftLight`(TAMAT sejak versi 2.6.0)
gridzySkinMagnifier fungsi zum tidak disertakan pratonton langsung	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(TAMAT sejak versi 2.6.0)

Semua kulit di atas hanya memerlukan fail CSS, tetapi terdapat kulit tambahan yang juga memerlukan fail JavaScript:

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

	Kelas Tersedia
gridzySkinBlur tidak berfungsi dalam IE pratonton langsung	`gridzySkinBlur` `gridzySkinBlurLight`(TAMAT sejak versi 2.6.0)
gridzySkinCard pratonton langsung	`gridzySkinCard` `gridzySkinCardLight`(TAMAT sejak versi 2.6.0)

Pilihan Kulit

Sejak versi 2.6.0 terdapat Pilihan untuk mengkonfigurasi kulit terbina dalam. Bergantung pada kulit tertentu anda boleh menetapkan warna latar belakang, warna teks dan bayangan teks. Anda hanya perlu menggunakan sifat tersuai CSS seperti yang anda boleh lihat di sini:

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

  ...

</div>

Lihat pembolehubah yang disokong dan nilai lalai untuk setiap kulit di sini:

gridzySkinClassic

Pembolehubah	Nilai Lalai	Maklumat
`--background`	`rgba(0, 0, 0, .7)`	membenarkan sebarang nilai latar belakang CSS
`--color`	`rgb(255, 255, 255)`	membenarkan sebarang nilai warna CSS
`--text-shadow`	`none`	membenarkan sebarang nilai bayang-bayang teks CSS

gridzySkinFullOverlay

Pembolehubah	Nilai Lalai	Maklumat
`--background`	`rgba(0, 0, 0, .7)`	membenarkan sebarang nilai latar belakang CSS
`--color`	`rgb(255, 255, 255)`	membenarkan sebarang nilai warna CSS
`--text-shadow`	`none`	membenarkan sebarang nilai bayang-bayang teks CSS

gridzySkinLift

Pembolehubah	Nilai Lalai	Maklumat
`--background`	`rgba(0, 0, 0, .7)`	membenarkan sebarang nilai latar belakang CSS
`--color`	`rgb(255, 255, 255)`	membenarkan sebarang 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)`	membenarkan sebarang nilai bayang-bayang teks CSS

gridzySkinMagnifier

Pembolehubah	Nilai Lalai	Maklumat
`--background`	`rgba(0, 0, 0, .7)`	membenarkan sebarang nilai latar belakang CSS
`--color`	`rgb(255, 255, 255)`	membenarkan sebarang nilai warna CSS

Kulit ini tidak menyokong --text-shadow

gridzySkinBlur

Pembolehubah	Nilai Lalai	Maklumat
`--background`	`rgba(0, 0, 0, .7)`	membenarkan sebarang nilai latar belakang CSS
`--color`	`rgb(255, 255, 255)`	membenarkan sebarang nilai warna CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	membenarkan sebarang nilai bayang-bayang teks CSS

gridzySkinCard

Pembolehubah	Nilai Lalai	Maklumat
`--background`	`rgba(0, 0, 0, 1)`	membenarkan sebarang nilai latar belakang CSS
`--color`	`rgb(255, 255, 255)`	membenarkan sebarang nilai warna CSS
`--text-shadow`	`none`	membenarkan sebarang nilai bayang-bayang teks CSS

Semua kulit yang dipratentukan hanya menyokong kapsyen teks ringkas. Anda boleh mencipta kulit anda sendiri dan lebih kompleks. Sila lihat Style Gridzy .

Gaya Gridzy

Jika tiada kulit yang dipratentukan sesuai dengan keperluan anda, anda boleh menggayakan kulit anda sendiri.

Cara paling mudah adalah dengan menyalin kulit sedia ada dahulu dan menyesuaikannya dengan keperluan anda sendiri. gridzySkinBlank kulit yang telah ditetapkan biasanya akan menyediakan asas yang baik serta dokumentasi yang baik dalam fail CSS:

/** SKIN Blank **/

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

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

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

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

Dalam fail CSS anda akan menemui kelas gridzySkinBlank , gridzyImage dan gridzyCaption . Gridzy sendiri tidak memerlukan kelas ini. Ia hanya digunakan untuk penggayaan dan oleh itu anda boleh mengalih keluar atau menamakan semula mereka jika anda suka.

Selain itu anda akan temui kelas CSS gridzyItem . Gridzy menetapkan kelas ini secara automatik kepada semua anak langsung elemen bekas utama. Jadi, anda boleh menggunakan kelas ini untuk menggayakan item galeri anda.

Fikiran Perkara Penting

Kandungan item harus responsif sepenuhnya. Pertimbangkan bahawa saiz elemen pasti akan berubah. Gunakan nilai peratusan dan bukannya nilai piksel. Dan lihat pada pilihan susun atur Gridzy autoFontSize , yang mengikat saiz fon pada saiz kotak item.
Setiap item harus mempunyai nisbah aspek yang jelas. Nisbah bidang item tidak akan berubah dan diperlukan untuk mengira grid. Jadi jika item tidak mempunyai nisbah bidang yang jelas secara automatik, pratakrifkannya secara manual (cth melalui css).

Dalam sesetengah kes, mungkin lebih mudah untuk menggayakan kandungan item sebelum Gridzy dimulakan. Cukup alih keluar kelas gridzy atau fail javascript Gridzy buat sementara waktu untuk ini.

Itu sahaja! Itu sahaja yang anda perlukan untuk membina kulit anda sendiri. Kebanyakan kulit yang telah ditetapkan tidak menggunakan lebih daripada ini.

Tetapi mungkin ada lagi jika anda suka …

Kulit Termaju

Gridzy menggunakan lebih banyak kelas CSS daripada gridzyItem sahaja. Kebanyakannya akan ditetapkan secara automatik dan anda boleh menggunakannya untuk penggayaan juga.

Kelas Kontena Utama

Nama Kelas	Penerangan
`gridzy` untuk menetapkan secara manual	Gridzy secara automatik mencari elemen dengan kelas ini dan memulakannya.
`gridzyAnimated`	Akan ditetapkan secara automatik jika pilihan `animate` adalah `true` . Jika kelas ini ditetapkan secara manual, pilihan `animate` akan menjadi `true` juga secara automatik (kecuali jika ia secara eksplisit ditetapkan kepada `false` ).

Kelas Item

Nama Kelas	Penerangan
`gridzyItem`	Akan ditetapkan sebaik sahaja item memulakan proses permulaan. Tidak akan pernah dikeluarkan.
`gridzyItemInitializing`	Akan ditetapkan sebaik sahaja item memulakan proses permulaan. Akan digantikan dengan `gridzyItemReady` sebaik sahaja item dimulakan sepenuhnya. Tidak bermakna imej dimuatkan sepenuhnya (lihat `gridzyItemLoading` ), tetapi item sedia untuk dilihat.
`gridzyItemReady`	Akan menggantikan `gridzyItemInitializing` sebaik sahaja item dimulakan sepenuhnya. Tidak akan pernah dikeluarkan. Tidak bermakna imej dimuatkan sepenuhnya (lihat `gridzyItemComplete` ), tetapi item sedia untuk dilihat.
`gridzyItemLoading`	Akan ditetapkan sebaik sahaja item memulakan proses permulaan. Akan digantikan dengan `gridzyItemComplete` sebaik sahaja imej yang terkandung (biasanya hanya satu) dimuatkan sepenuhnya.
`gridzyItemComplete`	Akan menggantikan `gridzyItemLoading` sebaik sahaja imej yang terkandung (biasanya hanya satu) dimuatkan sepenuhnya. Tidak akan pernah dikeluarkan.
`gridzyItemInitialToVisible`	Akan ditetapkan sebaik sahaja item mula muncul pada kali pertama. Akan dialih keluar sebaik sahaja item itu kelihatan sepenuhnya.
`gridzyItemVisible`	Akan ditetapkan sebaik sahaja item itu kelihatan sepenuhnya. Akan dikeluarkan sebaik sahaja item mula hilang.
`gridzyItemVisibleToHidden`	Akan ditetapkan sebaik sahaja item mula hilang. Akan dialih keluar sebaik sahaja item disembunyikan sepenuhnya.
`gridzyItemHidden`	Akan ditetapkan sebaik sahaja item disembunyikan sepenuhnya. Akan dialih keluar sebaik sahaja item mula muncul.
`gridzyItemHiddenToVisible`	Akan ditetapkan sebaik sahaja item mula muncul (kecuali muncul kali pertama – lihat kelas `gridzyItemInitialToVisible` ). Akan dialih keluar sebaik sahaja item itu kelihatan sepenuhnya.
`gridzyItemVisibleToVisible`	Akan ditetapkan sebaik sahaja sesuatu dalam grid berubah, tetapi item itu sendiri telah dan kekal kelihatan. Akan dialih keluar sebaik sahaja animasi perubahan selesai.

Secara lalai penunjuk proses dan animasi untuk imej yang muncul dan hilang dipratakrifkan oleh fail CSS utama Gridzy.

Dengan kelas CSS yang disebutkan di atas, anda boleh menggayakan penunjuk proses dan animasi anda sendiri. Berani melihat ke dalam fail CSS utama Gridzy, untuk memahami perkara yang perlu anda tolak. Tidak perlu takut, semuanya didokumentasikan dengan baik di sana.

Optimumkan Memuatkan

Jika anda menggunakan banyak imej, ia boleh menjadi idea yang baik untuk membantu Gridzy membina grid dengan lebih pantas.

Cegah Melompat Imej

Gridzy benar-benar memerlukan nisbah bidang semua imej untuk mengira grid. Fakta ini mengakibatkan unsur melompat jika sesetengah imej sudah sedia dan yang lain tidak. Semakin banyak imej yang ada, semakin menjengkelkan kesan ini.

Untuk mengelakkan tingkah laku ini, hanya tetapkan atribut width dan height untuk semua elemen img . Adalah penting untuk menetapkan nilai yang betul untuk setiap imej individu, jika tidak imej akan diherotkan. Nilai yang betul ialah lebar dan ketinggian asal imej 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>

Selepas itu Gridzy boleh mengira grid serta-merta tanpa perlu mengetahui saiz sebenar imej.

Malas Memuatkan

Untuk memuatkan hanya imej yang berada dalam port pandangan yang boleh dilihat, ikuti langkah berikut:

Sisipkan atribut width dan height seperti yang diterangkan di atas (pastikan anda menggunakan nilai yang betul)
Gantikan semua atribut src dengan data-gridzylazysrc seperti yang ditunjukkan di bawah (jika anda mempunyai atribut srcset juga, gantikannya dengan data-gridzylazysrcset ).

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

Selepas langkah ini, imej akan dimuatkan sebaik sahaja ia berada berhampiran atau di dalam port pandangan.

Penunjuk Proses

Penunjuk proses ialah ikon animasi kecil yang muncul semasa imej sedang dimuatkan. Jika anda menggunakan kapsyen & kulit , penunjuk proses akan ditunjukkan secara automatik. Jika tidak, anda memerlukan beberapa pelarasan:

Letakkan setiap elemen img ke dalam elemen div
(atau ke dalam mana-mana elemen lain – lihat HTML semantik untuk lebih lanjut)
Tambahkan kelas gridzyImage pada setiap elemen img

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

Selepas itu anda harus melihat penunjuk proses jika imej mengambil masa untuk dimuatkan.

Penapis

Penapis dalam Gridzy agak mudah tetapi berkuasa. Tidak kira jenis penapis yang anda perlukan, besar kemungkinan ia boleh direalisasikan. Apa yang anda perlukan ialah, sedikit CSS dan beberapa elemen bentuk HTML …

Berikut ialah contoh berfungsi:

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

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

Mari Bina Langkah demi Langkah

1. Mula-mula kita memerlukan struktur HTML biasa Gridzy dan tetapkan nama kelas untuk semua item galeri supaya kita boleh menapisnya selepas itu

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

Dalam contoh ini kita hanya menggunakan satu kelas untuk setiap elemen. Tetapi anda juga boleh menetapkan berbilang kelas untuk satu elemen, jika elemen itu boleh dicari melalui berbilang penapis.

2. Kemudian kami menambah beberapa butang di mana kami boleh menukar penapis kemudian

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

Daripada butang, anda juga boleh menggunakan elemen bentuk lain seperti kotak semak, butang radio, medan pilih dan sebagainya.

Seperti yang anda lihat, nilai butang adalah pemilih CSS biasa. Sebaik sahaja kami selesai, klik pada butang sedemikian akan memaparkan imej yang sepadan dengan pemilih CSS tersebut. Secara teknikal ia hanya menetapkan pilihan filter kepada nilai ini.

Anda juga boleh menggunakan pemilih yang lebih kompleks. Contohnya :not(.animals) akan berfungsi juga, serta .animals.people dan .animals, .people .

3. Akhir sekali, kami merangkum butang dalam bekas div dan mengikatnya ke galeri Gridzy, dengan menetapkan 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>

Seperti yang anda lihat, kami juga menggunakan pemilih CSS untuk pilihan filterControls . Bekas div dengan atribut id hanya berfungsi untuk menjadikan butang lebih mudah untuk dipilih melalui pemilih CSS tersebut.

Itu sahaja!

Jika anda lebih suka penyelesaian JavaScript, lihat API .

API

Walaupun Gridzy mempunyai API sendiri, kebanyakan perkara boleh dilakukan tanpanya, hanya dengan memanipulasi DOM. Gridzy akan melihatnya dan melaraskan grid. Tetapi terdapat juga API yang sangat berkuasa …

Memanipulasi DOM

Untuk semua manipulasi Model Objek Dokumen (DOM) kami memerlukan elemen bekas terlebih dahulu:

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

Tambah Imej

Adalah penting untuk membina dan mengisi elemen anak baharu sepenuhnya sebelum anda menambahkannya pada elemen bekas. Jika tidak Gridzy tidak dapat mengesan dimensi yang betul.

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

Alih Keluar Imej

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

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

Lebih lanjut mengenai memanipulasi DOM yang anda boleh temui di MDN web docs . Terdapat juga Pengenalan kepada DOM yang tersedia.

API proprietari

Untuk menggunakan API, mula-mula kita memerlukan contoh Gridzy, yang terikat pada elemen bekas Gridzy:

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

Dapatkan Pilihan

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

Dapatkan Semua Pilihan

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

Tetapkan Pilihan

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

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

Guna Penapis

Menggunakan penapis hanyalah menetapkan filter pilihan yang boleh menjadi mana-mana pemilih CSS yang 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 Panggilan Balik

DITAMATKAN sejak versi 2.4.0
Sebaliknya, gunakan Acara moden dan lebih fleksibel. Lihat bahagian seterusnya untuk butiran.

~~Gridzy.js 2 menyokong beberapa pilihan untuk fungsi panggil balik. Ia boleh ditetapkan hanya melalui API proprietari, tetapi sama seperti pilihan lain:~~

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

	~~Penerangan~~
~~`onBeforeOptionsChanged`~~	~~Fungsi panggil balik yang dipanggil terus sebelum menetapkan pilihan.~~
~~`onOptionsChanged`~~	~~Fungsi panggil balik yang dipanggil terus selepas pilihan tetapan.~~
~~`onBeforeRender`~~	~~Fungsi panggil balik yang dipanggil terus sebelum rendering.~~
~~`onRender`~~	~~Fungsi panggil balik yang dipanggil terus selepas rendering.~~

Gunakan Acara

sejak versi 2.4.0

Anda boleh menggunakan acara Gridzy sama seperti acara JavaScript biasa:

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

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

Sesetengah peristiwa dicetuskan pada elemen kontena Gridzy dan peristiwa lain dicetuskan pada elemen item individu dalam elemen kontena.

Peristiwa yang dicetuskan pada elemen kontena Gridzy:

	Penerangan
`gridzyBeforeInit`	Terbakar sebelum permulaan galeri.
`gridzyInit`	Kebakaran selepas permulaan galeri.
`gridzyBeforeOptionsChanged`	Nyalakan sebelum menetapkan pilihan.
`gridzyOptionsChanged`	Terbakar selepas menetapkan pilihan.
`gridzyBeforeRender`	Membakar sebelum membuat persembahan.
`gridzyRender`	Kebakaran selepas rendering.

Jika anda terlepas sebarang acara di sini, sila hantar permintaan sokongan .

event.target menyediakan elemen bekas Gridzy.
event.detail.instance menyediakan contoh Gridzy.

Peristiwa yang dicetuskan pada elemen item:

	Penerangan
`gridzyItemBeforeInit`	Dibakar sebelum pemulaan item.
`gridzyItemInit`	Terbakar selepas permulaan item.
`gridzyItemLoading`	Terbakar apabila item mula dimuatkan.
`gridzyItemReady`	Menyala apabila item sedia untuk pengiraan grid. Jadi nisbah bidang diketahui, tetapi imej mungkin masih dimuatkan.
`gridzyItemComplete`	Menyala apabila imej item dimuatkan sepenuhnya.

Jika anda terlepas sebarang acara di sini, sila hantar permintaan sokongan .

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

API – Global

Terdapat beberapa fungsi yang bebas daripada kejadian Gridzy. Jadi kita tidak perlu mendapatkan contoh sebelum ini.

Dapatkan Pilihan Lalai

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

Dapatkan Semua Pilihan Lalai

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

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

Tetapkan Pilihan Lalai

Ini tidak menetapkan pilihan semua kejadian Gridzy yang telah dimulakan, tetapi mentakrifkan asas untuk kejadian baharu. Walau bagaimanapun, jika pilihan bagi contoh sedia ada akan ditetapkan semula melalui nilai null , ia akan menggunakan nilai lalai baharu.

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

Anda boleh menggunakan ini untuk menetapkan pilihan secara global, jika anda memanggilnya sebelum DOM sedia. Jadi anda tidak perlu menetapkan pilihan sebagai atribut lagi.

Automatisme

Selagi semua automatisme Gridzy.js 2 aktif, kaedah di bawah tidak diperlukan. Tetapi automatisme boleh dimatikan untuk menggunakan Gridzy dengan cara yang lebih tradisional:

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

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

Sesetengah pilihan ini tidak boleh ditetapkan melalui atribut data-gridzy- atau melalui setOptions() , kerana sebab logik:

	Nilai Lalai	Penerangan
`autoInitOnDomReady`	`true`	Mengesan elemen dengan `gridzy` kelas pada pemuatan halaman dan memulakannya. Boleh ditetapkan melalui `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Pemerhati Mutasi	`true`	Mengesan elemen baharu dengan `gridzy` kelas sebaik sahaja ia muncul dalam DOM dan memulakannya. (cth menggunakan peralihan halaman) Boleh ditetapkan melalui `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Pemerhati Mutasi	`true`	Mengesan sama ada elemen kanak-kanak (imej) ditambah atau dialih keluar dan mengemas kini grid secara automatik. Boleh ditetapkan melalui `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Mentakrifkan sama ada atribut `data-gridzy-` biasanya digunakan atau tidak. Jika ini adalah pilihan `false` boleh ditetapkan hanya melalui API proprietari. Boleh ditetapkan melalui `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Pemerhati Mutasi	`true`	Mengesan perubahan atribut `data-gridzy-` dan mengemas kini grid secara automatik. Juga mengesan jika kelas `gridzyAnimated` ditambah atau dialih keluar dan jika perubahan atribut `style` berlaku. Jika `useOptionAttributes` adalah `false` , ia hanya mengesan perubahan atribut `style` . Boleh ditetapkan melalui `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Pemerhati Mutasi	`true`	Mengesan perubahan atribut `class` semua elemen anak (imej). Relevan mengenai penapis. Boleh ditetapkan melalui `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Pemerhati Mutasi sejak versi 2.5.0	`true`	Mengesan perubahan atribut `src` semua imej. Relevan apabila digunakan dengan React atau perpustakaan yang serupa. Boleh ditetapkan melalui `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver sejak versi 2.6.0	`true`	Mengesan perubahan lebar elemen. Relevan berkenaan reka bentuk responsif. (Sebelum versi 2.6.0 pendengar acara ubah saiz tetingkap digunakan) Boleh ditetapkan melalui `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Mulakan Secara Manual

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

Musnahkan Instance

Secara kasarnya, bertentangan dengan memulakan Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Segerakkan Senarai Anak Secara Manual

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

Segerakkan Elemen Anak Tunggal Secara Manual

Biasanya tidak diperlukan, kecuali dalam kes yang sangat jarang berlaku.

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

Segerakkan Atribut Secara Manual

Ambil perhatian bahawa pilihan useOptionAttributes mestilah true untuk ini.

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

Memaksa Rendering

Biasanya tidak diperlukan, walaupun semua automatisme dimatikan

gridzyInstance.render();

Plugin WordPress

Perpustakaan JavaScript

Perkhidmatan