Versión 2.x – Gridzy.Gallery

Le ts'ono'oto' web ts'o'ok u traducido automáticamente. Wa yaan ba'ax ma' jach sáasil, ilawil le ju'uno'ob ich inglés.

Básico u búukinta'al

Na'akal le archivos Gridzy ti' u servidor ka añadir le ti' u ts'ono'oto' web (normalmente ti' le sección pool):

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

Ts'áa le código HTML (je'el tu'uxak ti' le sección u wíinkilal):

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

¡Lelo'! Lela' jump'éel ejemplo jach meyaj. Ma' k'a'abet mix jump'éel inicialización extra.

Configuración

U páajtalil asab ch'a'abil u configurar Gridzy jach, chéen utilizar atributos HTML. Chéen k'a'abet a ts'áik u k'aaba' le opción yéetel data-gridzy- . Bey u, utia'al establecer le opción spaceBetween , chéen añadir le atributo 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>

K'ajle' opciones

	U tojol tumen defecto	Bixil
`animate`	`true`	Ku jets'ik wa k'a'abéet u meyaj le animaciones ken u jelpajal le cuadrícula (je'ebix, ken u k'ex u Buka'aj u ba'al u ventana le navegador wa ken u establece jump'éel filtro).
`layout`	`justified`	Ku jets'ik bix u meyajta'al le diseño. Gridzy.js 2 ku yáanta'al le ka'ap'éel jejeláas diseños `justified` yéetel `waterfall` . Jujuntúulal ti' leti'obe' yaan u leti'ob parámetros opción adicionales, ku tech je'el kaxtik yáanal le tabla.
`filter`	`*`	ku jets'ik ba'ax oochelo'ob unaj u ye'esa'al. Je'el ba'ax CSS-selector je'el u páajtal u utilizado bey je'o' waye'. U suukile' ku jets'ik automáticamente yo'osal `filterControls` (wil uláak' opción). Ilawil le filtros
`filterControls`		Ku jets'ik ba'ax elementos u forma je'el u páajtal u utilizado utia'al u filtrar le máak. Je'el ba'alak selector CSS, ku yéeyik elementos formulario HTML, je'el u páajtal u utilizado bey je'o' waye'. Ilawil le filtros
`autoConsiderScrollBars`	`true`	Utia'al u predecir le anchura disponible wa barras desplazamiento ku chíikpajal wa desaparecen. Mantats' ku ya'ala'al ka p'áatak ti' `true` a menos u le automatismo causa toop.

Justified Opciones u diseño

	U tojol tumen defecto	Bixil
`autoFontSize`	`false`	ku actualizar automáticamente le propiedad Buka'aj fuente Amal máabeno' basado ti' le Buka'aj máabeno' áantajil. Tumen defecto le propiedad Buka'aj le fuente ma' u establece explícitamente.
`desiredHeight`	`190`	Ku jets'ik u ka'anilo' u k'áat u filas le elementos. Le ka'anilo' yaan u calcular u dependiendo de le anchura disponible yéetel le elementos ti' le fila.
`hideOnMissingImage`	`true`	Ku ta'akik le cuadros tu'ux yaan máak ma' páajchaj u kuuch.
`spaceBetween`	`4`	Ku jets'ik u náachil ichil le elementos ti' píxeles.
`lastRowAlign` tak le versión 2.3.0	`justified`	Ku jets'ik bix u bisikuba le ts'ook filao'. Le ba'alo'ob ku cha'abal u beeta'alo'obo' leti'obe `left` , `center` , `right` yéetel `justified` .
`singleRowAlign` tak le versión 2.3.0	`justified`	Ku jets'ik bix u bisikuba wa yaan chéen jump'éel fila. Le ba'alo'ob ku cha'abal u beeta'alo'obo' leti'obe `left` , `center` , `right` yéetel `justified` .
~~`fillLastRow`~~ ~~tak le versión 2.1.0~~	~~`true`~~	ts'o'ok u luk'sa'al tak le versión 2.4.0 (DEPRECATED since version 2.3.0 ) ku ts'áaik le oochelo'obo' uti'al u ts'ook fila mantats' chu'upul. Wa ka tukultik a ts'áik máak dinámicamente, je'el u jump'éel ma'alo'ob tuukul desactivar le ba'ala'. Ma' yaan mix jump'éel efecto ti' le filas chen (wil `fillSingleRow` ).
`fillSingleRow` tak le versión 2.1.0	~~`true`~~	ts'o'ok u luk'sa'al tak le versión 2.4.0 (DEPRECATED since version 2.3.0 ) wa chéen yaan jump'éel filae', ku ts'áaik le oochelo'obo' uti'al u chu'upul le filao'. Wa je'el u yúuchul u yantaltech chéen jump'éel wa ka'ap'éel oochelo'ob te' galeríao', je'el u páajtal u jump'éel ma'alo'ob tuukul u desactivar le ba'ala'.

Waterfall Opciones u diseño

	U tojol tumen defecto	Bixil
`autoFontSize`	`false`	ku actualizar automáticamente le propiedad Buka'aj fuente Amal máabeno' basado ti' le Buka'aj máabeno' áantajil. Tumen defecto le propiedad Buka'aj le fuente ma' u establece explícitamente.
`desiredWidth`	`250`	Ku jets'ik u kóochil le columna'ob k'áata'ano'. U jaajil u kóochil yaan u calcular u dependiendo de le kóoch disponible yéetel le meyaj ku columnas.
`hideOnMissingImage`	`true`	Ku ta'akik le cuadros tu'ux yaan máak ma' páajchaj u kuuch.
`horizontalOrder`	`false`	Ku ya'alik u le elementos ku colocan estrictamente jump'éel elemento ti' Amal columna u izquierda u derecha, ts'o'okole' Káaj tu ka'atéen ti' le columna asab izquierda independiente ti' ba'ax columna yaan asab kúuchil. Tumen defecto le elementos Mantats' ku colocarán ti' le columna yéetel le ka'anilo' asab chichanen.
`spaceBetween`	`4`	Ku jets'ik u náachil ichil le elementos ti' píxeles.
`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`.

Asab opciones avanzadas

Utia'al u asab avanzadas opciones, consulte le API .

HTML semántico

Le ba'ax HTML asab sencilla ti' Gridzy leti' le je'ela':

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

Ba'ale', Gridzy jach flexible yéetel je'el utilizar óol je'el ba'ax uláak' ba'ax HTML. Chéen yaan jump'éel pocos ti'its u considerar:

Amal paal ti' le elemento contenedor ku chíikbesik jump'éel ba'al ti' le cuadrícula.
Le elemento contenedor yéetel u paalalo'ob je'el u páajtal u je'el ba'ax bin yano'ob etiqueta, bey ul yéetel li (chéen considere restablecer predeterminados le navegador).
Wa jump'éel elemento img ma' leti' jump'éel paal directo yan wéet, k'a'abet le xook gridzyImage .

Bey u lela' xan jump'éel ba'ax HTML meyaj:

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

especialmente wa k'áat a ts'áik subtítulos, k'áabet jump'éel ba'ax HTML avanzada. Utia'al a wojéelt uláak' ba'alo'ob tu yo'olal, echa jump'éel vistazo ti' Captions & Skins .

Subtítulos yéetel yoot'el

Wa a k'áat a ts'áa subtítulos ti' a galería, k'a'abéet a definir bix u yila'al. Le o'olale', yaan pieles predefinidas táan disponibles. Amal yoot'el ku beetik jump'éel archivo CSS. K'a'abéet a ts'áik le archivoa ' Beyxan ti' kaambalilo'ob le k'ajle' archivos Gridzy (normalmente ti' le sección pool):

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

Beyxan, k'a'abet jump'éel ba'ax HTML avanzada:

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

Wa ka k'áatik ti' le ba'ax HTML, echa jump'éel vistazo ti' HTML semántico .

Utia'al le capción je'el utilizar je'el bin yano'ob etiqueta, chéen asegurar ku u yaantal le xook gridzyCaption . Le elemento img k'a'abet u xook gridzyImage .

Le ejemplo yaan ka'analo' ku ye'esik ti' teech u yoot'el gridzySkinClassic . Utia'al u biilankiltej uláak', chéen k'ex u k'aaba' u yoot'el yéetel juntúul ti' le je'elo'oba':

Skins incluidos

	Xook yaan
gridzySkinBlank jump'éel ma'alob káajbal uti'al u beeta'al jump'éel kajnáalo'ob yoot'el sáasil previa ti' vivo	`gridzySkinBlank`
gridzySkinClassic sáasil previa ti' vivo	`gridzySkinClassic` `gridzySkinClassicLight`(DEPRECATED tak le versión 2.6.0)
gridzySkinFullOverlay sáasil previa ti' vivo	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(DEPRECATED tak le versión 2.6.0)
gridzySkinLift sáasil previa ti' vivo	`gridzySkinLift` `gridzySkinLiftLight`(DEPRECATED tak le versión 2.6.0)
gridzySkinMagnifier ma' táakpaja'an u meyaj zoom sáasil previa ti' vivo	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(DEPRECATED tak le versión 2.6.0)

Tuláakal le skins yaan ka'analo' chéen k'a'abet jump'éel archivo CSS, ba'ale' yaan uláak' skins ku k'a'abet xan jump'éel archivo JavaScript:

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

	Xook yaan
gridzySkinBlur ma' meyaj ti' IE sáasil previa ti' vivo	`gridzySkinBlur` `gridzySkinBlurLight`(DEPRECATED tak le versión 2.6.0)
gridzySkinCard sáasil previa ti' vivo	`gridzySkinCard` `gridzySkinCardLight`(DEPRECATED tak le versión 2.6.0)

Opciones u yoot'el

Tak le versión 2.6.0 yaan opciones uti'al u configurar le pieles incorporadas. Je'el bix u yoot'el je'el u páajtal a ts'áik u boonil le ju'unil tu'ux yaan, u boonil le analte'o' yéetel le bo'oyo' analte'o'. Chéen k'a'abet a meyajtik propiedades personalizadas ti' CSS je'el bix je'el u páajtal a wilik waye':

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

Ilawil le variables soportadas yéetel le valores tumen defecto uti'al Amal yoot'el waye':

gridzySkinClassic

Variable	U tojol tumen defecto	Íinformasion
`--background`	`rgba(0, 0, 0, .7)`	ku cha'ik je'el ba'ax je'o' u ju'unil CSS
`--color`	`rgb(255, 255, 255)`	ku cha'ik je'el ba'alak u boonil CSS
`--text-shadow`	`none`	ku cha'ik je'el ba'alak CSS text-shadow je'o'

gridzySkinFullOverlay

Variable	U tojol tumen defecto	Íinformasion
`--background`	`rgba(0, 0, 0, .7)`	ku cha'ik je'el ba'ax je'o' u ju'unil CSS
`--color`	`rgb(255, 255, 255)`	ku cha'ik je'el ba'alak u boonil CSS
`--text-shadow`	`none`	ku cha'ik je'el ba'alak CSS text-shadow je'o'

gridzySkinLift

Variable	U tojol tumen defecto	Íinformasion
`--background`	`rgba(0, 0, 0, .7)`	ku cha'ik je'el ba'ax je'o' u ju'unil CSS
`--color`	`rgb(255, 255, 255)`	ku cha'ik je'el ba'alak u boonil CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	ku cha'ik je'el ba'alak CSS text-shadow je'o'

gridzySkinMagnifier

Variable	U tojol tumen defecto	Íinformasion
`--background`	`rgba(0, 0, 0, .7)`	ku cha'ik je'el ba'ax je'o' u ju'unil CSS
`--color`	`rgb(255, 255, 255)`	ku cha'ik je'el ba'alak u boonil CSS

Le yoot'ela' ma' tu yáanta'al --text-shadow

gridzySkinBlur

Variable	U tojol tumen defecto	Íinformasion
`--background`	`rgba(0, 0, 0, .7)`	ku cha'ik je'el ba'ax je'o' u ju'unil CSS
`--color`	`rgb(255, 255, 255)`	ku cha'ik je'el ba'alak u boonil CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	ku cha'ik je'el ba'alak CSS text-shadow je'o'

gridzySkinCard

Variable	U tojol tumen defecto	Íinformasion
`--background`	`rgba(0, 0, 0, 1)`	ku cha'ik je'el ba'ax je'o' u ju'unil CSS
`--color`	`rgb(255, 255, 255)`	ku cha'ik je'el ba'alak u boonil CSS
`--text-shadow`	`none`	ku cha'ik je'el ba'alak CSS text-shadow je'o'

Tuláakal le skins predefinidas chéen soportan subtítulos analte'o' simples. Je'el u páajtal a beetik a jach kajnáalo'ob yéetel asab complejas pieles. Béet ilawil Style Gridzy .

Estilo Gridzy

Wa mina'an u yoot'el predefinida ku adaptar u kajtalo'ob ichil, je'el u páajtal u estilo u kajnáalo'ob.

U páajtalil asab ch'a'abil jach yáax copiar jump'éel yoot'el existente yéetel adaptar u ti' u kajnáalo'ob kajtalo'ob ichil. Le yoot'el predefinida gridzySkinBlank normalmente proporcionaría jump'éel ma'alo'ob k'oja'ano'obo' bey jump'éel ma'alo'ob ju'uno'ob ti' le archivo 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;
}

Te' archivo CSS yaan a kaxtik le xook gridzySkinBlank , gridzyImage yéetel gridzyCaption . Gridzy je'el wéet ma' k'a'abet le xooko'oba'. chéen ku meyajtiko'ob uti'al u beeta'al estilo yéetel je'el u páajtal a luk'ik wa a k'exik u k'aaba' wa a k'áat.

Beyxan, yaan a kaxtik le xook CSS gridzyItem . Gridzy ku jets'ik le xook automáticamente ti' tuláakal le paalalo'ob directos ti' le elemento nu'ukul tu'ux yaan noj bejo'. Bey u, je'el utilizar le xook utia'al u estilo le elementos u galería.

Tuukul ba'alo'ob k'a'ana'antak

Le ba'ax yaan ti' le artículo k'a'ana'an u jach sensible. Tuukulte'ex u Buka'aj le elemento definitivamente yaan u k'ex. Meyaj u porcentaje kúuchil u tojol le píxeles. yéetel echa jump'éel vistazo ti' le opción diseño Gridzy autoFontSize , ku une le Buka'aj le fuente ti' le Buka'aj le máabeno' artículo.
Amal ba'al k'a'ana'an yaantal jump'éel relación bey ma'alob definida. U relaciónil le ba'alo' mixbik'in kun jelpajal yéetel k'a'abéet uti'al u calcularta'al le cuadrículao'. Bey u wa jump'éel artículo ma' yaan automáticamente jump'éel relación bey ma'alob definida, predefinir manualmente (je'ebix, yo'osal css).

Yaan k'iine', je'el u páajtal u asab ch'a'abil u estilo le contenido le elementos bey ma' Gridzy táan u inicializando. Chéen luk'ul Teeche' le xook gridzy wa le archivo javascript Gridzy temporalmente uti'al le ba'ala'.

¡Lelo'! Lelo' tuláakal ba'ax k'a'abéet uti'al a beetik a yoot'el. Óol tuláakal le máasewáalo'obo' ti' le pieles predefinidas ma' meyajtiko'ob asab u le ba'ala'.

Ba'ale' je'el u páajtal u yantal uláak' wa uts ta wich...

Skins avanzados

Gridzy meyajtiko'ob asab xook CSS u chéen gridzyItem . Óol tuláakal le máasewáalo'obo' leti'obe' ku establecerán automáticamente yéetel je'el utilizar le utia'al u estilo xan.

Xook noj bejo' u contenedor

K'aaba' xook	Bixil
`gridzy` uti'al u jets'ik manualmente	Gridzy ku kaxtik automáticamente elementos yéetel le xook yéetel ku inicializar le.
`gridzyAnimated`	Yaan u je'ets'el automáticamente wa `true` le opción `animate` . Wa le xook ku je'ets'el manualmente, le opción `animate` automáticamente yaan u pitik `true` xan (excepto wa táan explícitamente establecido ti' `false` ).

Xook ba'alo'ob

K'aaba' xook	Bixil
`gridzyItem`	Yaan u je'ets'el uts séeb ken káajak le tuukula' inicialización le elemento. mixbik'in kun luk'sa'al.
`gridzyItemInitializing`	Yaan u je'ets'el uts séeb ken káajak le tuukula' inicialización le elemento. Yaan u k'e'exel tumen `gridzyItemReady` uts séeb ken u inicializar le elemento. Ma' u k'áat u ya'al u le máak táan jaatsatako'ob cargadas (wil `gridzyItemLoading` ), ba'ale' le artículo táan listo utia'al u kéen p'áatak visible.
`gridzyItemReady`	Yaan u k'e'exel `gridzyItemInitializing` uts séeb ken u inicializar le elemento. mixbik'in kun luk'sa'al. Ma' u k'áat u ya'al u le máak táan jaatsatako'ob cargadas (wil `gridzyItemComplete` ), ba'ale' le artículo táan listo utia'al u yila'al.
`gridzyItemLoading`	Yaan u je'ets'el uts séeb ken káajak le tuukula' inicialización le elemento. Yaan u k'e'exel tumen `gridzyItemComplete` uts séeb ken le máak contenidas (normalmente chéen juntúule') táan completamente cargadas.
`gridzyItemComplete`	Yaan u k'e'exel `gridzyItemLoading` uts séeb ken le máak contenidas (normalmente chéen juntúule') táan completamente cargadas. mixbik'in kun luk'sa'al.
`gridzyItemInitialToVisible`	Yaan u je'ets'el uts séeb ken káajak u chíikpajal le ba'alo' yáax ka'atéen. Yaan u luk'sa'al uts séeb ken u chíikpajal le ba'alo'.
`gridzyItemVisible`	Yaan u je'ets'el uts séeb ken u chíikpajal le ba'alo'. yaan u luk'sa'al ken káajak u sa'atal le ba'alo'.
`gridzyItemVisibleToHidden`	Yaan u je'ets'el uts séeb ken káajak u sa'atal le ba'alo'. yaan u luk'sa'al ken u ta'akmaj le ba'alo'.
`gridzyItemHidden`	Yaan u je'ets'el uts séeb ken le artículo táan jaatsatako'ob ta'akmaj. yaan u luk'sa'al ken káajak u chíikpajal le ba'alo'.
`gridzyItemHiddenToVisible`	Yaan u je'ets'el uts séeb ken káajak u chíikpajal le ba'alo' (excepto u chíikpajal le yáax ka'atéen – wil xook `gridzyItemInitialToVisible` ). Yaan u luk'sa'al uts séeb ken u chíikpajal le ba'alo'.
`gridzyItemVisibleToVisible`	Yaan u je'ets'el uts séeb ken k'expajal ba'al ti' le cuadrícula, ba'ale' le artículo je'el wéet ka'ach yéetel permanecer visible. yaan u luk'sa'al ken ts'o'okok u k'e'exel le animacióno'.

Tumen defecto le indicador tuukula' yéetel le animaciones utia'al u chíikpajal yéetel desaparecer máak táan predefinidas tumen le archivo CSS noj bejo' u Gridzy.

Yéetel le xook CSS mencionadas ka'anal je'el u páajtal u estilo u leti'ob indicador tuukula' yéetel animaciones. Atrevete a paakat ti' le archivo CSS noj bejo' u Gridzy, utia'al entender ba'ax yaan u pitik u sobrescribir. Ma' a ch'a'ik saajkil, tuláakal ma'alob ts'íibta'an te'elo'.

Optimizar u kuuch

Wa ka meyajtik ya'ab máak, je'el u páajtal u jump'éel ma'alo'ob tuukul wáantik Gridzy construir le cuadrícula asab séeba'an.

Jech u a puulkaba ichil máak

Gridzy jach k'a'abet u relación bey tuláakal le oochelo'obo' uti'al u calcular le cuadrícula. Le ba'alo'oba' ku ts'áaik resultados ti' elementos a puulkaba ichil wa yaan máak táan listos yéetel láak'o'ob ma'. Le asab máak yaan, le asab molesto je'el u páajtal u le efecto.

Utia'al Jech le ba'ala', chéen establecer atributos width yéetel height utia'al tuláakal le elementos img . jach k'a'anan u ts'a'abal le ba'alo'ob ma'alobtako'ob uti'al Amal wíimbala', wa ma'e' le oochelo'obo' ku k'askúunta'alo'ob. Le ba'alo'ob ma'alobtako'obo' leti' le anchura yéetel ka'anilo' áantajil ti' le wíimbala':

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

Ka' lelo' Gridzy je'el u páajtal u calcular le cuadrícula inmediatamente xma' necesidad u yojéeltiko'ob le tamaños reales ti' le máak.

Lazy Loading

Utia'al u kuuch chéen máak yaan te' vista visible, chéen toj ka' le wook:

Ts'áa atributos width yéetel height je'el bix u ya'alik ka'anal (asegurar u utilizar le valores correctos)
K'ex tuláakal le atributos src yéetel data-gridzylazysrc bey ku ye'esik in continuación (wa yaan teech atributos srcset xan, reemplazar le yéetel 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>

Le ken ts'o'okok le k'iino'oba' wook le máak ku kuuch uts séeb bey u yaantal naats' wa ichil le vistazo.

Indicador u tuukula'

Le indicador tuukula' leti' le chan icono animado ku chíikpajal ka' jo'op' u le wíimbala' táan u kuuch. Wa ka meyajtik subtítulos yéetel yoot'el , le indicador tuukula' ku chíikpajal automáticamente. wa ma'e' k'a'abéet a beetik yaan ajustes:

Búukint Amal elemento img ti' jump'éel elemento div
(wa ti' je'el ba'ax uláak' elemento – wil HTML semántico utia'al u asab)
Ts'áa le xook gridzyImage ti' Amal elemento 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>

Ka' lelo' k'a'ana'an a wilik le indicadores tuukula' wa le máak ku bisik k'iin utia'al u kuuch.

Filtros

Le filtros ti' Gridzy ku jach simples Ba'ale' poderosos. Ma' importa ba'ax bin yano'ob filtro k'a'abet, jach jach probable u jach realizable. Chéen ba'ax k'a'abet ti' teech, jump'íit CSS yéetel jump'éel pocos elementos formulario HTML ...

Way yaan jump'éel ejemplo funcional:

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

Ko'ox beetik paso a paso

1. Yáax k'a'abet k le ba'ax HTML habitual u Gridzy yéetel establecer k'aaba'obo' xook utia'al tuláakal le elementos galería utia'al u béeyak filtrar le ka' lelo'

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

Te'e ejemploa' chéen k meyajtik jump'éel xook uti'al Amal elemento. Ba'ale' xan je'el u páajtal a ts'áik ya'abkach xook uti'al jump'éel chéen elemento, wa le elemento je'elo' k'a'ana'an u kaxta'al u yúuchul yo'osal ya'abkach filtros.

2. Tu láak' k ts'áabal yaan botones yo'osal le ba'ax je'el u páajtal k k'ex le filtros túun

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

Tu kúuchil le botones, xan je'el utilizar uláak' elementos formulario bey casillas verificación, botones radio, seleccionar sikte yéetel bey sucesivamente.

Bix je'el u páajtal a wilik, u tojol le botones ku selectores CSS habituales. Le ken ts'o'okok, jump'éel clic ti' jump'éel botón bey je'elo' yaan u chíikpajal le máak ku coinciden yéetel le selector CSS. Técnicamente chéen ku jets'ik le opción filter ti' le je'ela'.

xan je'el utilizar selectores jach asab complejos. Je'ebix :not(.animals) je'el u meyaj xan, bey xan .animals.people yéetel .animals, .people .

3. Tu ts'ooke', k encapsular le botones ti' jump'éel nu'ukul tu'ux yaan div yéetel enlazar le ti' le galería Gridzy, estableciendo le opción 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>

Je'el bix a wilik, xan k meyajtik jump'éel selector CSS uti'al u opción filterControls . Le nu'ukul tu'ux yaan div yéetel le atributo id chéen ku meyaj utia'al u meentik le botones asab fáciles u seleccionar yo'osal le selector CSS.

¡Lelo'!

Wa a k'áat jump'éel solución JavaScript, ilawil le API .

API

Kex Gridzy yaan u leti'ob API, óol tuláakal le máasewáalo'obo' ba'alo'ob je'el u meentik xma' leti', chéen tumen manipular le DOM. Gridzy yaan u yilik yéetel yaan u ajustar le cuadrícula. Ba'ale' xan yaan jump'éel API jach k'a'am ...

U manipular le DOM

Utia'al tuláakal le manipulaciones Document Object Model (DOM) yáax k'a'abet k le elemento contenedor:

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

Ts'áa oochelo'ob

jach k'a'anan u beeta'al yéetel u chupik le túumben elemento paal bey ma' u ts'áabal ti' le elemento nu'ukul tu'ux yaan. Wa ma'e', Gridzy ma' tu páajtal u yilik le dimensiones correctas.

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

luk'es oochelo'ob

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

K'ex le opciones

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

Asab yóok'ol le manipulación le DOM je'el u páajtal u kaxtik ti' MDN web docs . Yaan xan jump'éel Introducción ti' le DOM disponible.

API u yuumil

Utia'al u meyaj le API, yáax k'a'abet k le instancia Gridzy, ku une ti' le elemento contenedor Gridzy:

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

kéen p'áatak opción

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

K'amik tuláakal le opciones

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

Je'ets'el opciones

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

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

Aplicar Filtro

U ts'áabal jump'éel filtro jach chéen establecer le filter opción u páajtal u je'el ba'ax selector CSS válido:

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

Añadir noj Callback

ts'o'ok u xu'ulul tak le versión 2.4.0
Meyaj le k'inbesajo'ob modernos yéetel asab flexibles tu kúuchilo'ob. Ilawil le uláak' jaats uti'al u yojéeltiko'ob.

~~Gridzy.js 2 ku yáanta'al Jayp'éel opciones uti'al u noj callback. Chéen je'el u páajtal u ts'a'abal yo'osal le API propietaria, ba'ale' bey uláak' opciones:~~

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

	~~Bixil~~
~~`onBeforeOptionsChanged`~~	~~Función devolución llamada ku invoca Jun bey ma' establecer opciones.~~
~~`onOptionsChanged`~~	~~Función devolución llamada ku invoca Jun ka' configurar opciones.~~
~~`onBeforeRender`~~	~~Función u ka'a llamada ku invoca Jun bey ma' u renderizado.~~
~~`onRender`~~	~~Función devolución llamada ku invoca Jun ka' u renderizado.~~

Meyaj Eventos

tak le versión 2.4.0

Je'el u páajtal u utilizar k'inbesajo'ob Gridzy exactamente bey k'inbesajo'ob JavaScript habituales:

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

Yaan k'inbesajo'ob ku t'abik ti' le elemento contenedor Gridzy yéetel uláak' k'inbesajo'ob ku t'abik ti' le elementos individuales ichil le elemento contenedor.

K'inbesajo'ob ku chíikpajal ti' le elemento contenedor Gridzy:

	Bixil
`gridzyBeforeInit`	K'áak' bey ma' u inicialización le galería.
`gridzyInit`	K'áak'o'ob ka' u inicialización le galería.
`gridzyBeforeOptionsChanged`	K'áak'o'ob bey ma' u ts'áabal opciones.
`gridzyOptionsChanged`	K'áak' ka' ts'o'ok u establecer opciones.
`gridzyBeforeRender`	K'áak'o'ob bey ma' u beeta'al.
`gridzyRender`	K'áak'o'ob ka' u renderizado.

Wa ka p'atik je'el ba'alak k'inbesajo'ob waye', túuxt jump'éel solicitud áantaj .

event.target ku ts'aik le elemento contenedor Gridzy.
event.detail.instance ku ts'aik le instancia Gridzy.

K'inbesajo'ob ku chíikpajal ti' elementos artículo:

	Bixil
`gridzyItemBeforeInit`	K'áak' bey ma' u inicialización le artículo.
`gridzyItemInit`	K'áak' ka' u inicialización le artículo.
`gridzyItemLoading`	ku k'áak'tal ken káajak u kuuch le ba'alo'.
`gridzyItemReady`	K'áak' ken le artículo táan listo utia'al u cálculo cuadrícula. Bey u le relación bey k'ajóolta'an, ba'ale' le wíimbala' je'el láayli' táan u kuuch.
`gridzyItemComplete`	Ku t'aba'an ken u wíimbala' le ba'alo' táan jaatsatako'ob kuuch.

Wa ka p'atik je'el ba'alak k'inbesajo'ob waye', túuxt jump'éel solicitud áantaj .

event.target ku ts'aik le elemento elemento respectivo.
event.detail.instance ku ts'aik le instancia Gridzy.

API – Global

Yaan Jayp'éel noj ku independientes ti' le instancias Gridzy. Bey u ma' k'a'abéet k k'amik jump'éel instancia ka'ache'.

K'amik le opción tumen defecto

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

K'amik tuláakal le opciones tumen defecto

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

Je'ets'el le opciones tumen defecto

Le je'ela' ma' u jets'ik le opciones ti' tuláakal le instancias Gridzy ts'o'ok u inicializadas, ba'ale' define le k'oja'ano'obo' utia'al túumben instancias. Ba'ale', wa jump'éel opción ti' jump'éel instancia existente sería restablecida yo'osal le je'o' null , utilizaría le túumben je'o' tumen defecto.

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

Je'el u páajtal u utilizar le ba'ala' utia'al establecer opciones globalmente, wa tech llama bey ma' DOM táan listo. Bey u ma' k'a'abéet a ts'áik opciones bey atributos asab.

Automatismos

Mientras seen tuláakal le automatismos u Gridzy.js 2 táan activos, mina'an necesidad u le métodos in continuación. Ba'ale' le automatismo'obo' je'el u páajtal u tu'upul uti'al u meyaj Gridzy ti' jump'éel bix asab xíiw:

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

Yaan ti' le k'iino'oba' opciones ma' táan u béeytal u establecidas yo'osal data-gridzy- atributos wa yo'osal setOptions() , tuméen razones lógicas:

	U tojol tumen defecto	Bixil
`autoInitOnDomReady`	`true`	ku yilik elementos yéetel xook `gridzy` ti' u kuuch u linki abas kaambal yéetel ku inicializa. Je'el u páajtal u je'ets'el yo'osal `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	ku yilik túumben ba'alo'ob yéetel xook `gridzy` uts séeb bix u chíikpajal ti' le DOM yéetel ku inicializar. (je'ebix, yóok'ol u búukinta'al transiciones u linki abas kaambal) Je'el u páajtal u je'ets'el yo'osal `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	ku yilik wa ku ts'áabal wa ku luk'sa'al le elementos paalalo'obo' (wíimbala'ob), yéetel ku actualizar le cuadrícula automáticamente. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Ku jets'ik wa le atributos `data-gridzy-` ku meyajtiko'ob tu general wa ma'. Wa lela' `false` le opciones je'el u páajtal u establecer chéen yo'osal le API propietaria. Je'el u páajtal u je'ets'el yo'osal `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	ku yilik u k'e'exel le atributos `data-gridzy-` , yéetel ku actualizar le cuadrícula automáticamente. Bey xan u detecta wa le xook `gridzyAnimated` ku ts'áabal wa ku tselik yéetel wa ku yúuchul cambios ti' le atributo `style` . Wa `useOptionAttributes` `false` , chéen ku yilik u k'e'exel u atributoil `style` . Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	ku yilik u k'e'exel u atributosil `class` ti' tuláakal le elementos paalalo'obo' (wíimbala'ob). K'a'anan yo'osal le filtros. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver tak le versión 2.5.0	`true`	ku yilik u k'e'exel u atributos `src` ti' tuláakal le oochelo'obo'. K'a'anan ken u meyaj yéetel React wa bibliotecas similares. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver tak le versión 2.6.0	`true`	ku yilik u k'e'exel u kóochil le elementoo'. Relevante yo'osal le diseño sensible. (Bey ma' u versión 2.6.0 u utilizado jump'éel ventana redimensionamiento k'inbesajo'ob oyente) Je'el u páajtal u je'ets'el yo'osal `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Inicializar manualmente

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

xu'uls le instanciao'

tu ya'alaj, u contrario u inicializar Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sincronizar u tsoolol paalalo'ob manualmente

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

Sincronizar jump'éel chéen paal elemento manualmente

Ba'axten lo general ma' k'a'abéet, excepto ti' casos jach raros.

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

Sincronizar atributos manualmente

Yanak ti' tu yilaje' u opción useOptionAttributes k'a'ana'an u true uti'al lela'.

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

U muuk'il u ye'esa'al

Ba'axten lo general ma' k'a'abéet, páajtal wa tuláakal le automatismos táan apagados

gridzyInstance.render();

Plugin WordPress

JavaScript Library

Séerbisio