Version 2.x – Gridzy.Gallery

Ing website automatic yang me translate. nung atin e malino, paki lawan me ing English documentation.

Basic Usage

I-upload mo reng Gridzy files keng kekang server ampo idagdag mo keng kekang website (keraklan keng head section):

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

Dagdagan me ing HTML code (nu man keng body section):

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

Ita na! Iti metung yang ganap a alimbawa. Ala nang kailangang dagdag a pamagumpisa.

Configuration

Ing peka mayan a paralan para i-configure ing Gridzy, gamitan me ing HTML attributes. kailangan mung i-prefix ing lagyu da reng opsyun keng data-gridzy- . Kaya, para i-set ing spaceBetween option, idagdag me ing attribute 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>

Deng manimunang opsyun

	Default a ulaga	Pamaglarawan
`animate`	`true`	Tuturing na nung dapat yang gamitan ing animation nung magbayu ya ing grid (alimbawa, nung mag-resize ya ing bintana ning browser o nung mag-set yang filter).
`layout`	`justified`	Magdefine yang layout a ginamit. Ing Gridzy.js 2 suportan nala deng adwang miyayaliwang layout `justified` ampo `waterfall` . Balang metung kareti atin yang sariling karagdagang option parameters, na akit mu keng lalam na niting table.
`filter`	`*`	Tuturing na nung sanung larawan ing dapat ipakit. Nanu mang CSS-selector malyari yang gamitan bilang ulaga keni. Keraklan automatic yang mi-set kapamilatan `filterControls` (lawen ya ing tutuking opsyun). lawan mu la reng Filters
`filterControls`		Tuturing na nung sanung form elements ing malyaring gamitan para i-filter la reng larawan. Nanu mang CSS selector, na mamili kareng HTML form elements, malyari yang gamitan bilang ulaga keni. lawan mu la reng Filters
`autoConsiderScrollBars`	`true`	Para abalu ing available a lapad nung lumwal la o mawala la reng scroll bar. Parati yang rekomendadu ing paburen meng `true` nung e ya magdalang problema ing automatism a ini.

Justified Layout Options

	Default a ulaga	Pamaglarawan
`autoFontSize`	`false`	Automatic yang mag-update ing font-size property ning balang box base keng orihinal a box size. keng default ing font-size property ali ya maka set malino.
`desiredHeight`	`190`	Magdefine ya ing buri nang katas da reng element rows. Ing tutuking katas macompute ya depende keng available a lapad ampo reng elementu keng row.
`hideOnMissingImage`	`true`	Itago no reng kahun a maki larawan a e malyaring i-load.
`spaceBetween`	`4`	Magdefine yang distansya kareng elementu keng pixels.
`lastRowAlign` manibat keng version 2.3.0	`justified`	Magdefine ya keng ugali ning tauling hilera. Deng paintulutan a ulaga ilapin `left` , `center` , `right` ampo `justified` .
`singleRowAlign` manibat keng version 2.3.0	`justified`	Magdefine yang behavior nung atin mung metung a row. Deng paintulutan a ulaga ilapin `left` , `center` , `right` ampo `justified` .
~~`fillLastRow`~~ ~~manibat keng version 2.1.0~~	~~`true`~~	MELAKO ya manibat keng version 2.4.0 (DEPRECATED since version 2.3.0 ) I-arrange no reng larawan para ing tauling hilera parati yang ganap a mitmu. nung balak mung idagdag la reng larawan, masanting ing i-deactivate me ini. Ala yang epektu kareng metung a hilera (lawen ya `fillSingleRow` ).
`fillSingleRow` manibat keng version 2.1.0	~~`true`~~	MELAKO ya manibat keng version 2.4.0 (DEPRECATED since version 2.3.0 ) ~~nung metung yamu ing hilera, iyayus no reng larawan para ing hilera parati yang ganap a mitmu. nung malyari na atin kang metung o adwang larawan keng gallery, masanting ing i-deactivate me ini.~~

Waterfall Layout Options

	Default a ulaga	Pamaglarawan
`autoFontSize`	`false`	Automatic yang mag-update ing font-size property ning balang box base keng orihinal a box size. keng default ing font-size property ali ya maka set malino.
`desiredWidth`	`250`	Magdefine ya keng buri mung lapad da reng columns. Ing aktwal a lapad macompute ya depende keng available a lapad ampo ing bilang da reng columns.
`hideOnMissingImage`	`true`	Itago no reng kahun a maki larawan a e malyaring i-load.
`horizontalOrder`	`false`	Idefine na ing elementu makabili yang metung a elementu keng balang column manibat kayli papunta wanan, kaybat magumpisa yang pasibayu keng peka kayli column independenti nung sanung column ing mas maragul a lugal. keng default, deng elementu parati lang makabili keng column na ating pekamalating katas.
`spaceBetween`	`4`	Magdefine yang distansya kareng elementu keng pixels.
`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`.

Mas Advanced a Opsyun

Para kareng mas advanced a opsyun, lawan me ing API .

Semantic HTML

Ing pekasimpleng HTML structure ning Gridzy yapin 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>

Makanyan man, ing Gridzy flexible ya at malyari kang gumamit nanu mang aliwang HTML structure. Atin mung mapilan a puntos a dapat ikonsidera:

Balang anak ning container element magrepresenta yang metung a bage keng grid.
Parehu ing container element ampo reng anak na malyari lang maging nanu mang tag type, antimo ing ul ampo li (isipan mung i-reset ing default ning browser).
nung ing img element ali ya direct child, kailangan ne ing class gridzyImage .

Kaya ini mu rin ing gagawang HTML structure:

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

Lalu na nung bisa kang magdagdag caption, kailangan me ing advanced a HTML structure. Para abalu mu pa tungkul kaniti, lawan me ing Captions & Skins .

Captions & Skins

nung buri meng dagdagan ing caption keng kekang gallery, kailangan meng i-define ing itsura. Uli na niti, atin nang predefined a balat a magagamit. Balang skin atin yang CSS file. kailangan meng idagdag ining file dagdag kareng main Gridzy files (keraklan keng head section):

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

Dagdag pa kailangan me ing advanced a HTML structure:

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

nung magtaka ka tungkul keng HTML structure, lawan me ing Semantic HTML .

Para keng caption malyari kang gumamit nanu mang uri ning tag, siguraduan mung atin yang klasing gridzyCaption . Ing img element kailangan ne ing class gridzyImage .

Ing alimbawa babo papakit na keka ing balat gridzySkinClassic . Para gamitan me ing aliwang metung, palitan me ing lagyu ning balat keng metung kareti:

Kayabe la reng balat

	Available Classes
gridzySkinBlank masanting a panibatan para keng pamaglalang sariling balat live preview	`gridzySkinBlank`
gridzySkinClassic live preview	`gridzySkinClassic` `gridzySkinClassicLight`(DEPRECATED since version 2.6.0)
gridzySkinFullOverlay live preview	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(DEPRECATED since version 2.6.0)
gridzySkinLift live preview	`gridzySkinLift` `gridzySkinLiftLight`(DEPRECATED since version 2.6.0)
gridzySkinMagnifier e ya kayabe ing zoom functionality live preview	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(DEPRECATED since version 2.6.0)

Deng eganaganang skin king babo mangailangan lang CSS file, dapot atin pang karagdagang skin a mangailangan muring JavaScript file:

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

	Available Classes
gridzySkinBlur e ya gagana keng IE live preview	`gridzySkinBlur` `gridzySkinBlurLight`(DEPRECATED since version 2.6.0)
gridzySkinCard live preview	`gridzySkinCard` `gridzySkinCardLight`(DEPRECATED since version 2.6.0)

Opsyun keng balat

Manibat keng version 2.6.0 atin nang opsyun para i-configure ing built-in a balat. Depende keng partikular a balat malyari meng i-set ing kule ning background, kule ning text ampo ing anino ning text. kailangan mung gamitan ing CSS custom properties antimo ing akakit mu keni:

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

lawan la reng suportadung variable ampo reng default a ulaga para kareng balang skin keni:

gridzySkinClassic

Variable	Default a ulaga	Impormasyun
`--background`	`rgba(0, 0, 0, .7)`	paintulutan na ing nanu mang CSS background value
`--color`	`rgb(255, 255, 255)`	paintulutan na ing nanu mang ulaga ning kule ning CSS
`--text-shadow`	`none`	paintulutan na ing nanu mang CSS text-shadow value

gridzySkinFullOverlay

Variable	Default a ulaga	Impormasyun
`--background`	`rgba(0, 0, 0, .7)`	paintulutan na ing nanu mang CSS background value
`--color`	`rgb(255, 255, 255)`	paintulutan na ing nanu mang ulaga ning kule ning CSS
`--text-shadow`	`none`	paintulutan na ing nanu mang CSS text-shadow value

gridzySkinLift

Variable	Default a ulaga	Impormasyun
`--background`	`rgba(0, 0, 0, .7)`	paintulutan na ing nanu mang CSS background value
`--color`	`rgb(255, 255, 255)`	paintulutan na ing nanu mang ulaga ning kule ning CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	paintulutan na ing nanu mang CSS text-shadow value

gridzySkinMagnifier

Variable	Default a ulaga	Impormasyun
`--background`	`rgba(0, 0, 0, .7)`	paintulutan na ing nanu mang CSS background value
`--color`	`rgb(255, 255, 255)`	paintulutan na ing nanu mang ulaga ning kule ning CSS

E na suportan ning skin ayni --text-shadow

gridzySkinBlur

Variable	Default a ulaga	Impormasyun
`--background`	`rgba(0, 0, 0, .7)`	paintulutan na ing nanu mang CSS background value
`--color`	`rgb(255, 255, 255)`	paintulutan na ing nanu mang ulaga ning kule ning CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	paintulutan na ing nanu mang CSS text-shadow value

gridzySkinCard

Variable	Default a ulaga	Impormasyun
`--background`	`rgba(0, 0, 0, 1)`	paintulutan na ing nanu mang CSS background value
`--color`	`rgb(255, 255, 255)`	paintulutan na ing nanu mang ulaga ning kule ning CSS
`--text-shadow`	`none`	paintulutan na ing nanu mang CSS text-shadow value

Deng eganaganang predefined skins suportan da la mu reng simpleng text captions. Malyari kang gawang sarili mung balat at mas komplikadung balat. Paki lawan me ing Style Gridzy .

Style Gridzy

nung ala kang predefined a balat a makayagpang keng kekang kailangan, malyari kang mag-style keng sarili mung balat.

Ing peka mayan a paralan yapin ing mumuna mung kopya ing metung a balat at i-adapt me keng kekang sariling pamangailangan. Ing predefined skin gridzySkinBlank keraklan mamye yang masanting a pundasyun ampo masanting a dokumentasyun keng CSS file:

/** 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;
}

keng CSS file akit mu la reng klasing gridzySkinBlank , gridzyImage ampo gridzyCaption . Ing Gridzy mismu e na kailangan deng klasing deni. Gagamitan da la mu para keng pamag-istilu at malyari mu lang ilako o alilan lagyu nung buri mu.

Dagdag pa, akit me ing CSS class gridzyItem . Ing Gridzy i-set ne ing class ayni automatic kareng eganaganang direct a anak ning main container element. Kaya, malyari meng gamitan ining klasing ini para i-style la reng bage keng kekang gallery.

Isipan Ding Maulagang Bagay

Ing laman ning bage dapat ganap yang makatuki. Isipan mu na ing sukad ning elementu siguradung magbayu ya. Gamitan la reng porsyentu imbes na pixel. At lawan me ing Gridzy layout option autoFontSize , na magbind keng font-size keng item box size.
Balang bage dapat atin yang masaleseng aspect ratio. Ing aspect ratio ning bage e ya magbayu at kailangan ya para makalkula ing grid. Kaya nung ing metung a bage ala yang automatic a aspect ratio, i-predefine me manual (eg kapamilatan ning css).

keng mapilan a kasu, mas mayan yang i-style ing laman da reng bage bayu ya mag-initialize ing Gridzy. Ilako me ing class gridzy o ing Gridzy javascript file pansamantala para kanini.

Ita na! Ita mu ing kailangan mu para gawan me ing sarili mung balat. keraklan kareng predefined a balat e la gagamit mas marakal kesa kanini.

pero atin pang dakal nung buri mu ...

Advanced Skins

Ing Gridzy gagamit yang mas dakal a CSS classes kesa keng gridzyItem . keraklan kareti automatic lang mi-set at malyari mu namang gamitan para keng pamag-style.

Main Container Classes

Lagyu ning Klasi	Pamaglarawan
`gridzy` para i-set manual	Ing Gridzy automatic yang manintun kareng elementu na ning class ayni at mag-initialize na la.
`gridzyAnimated`	Automatic yang mi-set nung `true` ya ing option `animate` . nung manual ya ing class ayni, ing option `animate` automatic yang maging `true` (maliban nung maka set ya keng `false` ).

Klasi ning Bagay

Lagyu ning Klasi	Pamaglarawan
`gridzyItem`	Ma-set ya potang magumpisa ne ing bage keng pamag-umpisa. E ya kapilan man milako.
`gridzyItemInitializing`	Ma-set ya potang magumpisa ne ing bage keng pamag-umpisa. Palitan ne ning `gridzyItemReady` potang me-initialize ne ing item. E na buri sabyan na ing larawan ganap nang maka-load (lawen ya `gridzyItemLoading` ), pero ing bage makasadya neng akit.
`gridzyItemReady`	palitan ne `gridzyItemInitializing` kabud me-initialize ne ing item. E ya kapilan man milako. E na buri sabyan na deng larawan ganap lang maka-load (lawen ya `gridzyItemComplete` ), pero ing bage makasadya neng akit.
`gridzyItemLoading`	Ma-set ya potang magumpisa ne ing bage keng pamag-umpisa. Palitan ne ning `gridzyItemComplete` potang me-load na la reng larawan (keraklan metung mu).
`gridzyItemComplete`	palitan ne `gridzyItemLoading` potang me-load na la reng larawan (keraklan metung mu). E ya kapilan man milako.
`gridzyItemInitialToVisible`	I-set ya potang magumpisa neng lumwal ing bage keng mumunang besis. Ilako ya potang mayayakit ne ing bage.
`gridzyItemVisible`	I-set ya potang mayayakit ne ing bage. Ilako ya potang magumpisa neng mawala ing bage.
`gridzyItemVisibleToHidden`	I-set ya potang magumpisa neng mawala ing bage. Itanggal ya potang lubus neng makasalikut ing bage.
`gridzyItemHidden`	I-set ya potang lubus neng makasalikut ing bage. Ilako ya potang magumpisa neng lumwal ing bage.
`gridzyItemHiddenToVisible`	I-set ya potang magumpisa neng lumwal ing bage (maliban nung lumwal ya keng mumunang besis – lawan me ing class `gridzyItemInitialToVisible` ). Ilako ya potang mayayakit ne ing bage.
`gridzyItemVisibleToVisible`	I-set ya agad nung atin nang mibayu keng grid, pero ing bage mismu atyu ya at manatili yang akakit. Ilako ya potang meyari ne ing pamagbayu animation.

Ing default ing process indicator ampo reng animation para kareng lulual ampo mawala a larawan maka-predefined la keng Gridzy main CSS file.

Kareng mebanggit a CSS classes malyari meng i-style ing kekang sariling process indicator ampo animations. Lawen me ing Gridzy main CSS file, para aintindian mu nung nanu ing kailangan mung i-override. Ala kang takut, ing sabla makadokumentu ya karin.

Optimize ing Loading

nung dakal kang gamitan a larawan, masanting ing saupan me ing Gridzy para mas mabilis yang gawang grid.

Iwasan ing pamagluksu kareng larawan

Ing Gridzy kailangan na ing aspect ratio da reng eganaganang larawan para makalkula ya ing grid. Deting katutwan magresulta la keng pamagluksu kareng elementu nung deng mapilan a larawan makasadya la at deng aliwa ali. nung dakal la reng larawan, mas makasora ing epektu na.

Para aiwasan ing makanining ugali, i-set mu width ampo height para kareng eganaganang img elements. importanti ing i-set ing ustu a ulaga para keng balang metung a larawan, nung ali, maging distorted la reng larawan. Ing ustu a ulaga yapin ing orihinal a lapad ampo katas ning balang metung a larawan:

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

Kaybat na nita, malyari neng kalkulan agad ning Gridzy ing grid a alang kailangang abalu ing sukad da reng larawan.

Lazy Loading

Para mag load lang larawan na atyu keng visible viewport, tukian mu la deng steps a reni:

Isulud la width ampo height a katangian antimo ing makasulat babo (siguraduan mung gamitan la reng ustu a ulaga)
Palitan mo ngan deng src attributes keng data-gridzylazysrc antimo ing akakit mu lalam (nung atin kang srcset attributes, palitan mu la keng 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>

Kaybat da reng steps a reni, mag load la reng larawan potang malapit na la o kilub ning viewport.

Process Indicator

Ing process indicator yapin ing malating animated icon na lulual kabang magload ya ing image. nung gamitan me ing captions ampo skins , ing process indicator automatic yang mipalabas. nung ali kailangan mu ing pamagbayu:

Ibili me ing balang img element keng div element
(o keng nanu mang aliwang elementu – lawan me ing semantic HTML para keng karagdagan)
Dagdagan me ing class gridzyImage keng balang img element

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

Kaybat na nita dapat akit mu la reng process indicators nung deng larawan mangailangan lang panaun para mag load.

Filters

Deng filter keng Gridzy simple la pero masikan la. Agyang nanu pang klasing filter ing kailangan mu, maragul ing posibilidad na malyari ya. Ing kailangan mu mu, ditak a CSS ampo ditak a HTML form elements ...

ini ing metung a alimbawa:

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

Gawan Tayang Hakbang-hakbang

1. Mumuna kailangan tamu ing karaniwan a HTML structure ning Gridzy at i-set la reng class names para kareng eganaganang gallery items para a-filter ta la kaybat

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

Kening alimbawang ayni metung ya mung klasing gagamitan ing balang elementu. Pero malyari ka namang mag set dakal a klasing para keng metung a elementu, nung ing elementung ita akit ya kapamilatan da reng dakal a filter.

2. Kaybat, dagdagan mi la reng mapilan a butones nung nukarin malyari mi lang alilan deng filter kaybat

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

Imbes na buttons, malyari ka namang gumamit aliwang form elements antimo reng checkboxes, radio buttons, select fields ampo aliwa pa.

Kalupa ning akakit mu, deng ulaga da reng butones karaniwan lang CSS selectors. Potang meyari na kami, ing pamag-click keng button ayni papakit nala deng larawan a makatuglung keng CSS selector. keng teknikal, i-set ne ing filter option keng value ayni.

Malyari ka namang gumamit mas komplikadung selector. Alimbawa :not(.animals) magobra ya naman, pati na ing .animals.people ampo .animals, .people .

3. Katataulian, i-encapsulate mi la reng butones keng div container at i-bind mi la keng Gridzy gallery, kapamilatan ning pamag-set keng filterControls option:

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

Antimo ing akakit mu, gagamit kami namang CSS selector para keng filterControls option. Ing div container a maki id attribute magsilbi yamu para mas mayan lang pilinan deng buttons kapamilatan ning CSS selector.

Ita na!

nung buri me ing JavaScript solution, lawan me ing API .

API

Agyang atin yang sariling API ing Gridzy, keraklan kareng bage malyari lang gawan nung ala ya, kapamilatan ning pamagmanipula king DOM. akit ne ning Gridzy at i-adjust ne ing grid. Pero atin mu namang masikan a API ...

Pamagmanipula keng DOM

Para kareng eganaganang Document Object Model (DOM) manipulations kailangan tamu ing container element:

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

Dagdagan la reng larawan

importanti ing gawan me at katmuan me ing bayung child element bayu me idagdag keng container element. nung ali, e na akit ning gridzy ing ustung sukad.

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

Ilako la reng larawan

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

alilan ing opsyun

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

Dakal pa tungkul keng pamagmanipula keng DOM akit me keng MDN web docs . Atin ya namang Introduction keng DOM .

Proprietary API

Para gamitan ing API, kailangan tamu pa ing Gridzy instance, na makabind ya keng Gridzy container element:

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

Kuma kang opsyun

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

Kuanan la ngan deng opsyun

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

Ibili la reng opsyun

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

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

gamitan me ing filter

Ing pamag apply filter yapin ing pamag set keng option filter na malyaring maging nanu mang valid a CSS selector:

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

Dagdagan ing Callback Functions

DEPRECATED since version 2.4.0
Gamitan me ing modernu ampo mas flexible a Events . lawan me ing tutuking section para kareng detalye.

~~Ing Gridzy.js 2 suportan nala deng mapilan a opsyun para kareng callback functions. Malyari lang i-set kapamilatan ning proprietary API, pero kalupa da reng aliwang opsyun:~~

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

	~~Pamaglarawan~~
~~`onBeforeOptionsChanged`~~	~~Callback function na mi-invoke diretsu bayu ya mag-set options.~~
~~`onOptionsChanged`~~	~~Callback function na me-invoke diretsu kaybat ning pamag-set options.~~
~~`onBeforeRender`~~	~~Callback function na me-invoke diretsu bayu ya mag-render.~~
~~`onRender`~~	~~Callback function na me-invoke diretsu kaybat ning pamag-render.~~

Gamitan la reng Events

manibat keng version 2.4.0

Malyari meng gamitan ing Gridzy events kalupa da reng karaniwan a JavaScript events:

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

Deng mapilan a events me-fire la keng Gridzy container element ampo deng aliwang events me-fire la kareng individual item elements kilub ning container element.

Deng events a me-fire keng Gridzy container element:

	Pamaglarawan
`gridzyBeforeInit`	Magsindi ya bayu ya magumpisa ing gallery.
`gridzyInit`	Magsindi ya kaybat ning pamagumpisa ning gallery.
`gridzyBeforeOptionsChanged`	Mag-fire bayu la mag-set options.
`gridzyOptionsChanged`	Magsindi ya kaybat ning pamag-set kareng opsyun.
`gridzyBeforeRender`	Mag-fire bayu mag-render.
`gridzyRender`	Sunog kaybat ning pamag-render.

nung atin kang akit a events keni, paki padala kang support request .

event.target mamye yang Gridzy container element.
event.detail.instance mamye yang Gridzy instance.

Events a me-fire kareng item elements:

	Pamaglarawan
`gridzyItemBeforeInit`	Magsindi ya bayu ya magumpisa ing bage.
`gridzyItemInit`	Magsindi ya kaybat ning pamagumpisa ning bage.
`gridzyItemLoading`	Magsindi ya nung magumpisa neng magload ing bage.
`gridzyItemReady`	Magsindi ya nung ing bage makasadya ne para keng grid calculation. Kaya balu me ing aspect ratio, pero malyari ya pang magload ing image.
`gridzyItemComplete`	Magsindi ya nung ing larawan ning bage me-load ya.

nung atin kang akit a events keni, paki padala kang support request .

event.target mamye yang item element.
event.detail.instance mamye yang Gridzy instance.

API – Global

Atin yang mapilan a function na independent kareng Gridzy instances. Kaya ali tamu kailangang mika instance bayu.

Kuma kang Default a Opsyun

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

Kuanan la ngan deng default a opsyun

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

I-set la reng default a opsyun

E na la set deng opsyun da reng eganaganang me-initialize nang Gridzy instances, pero babie na ing basis para kareng bayung instances. Makanyan man, nung ing metung a opsyun ning metung a existing instance mi-reset ya kapamilatan ning value null , gamitan ne ing bayung default value.

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

Malyari meng gamitan ini para magset kareng opsyun keng mabilug a yatu, nung ausan me bayu ya pa makasadya ing DOM. Kaya ali mu na kailangang i-set ing options bilang attributes.

Automatisms

basta active la ngan deng automatisms ning Gridzy.js 2, ala nang kailangan kareng makatuking paralan. Pero deng automatism malyari lang i-switch off para gamitan ing Gridzy keng mas tradisyunal a paralan:

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

Deng mapilan kareng opsyun a reni e la malyaring i-set kapamilatan ning data-gridzy- attributes o kapamilatan ning setOptions() , uli da reng logical a sangkan:

	Default a ulaga	Pamaglarawan
`autoInitOnDomReady`	`true`	akit nala deng elementu na ating class `gridzy` keng page loading ampo i-initialize nala. Malyari yang i-set kapamilatan ning `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	akit nala deng bayung elementu keng class `gridzy` potang linwal la keng DOM ampo i-initialize nala. (alimbawa ing pamangamit kareng pamagbayu ning bulung) Malyari yang i-set kapamilatan ning `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Akit na nung ding anak a elementu (larawan) midagdag la o milako la, at automatic yang mag-update king grid. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Magdefine ya nung ing `data-gridzy-` attributes keraklan gagamitan de o ali. nung `false` ya, deng opsyun malyari lang i-set kapamilatan ning proprietary API. Malyari yang i-set kapamilatan ning `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	akit na ing pamagbayu da reng `data-gridzy-` attributes, ampo i-update ne ing grid automatic. akit na rin nung ing `gridzyAnimated` class midagdag ya o milako ya ampo nung mika pamagbayu `style` attribute. nung `useOptionAttributes` `false` , akit na ing pamagbayu `style` attribute. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	akit na ing pamagbayu da reng `class` attributes da reng eganaganang child elements (images). Makayagpang kareng filter. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver manibat keng version 2.5.0	`true`	akit na ing pamagbayu da reng `src` attributes da reng eganaganang larawan. Makayagpang ya nung gamitan ya keng React o kalupa nang library. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Resize Observer manibat keng version 2.6.0	`true`	akit na ing pamagbayu ning lapad ning elementu. Makayagpang ya keng responsive a disenyu. (Bayu ing version 2.6.0 metung yang window resize event listener ing ginamit) Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Mag-umpisa yang manual

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

siran me ing instance

Sabian mu, ing kabaligtaran ning pamag-umpisa king Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

I-sync ing listahan da reng anak manual

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

I-sync ing metung a anak a elementu manual

Keraklan e la kailangan, maliban kareng bihira mung kasu.

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

I-sync la reng attributes manual

Tandanan mu na ing useOptionAttributes option dapat true ya para kanini.

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

Pilit ing pamag-render

Keraklan e kailangan, agyang maka-off la ngan deng automatism

gridzyInstance.render();

WordPress Plugin

JavaScript Library

Serbisyu

Bersion 2.x