Versaun 2.x – Gridzy.Gallery

Website ne'e tradús ona automatikamente. Se buat ruma la klaru, favór ida haree ba dokumentasaun Inglés.

Uzu Báziku

Upload arkivu Gridzy sira ba ita-boot nia servidór no aumenta sira ba ita-boot nia website (normalmente iha seksaun ulun nian):

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

Hatama kódigu HTML (iha ne'ebé de'it iha seksaun isin nian):

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

Ne'e de'it! Ne'e ezemplu ida ne'ebé funsionál tomak. La presiza inisializasaun adisionál.

Konfigurasaun

Maneira ne'ebé fasil liu atu konfigura Gridzy maka, uza de'it atributu HTML sira. Ita-boot presiza de'it tau prefiksu ba naran opsaun sira ho data-gridzy- . Entaun, atu tau opsaun spaceBetween , aumenta de'it atributu 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>

Opsaun Prinsipál sira

	Valór Padraun	Deskrisaun
`animate`	`true`	Determina se animasaun sira tenke uza bainhira grid muda (ezemplu, bainhira muda medida janela browser nian ka bainhira konfigura filtru ida).
`layout`	`justified`	Define dezeñu ne'ebé uza. Gridzy.js 2 suporta layout rua ne'ebé diferente `justified` no `waterfall` . Ida-idak husi sira iha nia parametru opsaun adisionál rasik, ne'ebé ita-boot bele hetan iha tabela ida-ne'e nia okos.
`filter`	`*`	Determina imajen sira ne'ebé maka tenke hatudu. CSS-seletor ruma bele uza hanesan valór iha ne'e. Normalmente konfigura automatikamente liuhosi `filterControls` (haree opsaun tuirmai). Haree Filtru sira
`filterControls`		Determina elementu forma ne'ebé maka bele uza hodi filtra imajen sira. Seletor CSS ruma, ne'ebé hili elementu formuláriu HTML, bele uza hanesan valór iha ne'e. Haree Filtru sira
`autoConsiderScrollBars`	`true`	Atu halo predisaun ba luan ne'ebé disponivel se barra sira mosu ka lakon. Sempre rekomenda atu husik ida-ne'e iha `true` exetu bainhira automatizmu ida-ne'e hamosu problema.

Justified Opsaun sira Layout nian

	Valór Padraun	Deskrisaun
`autoFontSize`	`false`	Automatikamente atualiza propriedade medida fonte nian husi kaixa ida-idak bazeia ba medida kaixa orijinál. Tuir padraun, propriedade tamañu fonte nian la estabelese ho esplísitu.
`desiredHeight`	`190`	Define aas ne'ebé hakarak hosi liña elementu sira. Altura loloos sei kalkula depende ba luan ne'ebé disponivel no elementu sira iha liña.
`hideOnMissingImage`	`true`	Subar kaixa sira ne'ebé iha imajen sira ne'ebé labele karrega.
`spaceBetween`	`4`	Define distánsia entre elementu sira iha pixel sira.
`lastRowAlign` desde versaun 2.3.0	`justified`	Define hahalok husi liña ikus. Valór sira ne'ebé permitidu maka `left` , `center` , `right` no `justified` .
`singleRowAlign` desde versaun 2.3.0	`justified`	Define hahalok se iha de'it liña ida de'it. Valór sira ne'ebé permitidu maka `left` , `center` , `right` no `justified` .
~~`fillLastRow`~~ ~~desde versaun 2.1.0~~	~~`true`~~	HAMOSU ona dezde versaun 2.4.0 (DEPRECATED desde versaun 2.3.0 ) Aranja imajen sira atu nune'e liña ikus sempre nakonu kompletamente. Se ita-boot planu atu aumenta imajen sira ho dinámiku, bele sai ideia di'ak ida atu dezativa ida-ne'e. La iha efeitu ba liña mesak sira (haree `fillSingleRow` ).
`fillSingleRow` desde versaun 2.1.0	~~`true`~~	HAMOSU ona dezde versaun 2.4.0 (DEPRECATED desde versaun 2.3.0 ) Se iha de'it liña ida, ida-ne'e arranja imajen sira atu nune'e liña ne'e sempre nakonu. Se bele akontese katak ita-boot iha de'it imajen ida ka rua iha galeria, bele sai ideia di'ak ida atu dezativa ida-ne'e.

Waterfall Opsaun sira Layout nian

	Valór Padraun	Deskrisaun
`autoFontSize`	`false`	Automatikamente atualiza propriedade medida fonte nian husi kaixa ida-idak bazeia ba medida kaixa orijinál. Tuir padraun, propriedade tamañu fonte nian la estabelese ho esplísitu.
`desiredWidth`	`250`	Define luan ne'ebé hakarak ba koluna sira. Luan loloos sei komputa depende ba luan ne'ebé disponivel no númeru koluna sira-nian.
`hideOnMissingImage`	`true`	Subar kaixa sira ne'ebé iha imajen sira ne'ebé labele karrega.
`horizontalOrder`	`false`	Define katak elementu sira tau ho rigorozu elementu ida iha koluna ida-idak hosi karuk ba loos, hafoin hahú fali iha koluna karuk liu independente iha koluna ne'ebé maka iha fatin barak liu. Tuir padraun, elementu sira sei sempre tau iha koluna ho aas ki'ik liu.
`spaceBetween`	`4`	Define distánsia entre elementu sira iha pixel sira.
`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`.

Opsaun sira ne'ebé avansadu liu

Ba opsaun avansadu liu, haree API .

HTML Semántiku

Estrutura HTML simples liu husi Gridzy maka ida-ne'e:

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

Maibé, Gridzy fleksivel tebes no ita-boot bele uza kuaze estrutura HTML seluk hotu. Iha de'it pontu balun atu konsidera:

Oan ida-idak hosi elementu kontentór reprezenta sasán ida iha grella.
Tantu elementu kontentór no nia oan sira bele sai tipu tag ruma, hanesan ul no li (konsidera de'it atu reset padraun sira browser nian).
Se elementu img ida la'ós oan diretu rasik, nia presiza klase gridzyImage .

Entaun ida-ne'e mós estrutura HTML ne'ebé funsiona:

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

Liuliu se ita-boot hakarak aumenta legenda sira, ita-boot presiza estrutura HTML ne'ebé avansadu. Atu hatene liután kona-ba ida-ne'e, haree iha Captions & Skins .

Lejenda & Kulit sira

Se ita-boot hakarak aumenta legenda sira ba ita-boot nia galeria, ita-boot presiza define aparénsia. Tanba ne'e, iha kulit balun ne'ebé maka define ona. Skin ida-idak kompostu husi arkivu CSS ida. Ita-boot presiza aumenta arkivu ida-ne'e iha adisaun ba arkivu Gridzy prinsipál sira (normalmente iha seksaun ulun nian):

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

Aleinde ne'e ita-boot presiza estrutura HTML avansadu:

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

Se ita-boot husu hela kona-ba estrutura HTML, haree ba HTML Semántiku .

Ba legenda ita-boot bele uza tipu tag ruma, asegura de'it katak ida-ne'e iha klase gridzyCaption . Elementu img presiza klase gridzyImage .

Ezemplu iha leten hatudu ba ita-boot kulit gridzySkinClassic . Atu uza ida ne'ebé diferente, troka de'it naran kulit nian ho ida husi sira-ne'e:

Kulit sira ne'ebé inklui

	Klase sira ne'ebé disponivel
gridzySkinBlank pontu partida di'ak ida atu kria kulit rasik previzaun diretu	`gridzySkinBlank`
gridzySkinClassic previzaun diretu	`gridzySkinClassic` `gridzySkinClassicLight`(DEPRECATED desde versaun 2.6.0)
gridzySkinFullOverlay previzaun diretu	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(DEPRECATED desde versaun 2.6.0)
gridzySkinLift previzaun diretu	`gridzySkinLift` `gridzySkinLiftLight`(DEPRECATED desde versaun 2.6.0)
gridzySkinMagnifier funsionalidade zoom la inklui previzaun diretu	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(DEPRECATED desde versaun 2.6.0)

Skin sira hotu iha leten presiza de'it arkivu CSS, maibé iha skin adisionál sira ne'ebé mós presiza arkivu JavaScript:

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

	Klase sira ne'ebé disponivel
gridzySkinBlur la funsiona iha IE previzaun diretu	`gridzySkinBlur` `gridzySkinBlurLight`(DEPRECATED desde versaun 2.6.0)
gridzySkinCard previzaun diretu	`gridzySkinCard` `gridzySkinCardLight`(DEPRECATED desde versaun 2.6.0)

Opsaun ba kulit

Desde versaun 2.6.0 iha Opsaun sira atu konfigura kulit sira ne'ebé maka harii ona. Depende ba kulit espesífiku ita-boot bele tau kór background, kór testu no sombra testu. Ita-boot tenke uza de'it propriedade personalizadu CSS nian hanesan ita-boot bele haree iha ne'e:

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

Haree variável sira ne'ebé suporta no valór padraun sira ba skin ida-idak iha ne'e:

gridzySkinClassic

Variavel	Valór Padraun	Informasaun
`--background`	`rgba(0, 0, 0, .7)`	permite kualkér valór background CSS nian
`--color`	`rgb(255, 255, 255)`	permite kualkér valór kór CSS nian
`--text-shadow`	`none`	permite kualkér valór testu-sombra CSS nian

gridzySkinFullOverlay

Variavel	Valór Padraun	Informasaun
`--background`	`rgba(0, 0, 0, .7)`	permite kualkér valór background CSS nian
`--color`	`rgb(255, 255, 255)`	permite kualkér valór kór CSS nian
`--text-shadow`	`none`	permite kualkér valór testu-sombra CSS nian

gridzySkinLift

Variavel	Valór Padraun	Informasaun
`--background`	`rgba(0, 0, 0, .7)`	permite kualkér valór background CSS nian
`--color`	`rgb(255, 255, 255)`	permite kualkér valór kór CSS nian
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	permite kualkér valór testu-sombra CSS nian

gridzySkinMagnifier

Variavel	Valór Padraun	Informasaun
`--background`	`rgba(0, 0, 0, .7)`	permite kualkér valór background CSS nian
`--color`	`rgb(255, 255, 255)`	permite kualkér valór kór CSS nian

Skin ida-ne'e la suporta --text-shadow

gridzySkinBlur

Variavel	Valór Padraun	Informasaun
`--background`	`rgba(0, 0, 0, .7)`	permite kualkér valór background CSS nian
`--color`	`rgb(255, 255, 255)`	permite kualkér valór kór CSS nian
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	permite kualkér valór testu-sombra CSS nian

gridzySkinCard

Variavel	Valór Padraun	Informasaun
`--background`	`rgba(0, 0, 0, 1)`	permite kualkér valór background CSS nian
`--color`	`rgb(255, 255, 255)`	permite kualkér valór kór CSS nian
`--text-shadow`	`none`	permite kualkér valór testu-sombra CSS nian

Skin hotu-hotu ne'ebé maka define ona suporta de'it legenda testu simples sira. Ita-boot bele kria ita-boot nia kulit rasik no kompleksu liu. Favor haree ba Style Gridzy .

Estilu Gridzy

Se laiha kulit ne'ebé maka define ona ne'ebé maka tuir ita-boot nia nesesidade, ita-boot bele halo ita-boot nia kulit rasik.

Maneira ne'ebé fasil liu maka atu kopia uluk kulit ne'ebé iha ona no adapta ba ita-boot nia nesesidade rasik. gridzySkinBlank kulit ne'ebé maka define ona normalmente sei fornese fundasaun di'ak ida no mós dokumentasaun di'ak ida iha arkivu 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;
}

Iha arkivu CSS ita sei hetan klase sira gridzySkinBlank , gridzyImage no gridzyCaption . Gridzy rasik la presiza klase sira-ne'e. Sira uza de'it ba estilu no nune'e ita-boot bele hasai ka muda naran ba sira se ita-boot hakarak.

Adisionalmente ita-boot sei hetan klase CSS gridzyItem . Gridzy tau klase ida-ne'e automatikamente ba oan diretu hotu-hotu hosi elementu kontentór prinsipál. Entaun, ita-boot bele uza klase ida-ne'e atu halo estilu ba sasán sira iha ita-boot nia galeria.

Hanoin buat sira ne'ebé importante

Konteúdu sasán nian tenke responde tomak. Konsidera katak elementu nia medida sei muda duni. Uza valór persentajen sira envezde valór pixel sira. No haree ba opsaun dezeñu Gridzy nian autoFontSize , ne'ebé liga medida fonte nian ba medida kaixa sasán nian.
Item ida-idak tenke iha proporsaun aspetu ne'ebé define ho di'ak. Sasan nia proporsaun aspetu sei nunka muda no presiza atu kalkula grella. Entaun se sasán ida la iha automatikamente proporsaun aspetu ne'ebé define ho di'ak, define uluk manualmente (ezemplu liuhosi css).

Iha kazu balu, bele sai fásil liu atu halo estilu ba konteúdu sasán sira nian molok Gridzy inisializa. Hasai de'it klase gridzy ka arkivu javascript Gridzy nian temporariamente ba ida-ne'e.

Ne'e de'it! Ne'e de'it maka ita-boot presiza atu harii ita-boot nia kulit rasik. Maioria husi kulit sira ne'ebé maka define ona la uza liu ida-ne'e.

Maibé bele iha tan se ita-boot gosta ...

Kulit Avansadu sira

Gridzy uza klase CSS barak liu duké gridzyItem de'it. Maioria husi sira sei konfigura automatikamente no ita-boot bele uza sira ba estilu mós.

Klase Kontentór Prinsipál sira

Naran Klase	Deskrisaun
`gridzy` atu tau manualmente	Gridzy automatikamente hetan elementu sira ho klase ida-ne'e no inisializa sira.
`gridzyAnimated`	Sei konfigura automatikamente se opsaun `animate` `true` . Se klase ida-ne'e konfigura manualmente, opsaun `animate` sei sai automatikamente `true` mós (ezeptu se ida-ne'e konfigura ho esplísitu ba `false` ).

Klase Item sira

Naran Klase	Deskrisaun
`gridzyItem`	Sei konfigura bainhira de'it sasán hahú prosesu inisializasaun. Sei nunka hasai.
`gridzyItemInitializing`	Sei konfigura bainhira de'it sasán hahú prosesu inisializasaun. Sei troka ho `gridzyItemReady` bainhira de'it sasán ne'e inisializa kompletamente. La signifika katak imajen sira karrega hotu ona (haree `gridzyItemLoading` ), maibé sasán prontu atu sai vizivel.
`gridzyItemReady`	Sei troka `gridzyItemInitializing` bainhira item ne'e inisializadu kompletamente. Sei nunka hasai. Signifika la'ós katak imajen sira karrega hotu ona (haree `gridzyItemComplete` ), maibé sasán prontu atu sai vizivel.
`gridzyItemLoading`	Sei konfigura bainhira de'it sasán hahú prosesu inisializasaun. Sei troka ho `gridzyItemComplete` bainhira imajen sira ne'ebé iha (normalmente ida de'it) karrega hotu ona.
`gridzyItemComplete`	Sei troka `gridzyItemLoading` bainhira imajen sira ne'ebé iha (normalmente ida de'it) karrega hotu ona. Sei nunka hasai.
`gridzyItemInitialToVisible`	Sei konfigura bainhira de'it sasán ne'e hahú mosu ba dala uluk. Sei hasai kedas bainhira sasán ne'e kompletamente vizivel.
`gridzyItemVisible`	Sei tau bainhira de'it sasán ne'e vizivel hotu. Sei hasai kedas bainhira sasán ne'e hahú lakon.
`gridzyItemVisibleToHidden`	Sei tau bainhira de'it sasán ne'e hahú lakon. Sei hasai kedas bainhira sasán ne'e subar kompletamente.
`gridzyItemHidden`	Sei konfigura bainhira sasán ne'e subar kompletamente. Sei hasai kedas bainhira sasán ne'e hahú mosu.
`gridzyItemHiddenToVisible`	Sei konfigura bainhira de'it sasán hahú mosu (exetu mosu ba dala uluk – haree klase `gridzyItemInitialToVisible` ). Sei hasai kedas bainhira sasán ne'e kompletamente vizivel.
`gridzyItemVisibleToVisible`	Sei konfigura bainhira buat ruma iha grella muda, maibé sasán ne'e rasik maka no sei vizivel nafatin. Sei hasai kedas bainhira animasaun mudansa nian remata.

Tuir padraun, indikadór prosesu no animasaun sira ba imajen sira ne'ebé mosu no lakon maka define ona hosi arkivu CSS prinsipál Gridzy nian.

Ho klase CSS sira ne'ebé temi ona iha leten ita-boot bele halo estilu ba ita-boot nia indikadór prosesu no animasaun sira. Brani atu haree ba arkivu CSS prinsipál Gridzy nian, atu komprende saida maka ita-boot tenke troka. La tauk, buat hotu dokumenta ona iha ne'ebá.

Optimiza Karregamentu

Se ita-boot uza imajen barak, bele sai ideia di'ak ida atu ajuda Gridzy harii grid lalais liu.

Prevene Imajen sira ne'ebé Salta

Gridzy presiza duni proporsaun aspetu husi imajen hotu-hotu atu kalkula grid. Faktu sira-ne'e rezulta iha elementu sira ne'ebé maka'as se imajen balu prontu no sira seluk seidauk. Kuandu iha imajen barak liu, efeitu ida-ne'e bele sai irritante liu.

Atu prevene hahalok ida-ne'e, tau de'it atributu width no height ba elementu img hotu-hotu. Importante atu tau valór sira ne'ebé loos ba imajen ida-idak, se lae imajen sira sei hetan distorsaun. Valór sira ne'ebé loos maka luan no aas orijinál hosi imajen ida-idak:

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

Hafoin ne'e Gridzy bele kalkula kedas grid lahó presiza hatene imajen sira nia medida loloos.

Karregamentu lais

Atu karrega de'it imajen sira ne'ebé iha viewport vizivel, tuir de'it etapa sira-ne'e:

Hatama atributu width no height hanesan deskreve iha leten (asegura atu uza valór sira ne'ebé loos)
Troka atributu src hotu-hotu ho data-gridzylazysrc hanesan hatudu iha kraik (se ita-boot iha atributu srcset mós, troka sira ho 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>

Hafoin etapa sira-ne'e imajen sira sei karrega bainhira sira besik ka iha viewport nia laran.

Indikadór Prosesu

Indikadór prosesu maka íkonu animadu ki'ik ne'ebé mosu bainhira imajen ne'e karrega hela. Se ita-boot uza legenda & kulit sira , indikadór prosesu nian sei hatudu automatikamente. Se lae ita-boot presiza ajustamentu balu:

Tau elementu img ida-idak iha elementu div ida
(ka ba elementu seluk ruma – haree HTML semántiku ba liután)
Hatama klase gridzyImage ba elementu img ida-idak

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

Depois ida-ne'e ita-boot tenke haree indikadór prosesu nian sira se imajen sira lori tempu atu karrega.

Filtru sira

Filtru sira iha Gridzy simples tebes maibé maka'as. La importa tipu filtru saida maka ita-boot presiza, iha posibilidade boot katak ida-ne'e bele realiza. Buat hotu ne'ebé ita-boot presiza maka, CSS uitoan no elementu formuláriu HTML balun ...

Iha ne'e ezemplu funsionál ida:

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

Mai ita harii ida-ne'e etapa ba etapa

1. Primeiru ita presiza estrutura HTML baibain husi Gridzy no tau naran klase sira ba item galeria hotu-hotu atu nune'e ita bele filtra sira depois

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

Iha ezemplu ida-ne'e ita uza de'it klase ida ba elementu ida-idak. Maibé ita-boot mós bele tau klase oioin ba elementu ida de'it, se elementu ne'e bele hetan liuhosi filtru oioin.

2. Depois ita aumenta butaun balu liuhosi ne'ebé ita bele muda filtru sira depois

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

Envezde botaun sira, ita-boot mós bele uza elementu formuláriu sira seluk hanesan kaixa sira, botaun rádiu sira, kampu sira ne'ebé hili no seluk tan.

Hanesan ita-boot bele haree, valór sira husi botaun sira maka seletór CSS baibain. Bainhira ita remata, klik ida iha butaun hanesan ne'e sei hatudu imajen sira ne'ebé maka koresponde ho seletór CSS ne'ebá. Téknikamente ida-ne'e simplesmente tau opsaun filter ba valór ida-ne'e.

Ita-boot mós bele uza seletór sira ne'ebé kompleksu liu. Porezemplu :not(.animals) sei funsiona mós, no mós .animals.people no .animals, .people .

3. Ikus liu, ita enkapsula botaun sira iha kontentór div no liga sira ba galeria Gridzy, hodi konfigura opsaun 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>

Hanesan ita-boot bele haree, ami mós uza seletór CSS ba opsaun filterControls . Kontentór div ho atributu id serve de'it atu halo botaun sira sai fásil liu atu hili liuhosi seletór CSS ne'ebá.

Ne'e de'it!

Se ita-boot prefere solusaun JavaScript, haree API .

API

Maske Gridzy iha nia API rasik, buat barak liu bele halo lahó ida-ne'e, simplesmente hodi manipula DOM. Gridzy sei nota ida-ne'e no ajusta grid. Maibé iha mós API ida ne'ebé maka'as tebes ...

Manipula DOM

Ba manipulasaun hotu-hotu Document Object Model (DOM) ita presiza uluk elementu kontentór:

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

Hatama Imajen sira

Importante atu harii no prenxe kompletamente elementu oan foun molok ita-boot aumenta ba elementu kontentór. Se lae Gridzy labele detekta dimensaun sira ne'ebé loos.

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

Hasai imajen sira

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

Muda Opsaun sira

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

Liután kona-ba manipulasaun DOM nian ita-boot bele hetan iha MDN web docs . Iha mós Introdusaun ba DOM ne'ebé disponivel.

API Proprietáriu

Atu uza API, uluknanai ita presiza instánsia Gridzy, ne'ebé maka liga ba elementu kontentór Gridzy:

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

Hetan Opsaun

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

Hetan Opsaun Hotu-hotu

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

Konfigura Opsaun sira

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

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

Aplika Filtru

Aplika filtru ida maka konfigura de'it filter opsaun nian ne'ebé bele sai seletór CSS válidu ruma:

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

Hatama Funsaun sira Callback nian

DEPRECATED ona dezde versaun 2.4.0
Uza Eventu sira ne'ebé modernu no fleksivel liu. Haree seksaun tuirmai ba detalle sira.

~~Gridzy.js 2 suporta opsaun balu ba funsaun sira callback nian. Sira bele konfigura de'it liuhosi API proprietáriu, maibé hanesan opsaun sira seluk:~~

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

	~~Deskrisaun~~
~~`onBeforeOptionsChanged`~~	~~Funsaun callback ne'ebé maka invoka diretamente antes atu konfigura opsaun sira.~~
~~`onOptionsChanged`~~	~~Funsaun callback ne'ebé maka invoka diretamente hafoin konfigura opsaun sira.~~
~~`onBeforeRender`~~	~~Funsaun callback ne'ebé maka invoka diretamente antes halo renderizasaun.~~
~~`onRender`~~	~~Funsaun callback ne'ebé maka invoka diretamente hafoin renderizasaun.~~

Uza Eventu sira

desde versaun 2.4.0

Ita-boot bele uza eventu Gridzy hanesan eventu JavaScript baibain:

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

Eventu balu maka lansa iha elementu kontentór Gridzy no eventu sira seluk lansa iha elementu item individuál sira iha elementu kontentór nia laran.

Eventu sira ne'ebé maka hala'o iha elementu kontentór Gridzy:

	Deskrisaun
`gridzyBeforeInit`	Ahi-han antes inisializasaun galeria nian.
`gridzyInit`	Lakan hafoin inisializasaun galeria nian.
`gridzyBeforeOptionsChanged`	Lakan antes atu konfigura opsaun sira.
`gridzyOptionsChanged`	Lakan hafoin konfigura opsaun sira.
`gridzyBeforeRender`	Ahi antes halo renderizasaun.
`gridzyRender`	Lakan hafoin halo renderizasaun.

Se ita-boot lakon eventu ruma iha ne'e, favór ida haruka pedidu apoiu ida.

event.target fornese elementu kontentór Gridzy.
event.detail.instance fornese instánsia Gridzy.

Eventu sira ne'ebé maka hala'o iha elementu item sira:

	Deskrisaun
`gridzyItemBeforeInit`	Lakan antes inisializasaun sasán nian.
`gridzyItemInit`	Lakan hafoin inisializasaun sasán nian.
`gridzyItemLoading`	Lakan bainhira sasán hahú karrega.
`gridzyItemReady`	Lakan bainhira sasán prontu ona ba kálkulu grid nian. Entaun proporsaun aspetu nian hatene ona, maibé imajen bele sei karrega hela.
`gridzyItemComplete`	Lakan bainhira imajen sasán nian karrega hotu ona.

Se ita-boot lakon eventu ruma iha ne'e, favór ida haruka pedidu apoiu ida.

event.target fornese elementu item ida-idak.
event.detail.instance fornese instánsia Gridzy.

API – Globál

Iha funsaun balu ne'ebé maka independente hosi instánsia Gridzy nian. Entaun ita la presiza hetan instánsia ida antes.

Hetan Opsaun Padraun

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

Hetan Opsaun Padraun Hotu-hotu

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

Konfigura Opsaun Padraun sira

Ida-ne'e la estabelese opsaun sira husi instánsia Gridzy hotu-hotu ne'ebé inisializa ona, maibé define baze ba instánsia foun sira. Maibé, se opsaun ida hosi instánsia ezistente ida sei reset liuhosi valór null , ida-ne'e sei uza valór padraun foun.

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

Ita-boot bele uza ida-ne'e atu tau opsaun sira globalmente, se ita-boot bolu ida-ne'e antes DOM prontu. Entaun ita-boot la presiza atu tau opsaun sira hanesan atributu sira tan.

Automatizmu sira

Enkuantu automatizmu hotu-hotu husi Gridzy.js 2 ativu, la presiza métodu sira tuirmai. Maibé automatizmu sira bele desliga hodi uza Gridzy iha maneira tradisionál liu:

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

Opsaun sira-ne'e balun labele konfigura liuhosi atributu data-gridzy- ka liuhosi setOptions() , tanba razaun lójiku sira:

	Valór Padraun	Deskrisaun
`autoInitOnDomReady`	`true`	Detekta elementu sira ho klase `gridzy` iha karregamentu pájina no inisializa sira. Bele konfigura liuhosi `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	Detekta elementu foun sira ho klase `gridzy` bainhira sira mosu iha DOM no inisializa sira. (ezemplu kona-ba uza tranzisaun pájina nian) Bele konfigura liuhosi `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Detekta se elementu labarik sira (imajen sira) aumenta ka hasai, no atualiza grid automatikamente. Bele konfigura liuhosi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Define se atributu `data-gridzy-` jeralmente uza ka lae. Se ida-ne'e `false` opsaun sira bele konfigura de'it liuhosi API proprietáriu. Bele konfigura liuhosi `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	Detekta mudansa sira hosi atributu `data-gridzy-` , no atualiza grid automatikamente. Detekta mós se klase `gridzyAnimated` aumenta ka hasai no se mudansa atributu `style` akontese. Se `useOptionAttributes` maka `false` , ida-ne'e detekta de'it mudansa sira iha atributu `style` . Bele konfigura liuhosi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Detekta mudansa sira hosi atributu `class` hosi elementu labarik hotu-hotu (imajen sira). Relevante kona-ba filtru sira. Bele konfigura liuhosi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver desde versaun 2.5.0	`true`	Detekta mudansa sira hosi atributu `src` hosi imajen hotu-hotu. Relevante bainhira uza ho React ka biblioteka sira ne'ebé hanesan. Bele konfigura liuhosi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver desde versaun 2.6.0	`true`	Detekta mudansa sira iha elementu nia luan. Relevante kona-ba dezeñu responsivu. (Molok versaun 2.6.0 uza ona rona-na'in ba eventu resize janela nian) Bele konfigura liuhosi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Inisializa Manualmente

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

Halakon Instánsia

Hateten maizumenus, kontráriu hosi inisializa Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sinkroniza Lista Labarik Manualmente

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

Sinkroniza Elementu Labarik Ida Manualmente

Normalmente la presiza, exetu iha kazu sira ne'ebé raru tebes.

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

Sinkroniza Atributu sira Manualmente

Nota katak opsaun useOptionAttributes tenke true ba ida-ne'e.

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

Forsa Rendementu

Normalmente la presiza, maski automatizmu hotu-hotu mate

gridzyInstance.render();

Plugin WordPress

Biblioteka JavaScript

Servisu