Version 2.x – Gridzy.Gallery

Lo sit web es estat automaticament revirat. Se quicòm es pas clar, mercés de balhar un agach sus la documentacion en anglés.

Utilizacion de basa

Enviatz los fichièrs Gridzy sus vòstre servidor e apondètz-los a vòstre site web (en general dins la seccion cap) :

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

Apondre lo còde HTML (ont que siá dins la seccion del còrs) :

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

Es aquò! Aquò's un exemple completament foncional. Cap d'inicializacion suplementària es pas necessària.

Configuracion

Lo biais mai aisit de configurar Gridzy es, d'utilizar sonque d'atributs HTML. Vos cal pas que prefixar los noms d'opcions amb data-gridzy- . Alara, per definir l'opcion spaceBetween , apondretz pas que l'atribut data-gridzy-spaceBetween .

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

Opcions principalas

	Valor per defaut	Descripcion
`animate`	`true`	Determina se las animacions devon èsser utilizadas quand la grasilha càmbia (per exemple, al moment de redimensionar la fenèstra del navigador o al moment de definir un filtre).
`layout`	`justified`	Definís la disposicion utilizada. Gridzy.js 2 pren en carga las doas disposicions diferentas `justified` e `waterfall` . Cadun d'eles a sos pròpris paramètres d'opcion suplementaris, que podètz trobar çai-jos aqueste tablèu.
`filter`	`*`	Determina quinas imatges devon èsser afichadas. Tot selector CSS pòt èsser utilizat coma valor aicí. Normalament definit automaticament via `filterControls` (veire l'opcion seguenta). Consultatz los Filtres
`filterControls`		Determina quines elements de formulari pòdon èsser utilizats per filtrar los imatges. Tot selector CSS, que selecciona d'elements de formulari HTML, pòt èsser utilizat coma valor aicí. Consultatz los Filtres
`autoConsiderScrollBars`	`true`	Per preveire la largor disponibla se las barras de desfilament apareisson o desapareisson. Es totjorn recomandat de lo daissar sus `true` levat se aqueste automatisme causa de problèmas.

Justified Opcions de presentacion

	Valor per defaut	Descripcion
`autoFontSize`	`false`	Met a jorn automaticament la proprietat de talha de poliça de cada bóstia en foncion de la talha de la bóstia originala. Per defaut la proprietat font-size es pas definida explicitament.
`desiredHeight`	`190`	Definís la nautor desirada de las linhas d'element. La nautor reala serà calculada segon la largor disponibla e los elements de la linha.
`hideOnMissingImage`	`true`	Amaga las bóstias que contenon d'imatges qu'an pas pogut èsser cargats.
`spaceBetween`	`4`	Definís la distància entre los elements en pixèls.
`lastRowAlign` dempuèi la version 2.3.0	`justified`	Definís lo comportament de la darrièra linha. Las valors autorizadas son `left` , `center` , `right` e `justified` .
`singleRowAlign` dempuèi la version 2.3.0	`justified`	Definís lo comportament se i a pas qu'una sola linha. Las valors autorizadas son `left` , `center` , `right` e `justified` .
~~`fillLastRow`~~ ~~dempuèi la version 2.1.0~~	~~`true`~~	SUPRIMIT dempuèi la version 2.4.0 (DEPRECAT dempuèi la version 2.3.0 ) Dispausa los imatges de manièra que la darrièra linha siá totjorn completament emplenada. Se pensatz apondre d'imatges de manièra dinamica, poiriá èsser una bona idèa de lo desactivar. A pas cap d'efièch sus de linhas solas (veire `fillSingleRow` ).
`fillSingleRow` dempuèi la version 2.1.0	~~`true`~~	SUPRIMIT dempuèi la version 2.4.0 (DEPRECAT dempuèi la version 2.3.0 ) S'i a pas qu'una linha, dispausa los imatges de manièra que la linha siá totjorn completament emplenada. Se pòt arribar qu'ajatz pas qu'un o dos imatges dins la galariá, poiriá èsser una bona idèa de lo desactivar.

Waterfall Opcions de presentacion

	Valor per defaut	Descripcion
`autoFontSize`	`false`	Met a jorn automaticament la proprietat de talha de poliça de cada bóstia en foncion de la talha de la bóstia originala. Per defaut la proprietat font-size es pas definida explicitament.
`desiredWidth`	`250`	Definís la largor desirada de las colomnas. La largor reala serà calculada segon la largor disponibla e lo nombre de colomnas.
`hideOnMissingImage`	`true`	Amaga las bóstias que contenon d'imatges qu'an pas pogut èsser cargats.
`horizontalOrder`	`false`	Definís que los elements son plaçats estrictament un element dins cada colomna d'esquèrra a drecha, puèi comença de nòu dins la colomna mai esquèrra independentament dins quina colomna es mai de plaça. Per defaut los elements seràn totjorn plaçats dins la colomna amb la nautor mai pichona.
`spaceBetween`	`4`	Definís la distància entre los elements en pixèls.
`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`.

Opcions mai avançadas

Per d'opcions mai avançadas, consultatz l' API .

HTML semantic

L'estructura HTML mai simpla de Gridzy es aquesta:

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

Pasmens, Gridzy es fòrça sople e podètz utilizar gaireben tota autra estructura HTML. I a pas que qualques punts a considerar:

Cada enfant de l'element de contenedor representa un element dins la grasilha.
Tant l'element de contenedor coma sos enfants pòdon èsser quin tipe d'etiqueta que siá, coma ul e li (pensatz pas que a reïnicializar las valors per defaut del navigador).
Se un element img es pas un enfant dirècte el meteis, a besonh de la classa gridzyImage .

Aquò's doncas tanben una estructura HTML foncionanta :

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

Subretot se volètz apondre de legendas, avètz besonh d'una estructura HTML avançada. Per ne saber mai, agachatz Legendas & Pèls .

Legendas e pèls

Se volètz apondre de legendas a vòstra galariá, vos cal definir l'aparéncia. Doncas, qualques pèls predefinidas son disponiblas. Cada skin compausada d'un fichièr CSS. Vos cal apondre aqueste fichièr en mai dels fichièrs Gridzy principals (generalament dins la seccion cap) :

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

De mai avètz besonh d'una estructura HTML avançada :

<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 vos demandatz sus l'estructura HTML, agachatz HTML semantic .

Per la legenda podètz utilizar quin tipe que siá d'etiqueta, asseguratz-vos qu'a la classa gridzyCaption . L'element img a besonh de la classa gridzyImage .

L'exemple çai-sus vos mòstra la pèl gridzySkinClassic . Per n'utilizar un autre, remplaçatz lo nom de la pèl per un d'aqueles :

Pèls inclusas

	Classas disponiblas
gridzySkinBlank un bon punt de partença per crear una pèl pròpria apercebut en dirècte	`gridzySkinBlank`
gridzySkinClassic apercebut en dirècte	`gridzySkinClassic` `gridzySkinClassicLight`(DEPRECAT dempuèi la version 2.6.0)
gridzySkinFullOverlay apercebut en dirècte	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(DEPRECAT dempuèi la version 2.6.0)
gridzySkinLift apercebut en dirècte	`gridzySkinLift` `gridzySkinLiftLight`(DEPRECAT dempuèi la version 2.6.0)
gridzySkinMagnifier foncionalitat de zoom pas inclusa apercebut en dirècte	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(DEPRECAT dempuèi la version 2.6.0)

Totas las pèls susmencionadas an pas besonh qu'un fichièr CSS, mas i a de pèls suplementàrias que demandan tanben un fichièr JavaScript :

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

	Classas disponiblas
gridzySkinBlur fonciona pas dins IE apercebut en dirècte	`gridzySkinBlur` `gridzySkinBlurLight`(DEPRECAT dempuèi la version 2.6.0)
gridzySkinCard apercebut en dirècte	`gridzySkinCard` `gridzySkinCardLight`(DEPRECAT dempuèi la version 2.6.0)

Opcions de pèl

Dempuèi la version 2.6.0 i a d'opcions per configurar las pèls incorporadas. Segon la pèl especifica podètz definir la color de rèireplan, la color del tèxte e l'ombra del tèxte. Vos cal pas que utilizar de proprietats personalizadas CSS coma o podètz veire aicí :

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

Consultatz las variablas presas en carga e las valors per defaut per cada pèl aicí :

gridzySkinClassic

Variabla	Valor per defaut	Informacion
`--background`	`rgba(0, 0, 0, .7)`	permet tota valor de fons CSS
`--color`	`rgb(255, 255, 255)`	permet tota valor de color CSS
`--text-shadow`	`none`	autoriza tota valor d'ombra de tèxte CSS

gridzySkinFullOverlay

Variabla	Valor per defaut	Informacion
`--background`	`rgba(0, 0, 0, .7)`	permet tota valor de fons CSS
`--color`	`rgb(255, 255, 255)`	permet tota valor de color CSS
`--text-shadow`	`none`	autoriza tota valor d'ombra de tèxte CSS

gridzySkinLift

Variabla	Valor per defaut	Informacion
`--background`	`rgba(0, 0, 0, .7)`	permet tota valor de fons CSS
`--color`	`rgb(255, 255, 255)`	permet tota valor de color CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	autoriza tota valor d'ombra de tèxte CSS

gridzySkinMagnifier

Variabla	Valor per defaut	Informacion
`--background`	`rgba(0, 0, 0, .7)`	permet tota valor de fons CSS
`--color`	`rgb(255, 255, 255)`	permet tota valor de color CSS

Aquesta pèl pren pas en carga --text-shadow

gridzySkinBlur

Variabla	Valor per defaut	Informacion
`--background`	`rgba(0, 0, 0, .7)`	permet tota valor de fons CSS
`--color`	`rgb(255, 255, 255)`	permet tota valor de color CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	autoriza tota valor d'ombra de tèxte CSS

gridzySkinCard

Variabla	Valor per defaut	Informacion
`--background`	`rgba(0, 0, 0, 1)`	permet tota valor de fons CSS
`--color`	`rgb(255, 255, 255)`	permet tota valor de color CSS
`--text-shadow`	`none`	autoriza tota valor d'ombra de tèxte CSS

Totas las skins predefinidas prenon en carga pas que de legendas de tèxte simplas. Podètz crear vòstras pèls pròprias e mai complèxas. Mercés de balhar un agach sus Style Gridzy .

Estil Gridzy

Se cap de pèl predefinida correspond a vòstres besonhs, ne podètz estilhar la vòstra.

Lo biais mai aisit es de copiar d'en primièr una pèl existenta e de l'adaptar a vòstres pròpris besonhs. La pèl predefinida gridzySkinBlank provesiriá generalament una bona basa e tanben una bona documentacion dins lo fichièr 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;
}

Dins lo fichièr CSS trobaretz las classas gridzySkinBlank , gridzyImage e gridzyCaption . Gridzy en se a pas besonh d'aquelas classas. Son utilizats sonque per l'estilizacion e doncas los podètz suprimir o renomenar se volètz.

En mai d'aquò trobaretz la classa CSS gridzyItem . Gridzy definis aquesta classa automaticament a totes los enfants dirèctes de l'element principal del contenedor. Alara, podètz utilizar aquesta classa per estilizar los elements de vòstra galariá.

Ment de causas importantas

Lo contengut de l'element deuriá èsser completament sensible. Pensatz que la talha de l'element cambiarà definitivament. Utilizatz de valors percentualas al luòc de valors de pixèl. E agachatz l'opcion de disposicion Gridzy autoFontSize , que liga la talha de poliça a la talha de la bóstia de l'element.
Cada element deuriá aver un rapòrt d'aspècte plan definit. Lo rapòrt d'aspècte de l'element cambiarà pas jamai e es necessari per calcular la grasilha. Alara se un element a pas automaticament un rapòrt d'aspècte plan definit, predefinitz-lo manualament (per exemple via css).

Dins qualques cases, pòt èsser mai aisit d'estilar lo contengut dels elements abans que Gridzy s'inicialize. Suprimissètz simplament la classa gridzy o lo fichièr javascript Gridzy per aquò.

Es aquò! Es tot çò que vos cal per bastir vòstra pròpria pèl. La màger part de las pèls predefinidas utilizan pas mai qu'aquò.

Mas n'i poiriá aver mai se volètz...

Pèls avançadas

Gridzy utiliza mai de classas CSS que sonque gridzyItem . La màger part seràn definits automaticament e los podètz utilizar per l'estilizacion tanben.

Classas de contenedors principals

Nom de classa	Descripcion
`gridzy` per definir manualament	Gridzy tròba automaticament d'elements amb aquesta classa e los inicializa.
`gridzyAnimated`	Serà definit automaticament se l'opcion `animate` es `true` . Se aquesta classa es definida manualament, l'opcion `animate` serà automaticament `true` tanben (levat s'es explicitament definida a `false` ).

Classas d'elements

Nom de classa	Descripcion
`gridzyItem`	Serà definit tre que l'element comença lo procès d'inicializacion. Serà pas jamai levat.
`gridzyItemInitializing`	Serà definit tre que l'element començarà lo procès d'inicializacion. Serà remplaçat per `gridzyItemReady` tre que l'element serà completament inicializat. Vòl pas dire que los imatges son completament cargats (veire `gridzyItemLoading` ), mas l'element es prèst a èsser visible.
`gridzyItemReady`	Remplaçarà `gridzyItemInitializing` tre que l'element serà completament inicializat. Serà pas jamai levat. Vòl pas dire que los imatges son completament cargats (veire `gridzyItemComplete` ), mas l'element es prèst a èsser visible.
`gridzyItemLoading`	Serà definit tre que l'element començarà lo procès d'inicializacion. Serà remplaçat per `gridzyItemComplete` tre que los imatges contenguts (en general sonque un) seràn completament cargats.
`gridzyItemComplete`	Remplaçarà `gridzyItemLoading` tre que los imatges contenguts (en general sonque un) seràn completament cargats. Serà pas jamai levat.
`gridzyItemInitialToVisible`	Serà definit tre que l'element començarà d'aparéisser lo primièr còp. Serà suprimit tre que l'element serà completament visible.
`gridzyItemVisible`	Serà definit tre que l'element serà completament visible. Serà suprimit tre que l'element començarà de desaparéisser.
`gridzyItemVisibleToHidden`	Serà definit tre que l'element començarà de desaparéisser. Serà suprimit tre que l'element serà completament amagat.
`gridzyItemHidden`	Serà definit tre que l'element serà completament amagat. Serà suprimit tre que l'element començarà d'aparéisser.
`gridzyItemHiddenToVisible`	Serà definit tre que l'element començarà d'aparéisser (levat d'aparéisser lo primièr còp – veire la classa `gridzyItemInitialToVisible` ). Serà suprimit tre que l'element serà completament visible.
`gridzyItemVisibleToVisible`	Serà definit tre que quicòm dins la grasilha cambiarà, mas l'element en se èra e demorarà visible. Serà suprimit tre que l'animacion de cambiament serà acabada.

Per defaut l'indicador de procès e las animacions per las imatges apareissent e desapareissent son predefinidas pel fichièr CSS principal de Gridzy.

Amb aquelas classas CSS çai-sus mencionadas podètz estilizar vòstre pròpri indicador de procès e d'animacions. Ausatz a agachar lo fichièr CSS principal de Gridzy, per comprene çò que vos caldriá substituir. Pas de paur, tot es plan documentat ailà.

Optimizar lo cargament

Se utilizatz fòrça imatges, poiriá èsser una bona idèa d'ajudar Gridzy a bastir la grasilha mai rapidament.

Empachar de sautar d'imatges

Gridzy a absoludament besonh del rapòrt d'aspècte de totes los imatges per calcular la grasilha. Aquestes faches resultan en saut d'elements se d'unes imatges son prèstes e d'autres non. Mai i a d'imatges, mai aquel efièch pòt èsser fastidiós.

Per prevenir aqueste comportament, basta de definir los atributs width e height per totes los elements img . Es important de definir las valors corrèctas per cada imatge individual, autrament los imatges serián desformats. Las valors corrèctas son la largor e la nautor originalas de l'imatge respectiu:

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

Après aquò Gridzy pòt calcular la grasilha immediatament sens besonh de conéisser las talhas realas dels imatges.

Cargament mandra

Per cargar pas que d'imatges que son dins la vista visibla, seguissetz aquestas etapas :

Inserir los atributs width e height coma descrich çai-sus (asseguratz-vos d'utilizar las valors corrèctas)
Remplaçatz totes los atributs src per data-gridzylazysrc coma mostrat çai-jos (s'avètz d'atributs srcset tanben, remplaçatz-los per 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>

Après aquestas etapas los imatges se cargaràn tre que seràn prèp o a l'interior de la vista.

Indicador de procès

L'indicator de procès es la pichòta icòna animada qu'apareis del temps que l'imatge es en cors de cargament. Se utilizatz de legendas e de pèls , l'indicador de procès serà afichat automaticament. Autrament avètz besonh de qualques ajustaments :

Metètz cada element img dins un element div
(o dins quin autre element que siá – veire HTML semantic per mai)
Ajustar la classa gridzyImage a cada element img

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

Après aquò deuriátz veire los indicadors de procès se los imatges prenon de temps per se cargar.

Filtres

Los filtres dins Gridzy son pro simples mas poderoses. Quina que siá la mena de filtre que necessitatz, es fòrça probable qu'es realizable. Tot çò que vos cal es, un pauc de CSS e qualques elements de formulari HTML ...

Vaquí un exemple foncional:

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

Bastim-lo Pas a Pas

1. D'en primièr avèm besonh de l'estructura HTML abituala de Gridzy e definir de noms de classa per totes los elements de galariá per que los poscam filtrar après

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

Dins aqueste exemple utilizam pas qu'una classa per cada element. Mas podètz tanben definir de classas multiplas per un sol element, se aquel element deuriá èsser trobat via de filtres multiples.

2. Puèi apondrèm qualques botons a travèrs los quals podèm cambiar los filtres puèi

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

Al luòc dels botons, podètz tanben utilizar d'autres elements de formulari coma de bóstias de seleccion, de botons de ràdio, de camps de seleccion e aital endavant.

Coma podètz veire, las valors dels botons son de selectors CSS abituals. Tre qu'avèm acabat, un clic sus un tal boton aficharà los imatges que correspondon a aquel selector CSS. Tecnicament definis simplament l'opcion filter a aquesta valor.

Podètz tanben utilizar de selectors fòrça mai complèxes. Per exemple :not(.animals) foncionariá tanben, aital coma .animals.people e .animals, .people .

3. Fin finala, encapsulam los botons dins un contenedor div e los ligam a la galariá Gridzy, en definissent l'opcion 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>

Coma podètz veire, utilizam tanben un selector CSS per l'opcion filterControls . Lo contenedor div amb l'atribut id servís pas que per far los botons mai aisit de seleccionar via aquel selector CSS.

Es aquò!

Se preferissètz una solucion JavaScript, consultatz l' API .

API

E mai se Gridzy a sa pròpria API, la màger part de las causas pòdon èsser fachas sens ela, simplament en manipulant lo DOM. Gridzy o remarcarà e ajustarà la grasilha. Mas i a tanben una API fòrça poderosa ...

Manipulacion del DOM

Per totas las manipulacions de Modèl d'Objècte de Document (DOM) avèm d'en primièr besonh de l'element de contenedor :

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

Apondre d'imatges

Es important de bastir e d'emplenar completament lo novèl element enfant abans de l'apondre a l'element de contenedor. Autrament Gridzy pòt pas detectar las dimensions corrèctas.

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

Suprimir los imatges

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

Cambiar las opcions

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

Mai sus la manipulacion del DOM podètz trobar dins los documents web MDN . I a tanben una Introduccion al DOM disponibla.

API proprietària

Per utilizar l'API, avèm d'en primièr besonh de l'instància Gridzy, qu'es ligada a l'element de contenedor Gridzy :

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

Obténer l'opcion

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

Obténer totas las opcions

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

Definir las opcions

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

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

Aplicar lo filtre

Aplicar un filtre es sonque definir lo filter d'opcions que pòt èsser quin selector CSS valid que siá :

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

Apondre de foncions de recampament

DEPRECAT dempuèi la version 2.4.0
Utilizatz los Eveniments modèrnes e mai soples a la plaça. Vejatz la seccion seguenta pels detalhs.

~~Gridzy.js 2 pren en carga qualques opcions per las foncions de recampament. Pòdon èsser definits sonque via l'API proprietària, mas coma d'autras opcions :~~

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

	~~Descripcion~~
~~`onBeforeOptionsChanged`~~	~~Foncion de recampament qu'es invocada dirèctament abans de definir las opcions.~~
~~`onOptionsChanged`~~	~~Foncion de recampament qu'es invocada dirèctament après la configuracion de las opcions.~~
~~`onBeforeRender`~~	~~Foncion de recampament qu'es invocada dirèctament abans lo rendut.~~
~~`onRender`~~	~~Foncion de recampament qu'es invocada dirèctament après lo rendut.~~

Utilizar los eveniments

dempuèi la version 2.4.0

Podètz utilizar los eveniments Gridzy exactament coma los eveniments JavaScript abituals :

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

Qualques eveniments son lançats sus l'element de contenedor Gridzy e d'autres eveniments son lançats suls elements d'element individuals dins l'element de contenedor.

Eveniments lançats sus l'element de contenedor Gridzy :

	Descripcion
`gridzyBeforeInit`	S'encènd abans l'inicializacion de la galariá.
`gridzyInit`	S'escapa après l'inicializacion de la galariá.
`gridzyBeforeOptionsChanged`	S'encènde abans de definir las opcions.
`gridzyOptionsChanged`	Se desencadena après la configuracion de las opcions.
`gridzyBeforeRender`	Fuòc abans de rendur.
`gridzyRender`	S'escapa après lo rendut.

Se mancatz d'eveniments aicí, mandatz una demanda de sosten .

event.target provesís l'element de contenedor Gridzy.
event.detail.instance provesís l'instància Gridzy.

Eveniments lançats sus d'elements d'element:

	Descripcion
`gridzyItemBeforeInit`	S'encènde abans l'inicializacion de l'element.
`gridzyItemInit`	Se desencadena après l'inicializacion de l'element.
`gridzyItemLoading`	S'activa quand l'element comença de se cargar.
`gridzyItemReady`	S'activa quand l'element es prèst pel calcul de la grasilha. Doncas lo rapòrt d'aspècte es conegut, mas l'imatge pòt èsser encara en carga.
`gridzyItemComplete`	S'activa quand l'imatge de l'element es completament cargat.

Se mancatz d'eveniments aicí, mandatz una demanda de sosten .

event.target provesís l'element d'element respectiu.
event.detail.instance provesís l'instància Gridzy.

API – Global

I a qualques foncions que son independentas de las instàncias de Gridzy. Doncas avèm pas besonh d'obténer una instància abans.

Obténer l'opcion per defaut

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

Obténer totas las opcions per defaut

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

Definir las opcions per defaut

Aquò definis pas las opcions de totas las instàncias Gridzy ja inicializadas, mas definís la basa per las instàncias novèlas. Pasmens, se una opcion d'una instància existenta seriá reïnicializada via la valor null , utilizariá la novèla valor per defaut.

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

Podètz utilizar aquò per definir d'opcions globalament, se l'apelatz abans que DOM siá prèst. Doncas auriás pas pus besonh de definir las opcions coma atributs.

Automatismes

Tant que totes los automatismes de Gridzy.js 2 son actius, i a pas besonh dels metòdes çai-jos. Mas los automatismes pòdon èsser apagats per utilizar Gridzy d'un biais mai tradicional:

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

Qualques unas d'aquelas opcions pòdon pas èsser definidas via los atributs data-gridzy- o via setOptions() , per de rasons logicas :

	Valor per defaut	Descripcion
`autoInitOnDomReady`	`true`	Detecta d'elements amb la classa `gridzy` al moment del cargament de la pagina e los inicializa. Configurable via `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Observator de mutacion	`true`	Detecta d'elements novèls amb la classa `gridzy` tre qu'apareisson dins lo DOM e los inicializa. (per exemple sus l'utilizacion de las transicions de pagina) Configurable via `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Observator de mutacion	`true`	Detecta se los elements enfants (imatges) son aponduts o suprimits, e met a jorn la grasilha automaticament. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Definís se los atributs `data-gridzy-` son generalament utilizats o pas. S'aquò es `false` las opcions pòdon èsser definidas sonque via l'API proprietària. Settable via `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Observator de mutacion	`true`	Detecta los cambiaments dels atributs `data-gridzy-` , e met a jorn la grasilha automaticament. Detecta tanben se la classa `gridzyAnimated` es aponduda o suprimida e se de cambiaments d'atribut `style` se produson. Se `useOptionAttributes` es `false` , detecta pas que de cambiaments d'atribut `style` . Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Observator de mutacion	`true`	Detecta los cambiaments dels atributs `class` de totes los elements enfants (imatges). Pertinent per çò qu'es dels filtres. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Observator de mutacion dempuèi la version 2.5.0	`true`	Detecta los cambiaments dels atributs `src` de totas las imatges. Pertinent quand es utilizat amb React o de bibliotècas similaras. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Redimensionar l'observator dempuèi la version 2.6.0	`true`	Detècta de cambiaments de la largor de l'element. Pertinent per çò qu'es del dessenh responsiu. (Abans la version 2.6.0 un auditor d'eveniments de redimensionament de fenèstra èra utilizat) Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Inicializar manualament

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

Destruire l'instància

Aperaquí dich, lo contrari d'inicializar Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sincronizar la lista enfant manualament

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

Sincronizar un sol element enfant manualament

Normalament pas necessari, levat dins de cases fòrça rars.

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

Sincronizar los atributs manualament

Notatz que l'opcion useOptionAttributes deu èsser true per aquò.

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

Rendut de fòrça

Normalament pas necessari, quitament se totes los automatismes son desactivats

gridzyInstance.render();

Ensamblador WordPress

Bibliotèca JavaScript

Servici