Version 2.x – Gridzy.Gallery

I website esta ma translada gui' mismo. Yanggen guaha ti klaru, atan i tinige' gi fino' Engles.

Usan På'go

Na'halom i Gridzy na file siha gi i server-mu ya un addåpta gi i website-mu (gi i head section):

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

Addåpta i HTML na kodu (gi maseha manu gi i seksion i tataotao):

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

Estague'! Este na ehemplo, gof maolek. Ti nisisåriu na u ma'usa otro na inetnon.

Konfigurasion

I mas fa'tinas na manera para un konfigura i Gridzy, i para un usa ha' i HTML na attibut siha. Debi di un na'i i na'an i option siha ni' data-gridzy- . Pues, para un setbe i spaceBetween na option, addåpta i 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>

I Prinsipåt na Siha

	Balotu ni' ma'usa	Ketsura
`animate`	`true`	Ha disidi kao debi di u ma'usa i animasion yanggen ma'apåsi i grid (pot hemplo, yanggen ma'apåsi i browser window pat yanggen ma'apåsi i filter).
`layout`	`justified`	Ha difina i ma'usa na layout. I Gridzy.js 2 ha soståba i dos na diferentes na layout `justified` yan `waterfall` . Kada unu giya siha guaha propiu na parametru-ña, ni' siña un sodda' gi papa' este na lamasa.
`filter`	`*`	Ha disidi hafa na litråtu siha para u ma fa'nu'i. Siña ma'usa maseha hafa na CSS-selector komo balotu guini. Ma setbe gi `filterControls` (atan i sigiente na option). Atan i Filters
`filterControls`		Ha ditetmina hafa na elementu siha siña ma'usa para u ma'filter i litråtu siha. Todu i CSS selector, ni' ha selekta i HTML form elements, siña ma'usa komo balotu guini. Atan i Filters
`autoConsiderScrollBars`	`true`	Para u ma predikta i lina'la' ni' siña ma li'e' yanggen manmafa'nu'i pat manmalingu i scroll bars. Siempre ma rekomenda na u ma na'suha gi i `true` achokka' este na automatism ha na'fanproblema.

Justified Siha i Siha

	Balotu ni' ma'usa	Ketsura
`autoFontSize`	`false`	Ha na'fa'nu'i i font-size na propiedåt kada na kahon sigun ginen i orihinat na kahon. Gi i tutuhon, i propiedåt font-size ti ma setbe esplåsitu.
`desiredHeight`	`190`	Ha difina i malago'-ña na tinakhilo' i lina'la' i elementu siha. I minagahet na tinakhilo' para u ma'ayek depende gi i lina'la' yan i elementu siha gi i linå'la'.
`hideOnMissingImage`	`true`	Ha na'ma'å'ñao i kahon siha ni' guaha litråtu siha ni' ti siña ma'a'atan.
`spaceBetween`	`4`	Ha difina i distansia gi entre i elementu siha gi i pixels.
`lastRowAlign` desdeki i båndan 2.3.0	`justified`	Ha difina i kinalamten i uttimo na linå'la'. I balotu siha ni' ma'aprueba, i `left` , `center` , `right` yan `justified` .
`singleRowAlign` desdeki i båndan 2.3.0	`justified`	Ha difina i kinalamten yanggen guaha ha' un lina'la'. I balotu siha ni' ma'aprueba, i `left` , `center` , `right` yan `justified` .
~~`fillLastRow`~~ ~~desdeki i båndan 2.1.0~~	~~`true`~~	MA NA'suha desdeki i båndan 2.4.0 (MA'A'A'ÑAO desdeki i båndan 2.3.0 ) Ha na'setbe i litråtu siha ya i uttimo na linå'la' siempre ma'gåsi. Yanggen malago' hao para un addåpta i litråtu siha, siña maolek yanggen un na'suha este. Ti ha afekta i unu na linå'la' (atan `fillSingleRow` ).
`fillSingleRow` desdeki i båndan 2.1.0	~~`true`~~	MA NA'suha desdeki i båndan 2.4.0 (MA'A'A'ÑAO desdeki i båndan 2.3.0 ) ~~Yanggen un linå'la' ha', ha na'setbe i litråtu siha ya u ma'gåsi todu i tiempo. Yanggen siña ha' na guaha ha' unu pat dos na litråtu gi i ga'låri, siña maolek na un na'suha este.~~

Waterfall Layout Options

	Balotu ni' ma'usa	Ketsura
`autoFontSize`	`false`	Ha na'fa'nu'i i font-size na propiedåt kada na kahon sigun ginen i orihinat na kahon. Gi i tutuhon, i propiedåt font-size ti ma setbe esplåsitu.
`desiredWidth`	`250`	Ha difina i malago'-mu na lina'la' i kolumna siha. I minagahet na lina'la' para u ma'ayek depende gi i lina'la' ni' gaige yan i numeron i kolumna siha.
`hideOnMissingImage`	`true`	Ha na'ma'å'ñao i kahon siha ni' guaha litråtu siha ni' ti siña ma'a'atan.
`horizontalOrder`	`false`	Ha difina na i elementu siha ma po'lo un elementu ha' gi kada kolumna ginen sanhilo' asta sanhilo', pues ha tutuhon ta'lo gi i mas sanhilo' na kolumna independiente gi hafa na kolumna mas gaige. Gi i tutuhon, i elementu siha siempre ma po'lo gi i kolumna ni' mas dikike' i tinakhilo'-ña.
`spaceBetween`	`4`	Ha difina i distansia gi entre i elementu siha gi i 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 Manå'paka' na Siha

Para mas takhilo' na option siha, atan i API .

HTML ni' siña ma'usa

I mas sempli na estrukturan HTML gi Gridzy este:

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

Lao, i Gridzy sen fleksible ya siña un usa kasi todu i otro na HTML na estruktura. Guaha ha' dididi' na punto para un konsidera:

Kada patgon gi i elementon container ha represesenta un kosa gi i grid.
I container element yan i famagu'on-ña siña maseha hafa na klasin tag, taiguihi ul yan li (konsidera ha' para un na'lå'la' ta'lo i defaults gi i browser).
Yanggen ti direcho na patgon i img na elemento, debi di u ma'usa i klasen gridzyImage .

Pues este lokkue' un estrukturan HTML ni' machocho'cho':

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

Espesiatmente yanggen malago' hao muna'halom i tinige'-mu, debi di un na'guaha un HTML na estruktura ni' takhilo'. Para un tungo' put este, atan i Captions & Skins .

Captions & Skins

Yanggen malago' hao muna'halom tinige' gi i ga'låri-mu, debi di un difina i apaka'-ña. Pues, guaha na'ma'å'ñao na lassås siha. Kada skin guaha un CSS na file. Debi di un addåpta este na file gi i mas takhilo' na Gridzy na file siha (gi i head section):

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

På'go, debi di un na'guaha un HTML na estruktura:

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

Yanggen malago' hao tumungo' put i estrukturan HTML, atan i Semantic HTML .

Para i tinige' siña un usa maseha hafa na klasin tag, siguru ha' na guaha klasin gridzyCaption . I img na elemento ha nisisita i klasen gridzyImage .

I ehemplo gi sanhilo' ha fa'nu'i hao i lassås gridzySkinClassic . Para un usa otro, na'suha i na'an i lassås ya un na'i unu gi este siha:

I Kulot ni' Ma'a'agang

	Klase siha ni' Guaha
gridzySkinBlank un maolek na tinituhon para un fa'tinas un lassås lina'la' na prebisu	`gridzySkinBlank`
gridzySkinClassic lina'la' na prebisu	`gridzySkinClassic` `gridzySkinClassicLight`(MA'A'A'ÑAO desdeki i båndan 2.6.0)
gridzySkinFullOverlay lina'la' na prebisu	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(MA'A'A'ÑAO desdeki i båndan 2.6.0)
gridzySkinLift lina'la' na prebisu	`gridzySkinLift` `gridzySkinLiftLight`(MA'A'A'ÑAO desdeki i båndan 2.6.0)
gridzySkinMagnifier ti ma'a'agang i siñat zoom lina'la' na prebisu	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(MA'A'A'ÑAO desdeki i båndan 2.6.0)

Todu i skins gi sanhilo' nisisåriu ha' un CSS file, lao guaha otro na skins ni' nisisåriu lokkue' un JavaScript file:

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

	Klase siha ni' Guaha
gridzySkinBlur ti machocho'gue gi IE lina'la' na prebisu	`gridzySkinBlur` `gridzySkinBlurLight`(MA'A'A'ÑAO desdeki i båndan 2.6.0)
gridzySkinCard lina'la' na prebisu	`gridzySkinCard` `gridzySkinCardLight`(MA'A'A'ÑAO desdeki i båndan 2.6.0)

Siha i Lassås

Desde i version 2.6.0 guaha Options para u makonfigura i built-in skins. Debidi u ma'ayek i kulot i sanlagu, i kulot i tinige' yan i anineng i tinige'. Debi di un usa i propiedåt CSS ni' siña un li'e' guini:

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

Atan i ma'a'ayuda na båriåbles yan i default na balotu siha para kada na lassås guini:

gridzySkinClassic

Variable	Balotu ni' ma'usa	Infotmasion
`--background`	`rgba(0, 0, 0, .7)`	ha na'i maseha hafa na balotu gi i CSS
`--color`	`rgb(255, 255, 255)`	ha na'i maseha hafa na kulot CSS
`--text-shadow`	`none`	ha na'i maseha hafa na CSS text-shadow na balotu

gridzySkinFullOverlay

Variable	Balotu ni' ma'usa	Infotmasion
`--background`	`rgba(0, 0, 0, .7)`	ha na'i maseha hafa na balotu gi i CSS
`--color`	`rgb(255, 255, 255)`	ha na'i maseha hafa na kulot CSS
`--text-shadow`	`none`	ha na'i maseha hafa na CSS text-shadow na balotu

gridzySkinLift

Variable	Balotu ni' ma'usa	Infotmasion
`--background`	`rgba(0, 0, 0, .7)`	ha na'i maseha hafa na balotu gi i CSS
`--color`	`rgb(255, 255, 255)`	ha na'i maseha hafa na kulot CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	ha na'i maseha hafa na CSS text-shadow na balotu

gridzySkinMagnifier

Variable	Balotu ni' ma'usa	Infotmasion
`--background`	`rgba(0, 0, 0, .7)`	ha na'i maseha hafa na balotu gi i CSS
`--color`	`rgb(255, 255, 255)`	ha na'i maseha hafa na kulot CSS

Este na lassås ti ha soståba i --text-shadow

gridzySkinBlur

Variable	Balotu ni' ma'usa	Infotmasion
`--background`	`rgba(0, 0, 0, .7)`	ha na'i maseha hafa na balotu gi i CSS
`--color`	`rgb(255, 255, 255)`	ha na'i maseha hafa na kulot CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	ha na'i maseha hafa na CSS text-shadow na balotu

gridzySkinCard

Variable	Balotu ni' ma'usa	Infotmasion
`--background`	`rgba(0, 0, 0, 1)`	ha na'i maseha hafa na balotu gi i CSS
`--color`	`rgb(255, 255, 255)`	ha na'i maseha hafa na kulot CSS
`--text-shadow`	`none`	ha na'i maseha hafa na CSS text-shadow na balotu

Todu i predefined skins ma supotte ha' i sempli na tinige'. Siña un fa'tinas i propiu yan mas komplikao na lassås-mu. På'go, atan i Style Gridzy .

Style Gridzy

Yanggen taya' kulot-mu ni' esta ma'ayek, siña un na'setbe i lassås-mu.

I mas fa'tinas na manera, un kopia un lassås ni' esta gaige ya un adapta gi i nisisidåt-mu. I predefined skin gridzySkinBlank siña ha na'i un maolek na fundasion yan un maolek na tinige' gi i CSS na 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;
}

Gi i CSS na file, siña un sodda' i klas siha gridzySkinBlank , gridzyImage yan gridzyCaption . Si Gridzy mismo ti ha nisisita este na klas siha. Ma'usa ha' para i estilo ya siña un na'suha pat un na'i otro na'an yanggen malago' hao.

Kontodu un sodda' i klasen CSS gridzyItem . I Gridzy ha na'setbe este na klas para todu i famagu'on i main container element. Pues, siña un usa este na klas para un estilo i kosas siha gi i ga'lårin-mu.

Hasso i Manma'å'ñao na Kosas siha

I kosas siha gi i kosas debi di u fanma'å'ñao. Konsidera na i mineggai i elementu siempre u ma'apåsi. Usa i balotu siha gi i porsiento enlugåt di i balotu siha gi i pixel. Ya atan i Gridzy na layout option autoFontSize , ni' ha daña' i font-size gi i item box size.
Kada na kosas debi di guaha maolek na aspetu-ña. I aspect ratio i kosas ti u ma'apåsi ya nisisåriu para u ma'kuentåta i grid. Pues yanggen ti ma'ayek i aspect ratio gi un kosas, na'i gui' mismo (pot hemplo, gi css).

Gi i dirånten tiempo, siña mas fa'tinas i estilon i kosas siha antes di u tutuhon i Gridzy. Na'suha i klasen gridzy pat i Gridzy javascript na file para este.

Estague'! ayu ha' i nisisåriu para un fa'tinas i lassås-mu. Meggai na predefined skins ti ma'usa mas ki este.

Lao siña guaha mas yanggen malago' hao …

Manåmko' na Kulot siha

I Gridzy ha u'usa mas na klasin CSS ki i gridzyItem ha'. Meggai giya siha u ma setbe automatiku ya siña un usa siha para i estilo lokkue'.

Klasen Kontenido Siha

Na'an i Klas	Ketsura
`gridzy` para u ma setbe gi kannai	Si Gridzy ha sodda' i elementu siha gi este na klas ya ha tutuhon siha.
`gridzyAnimated`	U ma setbe gui' mismo yanggen `true` i option `animate` . Yanggen ma setbe este na klas gi kannai, i option `animate` siempre u `true` lokkue' (fuera di yanggen ma setbe gi `false` ).

Klasen Item

Na'an i Klas	Ketsura
`gridzyItem`	Para u ma setbe yanggen i kosas ha tutuhon i prugråman inetnon. Ti u ma na'suha.
`gridzyItemInitializing`	Para u ma setbe yanggen i kosas ha tutuhon i prugråman inetnon. Para u ma na'suha ya u ma na'halom i `gridzyItemReady` yanggen ma tutuhon i kosas. Ti kumeke'ilekña na i litråtu siha esta manma'gåsi (atan `gridzyItemLoading` ), lao i kosas esta listo para u ma'atan.
`gridzyItemReady`	Para u na'suha `gridzyItemInitializing` yanggen esta ma tutuhon i kosas. Ti u ma na'suha. Ti kumeke'ilekña na i litråtu siha esta manma'gåsi (atan `gridzyItemComplete` ), lao i kosas esta listo para u ma'atan.
`gridzyItemLoading`	Para u ma setbe yanggen i kosas ha tutuhon i prugråman inetnon. Para u ma na'suha ya u ma na'halom i `gridzyItemComplete` yanggen ma na'setbe i litråtu siha (kuentos unu ha').
`gridzyItemComplete`	Para u ma'apåsi `gridzyItemLoading` yanggen i litråtu siha (kuentos unu ha') esta ma'apåsi. Ti u ma na'suha.
`gridzyItemInitialToVisible`	Para u ma setbe yanggen i kosas ha tutuhon humuyong gi i fine'nana na biåhi. Para u ma na'suha yanggen esta ma li'e' i kosas.
`gridzyItemVisible`	Para u ma setbe yanggen esta ma li'e' i kosas. Para u ma na'suha yanggen i kosas ha tutuhon malingu.
`gridzyItemVisibleToHidden`	Para u ma'ayek yanggen i kosas ha tutuhon malingu. Para u ma na'suha yanggen esta ma espiha i kosas.
`gridzyItemHidden`	Para u ma setbe yanggen ma espiha i kosas. Para u ma na'suha yanggen ha tutuhon i kosas.
`gridzyItemHiddenToVisible`	U ma setbe yanggen ha tutuhon i kosas (fuera di i fine'nina na biåhi – atan i klas `gridzyItemInitialToVisible` ). Para u ma na'suha yanggen esta ma li'e' i kosas.
`gridzyItemVisibleToVisible`	Para u ma setbe yanggen guaha ma na'lå'la' gi i grid, lao i mismo na kosas esta ma li'e'. Para u ma na'suha yanggen ma na'funhayan i animasion.

Gi i tutuhon, i prusesu na indikåtdot yan i animasion siha para i manmafa'nu'i yan manmalingu na litråtu siha manma'ayek gi i Gridzy main CSS file.

Gi este na klasen CSS ni' ma mensiona gi sanhilo', siña un estilo i propiu na indicator yan animasion siha. Na'siguru na un li'e' i Gridzy CSS file, para un tungo' hafa para un na'suha. Cha'mu ma'å'ñao, todu esta madokumenta gi ayu na lugat.

Na'maolek i Ina'ayuda

Yanggen un usa meggai na litråtu, siña maolek na ideha para un ayuda si Gridzy para u na'lå'la' i grid.

Na'fanhuyong i Imahen-ñiha

I Gridzy ha nisisita i aspect ratio gi todu i litråtu siha para u kalkula i grid. Este na asunto siha ha na'fanhuyong i elementu siha ni' manma'a'ñao yanggen guaha na litråtu siha manlisto yan guaha siha ti manlisto. Yanggen meggai na litråtu, mas na'ma'å'ñao este na inafekta.

Para un prebeniyi este na kinalamten, setbe width yan height para todu img na elementu siha. I mas impottånte na para un na'setbe i maolek na balotu siha para kada na litråtu, sa' yanggen ti un cho'gue, u fanma'a'ñao i litråtu siha. I maolek na balotu siha i orihinat na lina'la' yan i tinakhilo' i respetibo na litråtu:

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

Despues, siña ha kalkula si Gridzy i grid ensegidas sin u ma tungo' i minagahet na mineggai i litråtu siha.

Manma'å'ñao na Manma'a'ñao

Para un na'halom i litråtu siha ni' gaige gi i siña un li'e', cho'gue este siha:

Na'halom width yan height taimanu ma deskånsa gi sanhilo' (siguru na un usa i maolek na balotu siha)
Na'lå'la' todu src na attibut siha ni' data-gridzylazysrc taimanu ha' ma fa'nu'i gi papa' (yanggen guaha srcset na attribut siha lokkue', na'lå'la' siha gi 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>

Despues di este na pas, i litråtu siha u fanma'a'atan yanggen manma'a'atan pat gi halom i viewport.

Indikåtdot Prugråma

I prusesu na indikåtdot i dikike' na åmot ni' ma'a'a'ñao annai ma'a'a'ñao i litråtu. Yanggen un usa captions & skins , i prusesu na indikåtdot para u ma fa'nu'i gui' mismo. Yanggen ti taiguini, debi di un na'lå'la':

Na'i kada img na elementu gi un div na elementu
(pat gi otro na elementu – atan i HTML semantic para mas)
Adda' i klasen gridzyImage gi kada img na elementu

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

Despues di este, debi di un li'e' i prusesu na indikåtdot siha yanggen i litråtu siha ma'u'usa tiempo para u ma'a'atan.

Filtro siha

I filter siha gi Gridzy mansensimple lao manmetgot. Maseha hafa na klasin filter malago'-mu, siña ha' na siña un cho'gue. I nisisidåt-mu ha', un dididi' na CSS yan un dididi' na HTML na elemento siha …

Estague' un ehemplon funsion:

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

Ta Fa'tinas Pas Pot Pas

1. Fine'nina, debi di ta usa i kustumbren HTML na estrukturan Gridzy ya ta na'setbe i na'an klas siha para todu i gå'ga' siha ya siña ta filter siha despues

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

Gi este na ehemplo, ta usa ha' un klas para kada na elementu. Lao siña lokkue' un setbe meggai na klas siha para un elementu, yanggen siña ma sodda' ayu na elementu gi meggai na filter siha.

2. Pues ta addåpta i boton siha ni' siña ta na'lå'la' i filter siha pues

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

En lugat di i boton siha, siña lokkue' un usa otro na elementon form taiguihi i checkboxes, i radio buttons, i select fields yan otro siha.

Taimanu ha' un li'e', i balotu siha gi i boton siha, i CSS na selektor siha. Yanggen ma'pos ham, yanggen un ågang este na boton, u fanli'e' i litråtu siha ni' parehu yan i CSS selector. Gi i minagahet, ha na'setbe i option filter gi este na balotu.

Siña lokkue' un usa i mas komplikao na selektor siha. Put hemplo :not(.animals) siña ha cho'gue lokkue', yan lokkue' .animals.people yan .animals, .people .

3. Gi uttimo, in na'daña' i boton siha gi un div container ya in na'daña' siha gi i Gridzy gallery, ni' in na'setbe i filterControls na 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>

Taimanu ha' un li'e', in usa lokkue' un CSS na selektor para i filterControls na option. I div container ni' guaha id na attribute ha na'fa'maolek i boton siha para u ma selekta gi i CSS selector.

Estague'!

Yanggen malago' hao un solusion JavaScript, atan i API .

API

Achokka' guaha API-ña si Gridzy, meggai na cho'cho' siña ma cho'gue sin guiya, yanggen ma manipula i DOM. Si Gridzy ha li'e' ya ha na'lå'la' i grid. Lao guaha lokkue' un API ni' gof takhilo' …

Manma'ayek i DOM

Para todu i Document Object Model (DOM) na manipblasion, nisisåriu i container element:

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

Addåhi i litråtu siha

I mas impottånte na para un fa'tinas yan un na'bula i nuebu na child element antes di un addåpta gi i container element. Yanggen ti siña, ti siña si Gridzy ha detekta i maolek na dimension siha.

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

Na'suha i litråtu siha

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

Na'lå'la' i Option siha

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

Mas put taimanu para un na'setbe i DOM siña un sodda' gi i MDN web docs . Guaha lokkue' un Introduksion put i DOM .

API ni' gaige gi i propiedåt

Para ta usa i API, debi di ta tutuhon i Gridzy na inestånsia, ni' ma'a'atan gi i Gridzy container element:

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

Na'i Option

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

Na'i Todu i Option siha

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

Na'setbe i Opsion siha

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

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

Aplika i Filter

I ma'usa i filter ha na'setbe i option filter ni' siña ha' maseha hafa na 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'
});

Addåhi i Callback na Funsion siha

MANMA'A'A'ÑAO desdeki i båndan 2.4.0
Usa i modernu yan mas fleksible na Events enlugåt di este. Atan i sigiente na seksion para mas emfotmasion.

~~I Gridzy.js 2 ha na'guaha meggai na option para i callback na fungsion siha. Siña ma setbe ha' gi i API, lao parehu ha' yan otro na option siha:~~

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

	~~Ketsura~~
~~`onBeforeOptionsChanged`~~	~~I callback na fungsion ni' ma'agang antes di u ma'ayek i option siha.~~
~~`onOptionsChanged`~~	~~I callback na fungsion ni' ma'usa despues di ma'ayek i option siha.~~
~~`onBeforeRender`~~	~~I callback na cho'cho' ni' ma'usa antes di u ma'render.~~
~~`onRender`~~	~~I callback na cho'cho' ni' ma'usa despues di ma'render.~~

Usa i Events

desdeki i båndan 2.4.0

Siña un usa i Gridzy na ineppen-ñiha taimanu ha' i kustumbren JavaScript na ineppen-ñiha:

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

Guaha na ineppen-ñiha gi i Gridzy container element yan guaha na ineppen-ñiha gi i individuat na item elements gi halom i container element.

I asunto siha ni' ma'usa gi i Gridzy na kontenido:

	Ketsura
`gridzyBeforeInit`	Ma'utot antes di u ma'inisia i galeria.
`gridzyInit`	Ma'a'atan despues di ma'a'atan i ga'låri.
`gridzyBeforeOptionsChanged`	Ma'utot antes di u ma'ayek i option siha.
`gridzyOptionsChanged`	Ma'utot despues di ma'ayek i option siha.
`gridzyBeforeRender`	Ha na'fanhuyong antes di u ma'ayek.
`gridzyRender`	Ma'utot despues di ma'a'atan.

Yanggen ti un li'e' i hinanao guini, na'i yu' un finaisen inayuda .

event.target ha na'i i Gridzy na kontenido na elemento.
event.detail.instance ha na'i i Gridzy na instansia.

I asunto siha ni' ma'usa gi i elementu siha:

	Ketsura
`gridzyItemBeforeInit`	Ha na'fanhuyong antes di u ma tutuhon i kosas.
`gridzyItemInit`	Ha tutuhon despues di ma tutuhon i kosas.
`gridzyItemLoading`	Ma'utot yanggen i kosas ha tutuhon ma'a'atan.
`gridzyItemReady`	Ma'utot yanggen i kosas esta listo para i kalkulasion grid. Pues ma tungo' i aspect ratio, lao siña ha' i litråtu ha' ma'a'atan.
`gridzyItemComplete`	Ma'a'atan yanggen i imahen i kosas esta ma'a'atan.

Yanggen ti un li'e' i hinanao guini, na'i yu' un finaisen inayuda .

event.target ha na'i i respetibo na elementu.
event.detail.instance ha na'i i Gridzy na instansia.

API – Global

Guaha na fungsion siha ni' ti manma'a'a'ñao nu i Gridzy na inestudia siha. Pues ti nisisåriu na ta na'i un instansia antes.

Na'i i Default na Option

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

Na'i Todu i Default na Option siha

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

Na'setbe i Default na Opsion siha

Este ti ha na'setbe i option siha para todu i Gridzy na instansia siha ni' esta manma'inisia, lao ha difina i base para i nuebu na instansia siha. Lao, yanggen ma reset i option gi i esta gaige na instansia gi i balotu null , u ma usa i nuebu na balotu ni' ma default.

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

Siña un usa este para un setbe i option siha gi enteru mundo, yanggen un ågang antes di u listo i DOM. Pues ti nisisåriu na un setbe i option siha komo attributes.

Automatisms

Yanggen todu i automatisms gi Gridzy.js 2 manma'a'ñao, ti nisisåriu i sigiente na manera siha. Lao siña ma na'suha i automatism siha para u ma usa i Gridzy gi un manera ni' mas tradisiunåt:

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

Guaha na option siha ti siña ma setbe gi data-gridzy- na attibut siha pat gi i setOptions() , sa' put i rason siha:

	Balotu ni' ma'usa	Ketsura
`autoInitOnDomReady`	`true`	Ha li'e' i elementu siha ni' guaha klasen `gridzy` gi i ma'pos na pahina ya ha tutuhon siha. Siña ma'ayek gi `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	Ha sodda' i nuebu na elementu siha ni' klas `gridzy` yanggen manmafa'nu'i gi i DOM ya ha tutuhon siha. (pot hemplo, put i uson i transision i pahina) Siña ma'ayek gi `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Ha li'e' kao ma addåpta pat ma na'suha i child elements (images), ya ha na'lå'la' i grid. Siña ma setbe gi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Ha difina kao i `data-gridzy-` na attibut siha ma'usa pat ti ma'usa. Yanggen `false` este, siña ma setbe i option siha gi i API ni' gaige ha'. Siña ma'ayek gi `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	Ha li'e' i inafekta nu `data-gridzy-` na attibut siha, ya ha na'lå'la' i grid. Ha detekta lokkue' kao ma addåpta pat ma na'suha i klasen `gridzyAnimated` yan kao guaha na'ma'å'ñao `style` . Yanggen ti `false` `useOptionAttributes` , ha detekta ha' i siña maayek `style` . Siña ma setbe gi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Ha li'e' i inafekta nu i `class` attibut siha gi todu i famagu'on na elementu siha (images). Relevante put i filter siha. Siña ma setbe gi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver desdeki i båndan 2.5.0	`true`	Ha li'e' i inafekta nu i `src` na attibut siha gi todu i litråtu siha. Relevante yanggen ma'usa yan React pat parehu na libråriu siha. Siña ma setbe gi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Na'lå'la' i Observer desdeki i båndan 2.6.0	`true`	Ha detekta i inafekta nu i lina'la' i elementu. Relevante put i disision ni' siña ma'ayek. (Antes di i båndan 2.6.0, ma'usa i window resize event listener) Siña ma setbe gi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Na'i inisialisa gi i kannai-mu

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

Na'suha i Instansia

Gi i mas takhilo' na manera, i oppan na inayek Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Na'sinkronisa i Lista ni' Manhoben

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

Na'sinkronisa un unu na patgon na elementu gi i kannai-mu

Ti nisisåriu, fuera di gi ti meggai na biåhi.

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

Na'sinkronisa i Atributo siha gi Kannai

Na'tungo' na i useOptionAttributes na option debi di u true para este.

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

Fuetsao na Ma'a'atan

Ti nisisåriu, achokka' ma na'suha todu i automatism siha

gridzyInstance.render();

Plugin WordPress

JavaScript Library

Setbisiu