Versión 2.x – Gridzy.Gallery

Sitiu riʼ maʼ guca traducir ni automáticamente. Pa nuu xiixa ni cadi cayene chaahuiluʼ, biiyaʼ lu ca documentu ni nuu lu diidxaʼ inglés.

Básico ni riquiiñeʼ

Bicaa ca archivu stiʼ Gridzy lu servidor stiluʼ ne guluu cani lu sitiu stiluʼ (ni jma riquiiñeʼ nga lu sección ni láʼ cabeza):

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

Bicaa códigu HTML (ra tiica si nuu lu sección stiʼ cuerpo):

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

¡Ngapeʼ nga ni! Nga nga ti ejemplu ni rusihuinni pabiáʼ risaca ni. Cadi caquiiñeʼ diʼ gaca inicializar extra.

Configuración

Ca binni ni jma nagueenda zanda guni configurar Gridzy nga, iquiiñecaʼ si ca atributu HTML. Caquiiñeʼ si gucaaluʼ prefiju stiʼ ca lá opción ca né data-gridzy- . Nga runi, para ganda gucaaluʼ opción spaceBetween , naquiiñeʼ si gucaaluʼ 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>

Ca opción principal

	Valor predeterminado	Ximodo ni
`animate`	`true`	Riníʼ pa naquiiñeʼ iquiiñeʼ ca animación ca ora guchaa cuadrícula ca (casi ora guchaaluʼ tamañu stiʼ ventana stiʼ navegador o ora gucaaluʼ ti filtru).
`layout`	`justified`	Definir ca diseño ni riquiiñeʼ. `justified` ne `waterfall` . Cada tobi de laacabe napa parámetru stiʼ opción adicional stiʼ, ni zanda guidxélaluʼ xagueteʼ de tabla riʼ.
`filter`	`*`	Riníʼ xi imagen naquiiñeʼ gusihuínnicabe. Guiráʼ CSS-selector zanda iquiiñeʼ casi valor raríʼ. Suele gaca ni automáticamente pur `filterControls` (biiyaʼ sti opción). Biiyaʼ ca filtru ca .
`filterControls`		Determina xi elementu de forma zanda iquiiñeʼ para guiree ca imagen ca. Guiráʼ selector CSS, ni ribee ca elementu stiʼ formulario HTML, zanda iquiiñeʼ ni casi valor raríʼ. Biiyaʼ ca filtru ca .
`autoConsiderScrollBars`	`true`	Para ganda guininu pabiáʼ ancho nuu pa guihuinni o guinitilú barra de desplazamientu. Siempre racaláʼdxicabe gusaanacabe ni lu `true` a menos que automatismo riʼ gucaa guendanagana.

Justified Ca opción ni nuu lu diseño stiʼ

	Valor predeterminado	Ximodo ni
`autoFontSize`	`false`	Automáticamente raca actualizar propiedad de tamañu stiʼ letra stiʼ cada cuadru según tamañu stiʼ cuadru original. Pur defectu cadi naquiiñeʼ diʼ guicá propiedad font-size ca explícitamente.
`desiredHeight`	`190`	Definir altura ni racalaʼdxiʼ ca fila de elementu. Zaca cálcular altura real según ancho ni nuu ne según ca elementu ni nuu lu fila que.
`hideOnMissingImage`	`true`	Rucaachiʼ ca cuadru ra cá imagen ni qué ñanda niguíxhecabe.
`spaceBetween`	`4`	Definir distancia entre ca elementu ni nuu lu píxel.
`lastRowAlign` dede lu versión 2.3.0.	`justified`	Definir comportamiento stiʼ últimu fila. Ca valor ni zanda guicaa binni nga `left` , `center` , `right` ne `justified` .
`singleRowAlign` dede lu versión 2.3.0.	`justified`	Definir comportamiento si nuu ti fila si. Ca valor ni zanda guicaa binni nga `left` , `center` , `right` ne `justified` .
~~`fillLastRow`~~ ~~dede lu versión 2.1.0.~~	~~`true`~~	BIʼNIʼ BIʼNIʼ BIʼNIʼ versión 2.4.0. (MAʼ qué riquiiñeʼ diʼ ni dede lu versión 2.3.0 ). Biʼniʼ arreglarbe ca imagen ca ti siempre guidxá últimu fila que guidubi naca. Pa racaláʼdxiluʼ gucaaluʼ imagen dinámica, zanda gaca ni ti idea galán pa gucueezaluʼ ni. Qué racané diʼ ni ca fila si (biiyaʼ `fillSingleRow` ).
`fillSingleRow` dede lu versión 2.1.0.	~~`true`~~	BIʼNIʼ BIʼNIʼ BIʼNIʼ versión 2.4.0. (MAʼ qué riquiiñeʼ diʼ ni dede lu versión 2.3.0 ). ~~Pa ti fila si nuu, riguíxhebe ca imagen ca ti guiráʼ ora guidxá guidubi fila que. Pa zanda guizaaca ti o chupa si imagen nápaluʼ ndaaniʼ galería ca, galán gucueezaluʼ ni.~~

Waterfall Ca opción ni nuu lu diseño

	Valor predeterminado	Ximodo ni
`autoFontSize`	`false`	Automáticamente raca actualizar propiedad de tamañu stiʼ letra stiʼ cada cuadru según tamañu stiʼ cuadru original. Pur defectu cadi naquiiñeʼ diʼ guicá propiedad font-size ca explícitamente.
`desiredWidth`	`250`	Definir ancho ni racalaʼdxiʼ ca columna ca. Zaca cálcular ancho real según ancho ni nuu ne pabiáʼ columna nuu.
`hideOnMissingImage`	`true`	Rucaachiʼ ca cuadru ra cá imagen ni qué ñanda niguíxhecabe.
`horizontalOrder`	`false`	Definir que ca elementu ca rácani estrictamente ti elementu lu cada columna de izquierda a derecha, despué ruzulú sti biaje lu columna jma izquierda independientemente lu xi columna jma nuu lugar. Pur defectu ca elementu ca siempre zucaacabe cani lu columna ni jma nahuiiniʼ.
`spaceBetween`	`4`	Definir distancia entre ca elementu ni nuu lu píxel.
`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`.

Más opciones avanzadas

Pa racaláʼdxiluʼ gánnaluʼ jma, biiyaʼ API .

HTML semántico

Estructura HTML jma sencillu stiʼ Gridzy nga:

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

Peru, Gridzy nabé flexible ni ne zanda iquiiñeluʼ casi guiráʼ xcaadxi estructura HTML. Nuu chupa chonna si cosa ni naquiiñeʼ guidúʼyanu:

Cada xiiñiʼ elementu contenedor ca runi representar ni ti cosa ni nuu lu cuadrícula.
Tantu elementu contenedor ne ca xiiñiʼ zanda gácacaʼ intiica clase etiqueta, casi ul ne li (cadi guiníʼ íqueluʼ pa zanda gusiáʼndaluʼ ca predeterminado stiʼ navegador).
Pa ti elementu img cadi ti xiiñiʼ directu laa, caquiiñeʼ clase gridzyImage .

Nga runi, laaca nuu ti estructura HTML ni runi dxiiñaʼ:

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

Ne jmaruʼ si pa racaláʼdxiluʼ gucaaluʼ subtítulo, caquiiñeluʼ ti estructura HTML avanzada. Para gánnaluʼ jma de laani, biiyaʼ Capciones & Skins .

Capítulos ne piel

Pa racaláʼdxiluʼ gucaaluʼ subtítulo lu galería stiluʼ, naquiiñeʼ gusiéneluʼ ximodo rihuinni ni. Nga runi, nuu caadxi piel ni maʼ guca predefinir. Cada skin ni napa ti archivu CSS. Caquiiñeʼ gucaaluʼ archivu riʼ además de ca archivu principal stiʼ Gridzy (ni jma riquiiñeʼ nga lu sección ni láʼ cabeza):

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

Ne laaca caquiiñeʼ gápaluʼ ti estructura 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>

Pa racaláʼdxiluʼ gánnaluʼ xi estructura napa HTML, biiyaʼ HTML semántico .

Para capítulo ca zanda iquiiñeluʼ intiica clase etiqueta, naquiiñeʼ si gúʼyaluʼ pa nápani clase gridzyCaption . img naquiiñeʼ guicaanu clase gridzyImage .

Ejemplu ni zeeda raríʼ rusihuinni ni xi gridzySkinClassic bizaaca. Para iquiiñeluʼ sti ladu, naquiiñeʼ si guchaaluʼ lá guidi ca né tobi de cani zeeda raríʼ:

Ca piel ni nuu ndaaniʼ ni

	Ca clase ni nuu
GridzyPielBlanco ti lugar galán para guzulú binni guni ti piel stiʼ . previsualización en vivo	`gridzySkinBlank`
gridzySkinClassic previsualización en vivo	`gridzySkinClassic` `gridzySkinClassicLight`(MAʼ qué riquiiñeʼ diʼ ni dede lu versión 2.6.0)
gridzySkinFullOverlay previsualización en vivo	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(MAʼ qué riquiiñeʼ diʼ ni dede lu versión 2.6.0)
gridzySkinLift previsualización en vivo	`gridzySkinLift` `gridzySkinLiftLight`(MAʼ qué riquiiñeʼ diʼ ni dede lu versión 2.6.0)
gridzySkinMagnifier cadi naquiiñeʼ diʼ gaca funcionar zoom . previsualización en vivo	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(MAʼ qué riquiiñeʼ diʼ ni dede lu versión 2.6.0)

Guiráʼ ca skin ni maʼ bizéʼtenu riʼ caquiiñeʼ si ti archivu CSS, peru nuu xcaadxi skin ni laaca caquiiñeʼ ti archivu JavaScript:

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

	Ca clase ni nuu
gridzySkinBlur qué runi dxiiñaʼ lu IE . previsualización en vivo	`gridzySkinBlur` `gridzySkinBlurLight`(MAʼ qué riquiiñeʼ diʼ ni dede lu versión 2.6.0)
gridzySkinCard previsualización en vivo	`gridzySkinCard` `gridzySkinCardLight`(MAʼ qué riquiiñeʼ diʼ ni dede lu versión 2.6.0)

Opciones de piel

Desde versión 2.6.0 nuu Opciones para configurar ca piel ni nuu ndaaniʼ ni. Dependiente de piel específica zanda gucaaluʼ color stiʼ fondo, color stiʼ texto ne sombra stiʼ texto. Caquiiñeʼ si iquiiñeluʼ ca propiedad personalizada stiʼ CSS casi rihuinni raríʼ:

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

Biiyaʼ ca variable ni racané ne ca valor predeterminado stiʼ cada piel raríʼ:

gridzySkinClassic

Variable	Valor predeterminado	Rudii información
`--background`	`rgba(0, 0, 0, .7)`	rudii lugar chuʼ xiixa valor de fondo CSS .
`--color`	`rgb(255, 255, 255)`	permite cualquier valor de color CSS .
`--text-shadow`	`none`	permite cualquier valor de texto-sombra CSS .

gridzySkinFullOverlay

Variable	Valor predeterminado	Rudii información
`--background`	`rgba(0, 0, 0, .7)`	rudii lugar chuʼ xiixa valor de fondo CSS .
`--color`	`rgb(255, 255, 255)`	permite cualquier valor de color CSS .
`--text-shadow`	`none`	permite cualquier valor de texto-sombra CSS .

gridzySkinLift

Variable	Valor predeterminado	Rudii información
`--background`	`rgba(0, 0, 0, .7)`	rudii lugar chuʼ xiixa valor de fondo CSS .
`--color`	`rgb(255, 255, 255)`	permite cualquier 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)`	permite cualquier valor de texto-sombra CSS .

gridzySkinMagnifier

Variable	Valor predeterminado	Rudii información
`--background`	`rgba(0, 0, 0, .7)`	rudii lugar chuʼ xiixa valor de fondo CSS .
`--color`	`rgb(255, 255, 255)`	permite cualquier valor de color CSS .

Cadi dxandíʼ diʼ --text-shadow

gridzySkinBlur

Variable	Valor predeterminado	Rudii información
`--background`	`rgba(0, 0, 0, .7)`	rudii lugar chuʼ xiixa valor de fondo CSS .
`--color`	`rgb(255, 255, 255)`	permite cualquier valor de color CSS .
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	permite cualquier valor de texto-sombra CSS .

gridzySkinCard

Variable	Valor predeterminado	Rudii información
`--background`	`rgba(0, 0, 0, 1)`	rudii lugar chuʼ xiixa valor de fondo CSS .
`--color`	`rgb(255, 255, 255)`	permite cualquier valor de color CSS .
`--text-shadow`	`none`	permite cualquier valor de texto-sombra CSS .

Guiráʼ ca skin ni maʼ guca predefinir ca racané si cani subtítulo de texto sencillu. Zanda gucaaluʼ ca piel stiluʼ ni jma risaca ne jma compleju. Biiyaʼ xi ná Estilo Gridzy .

Estilo Gridzy

Pa qué chuʼ ti piel ni maʼ guca predefinir ni caquiiñeluʼ, zanda gúniluʼ estilo stiluʼ.

Ni jma fácil nga primeru gúniluʼ copia stiʼ ti piel ni maʼ nuu ne guchaaluʼ ni modo caquiiñeluʼ. Ne laca bidxela gridzySkinBlank ti base galán ne zaqueca ti documentación galán ni nuu lu archivu 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;
}

Lu archivu CSS ca zadxeʼluʼ clase gridzySkinBlank , gridzyImage ne gridzyCaption . Gridzy laca laa qué riquiiñeʼ ca clase riʼ. Riquiiñeʼ si cani para gaca estilo ne zacá zanda cueeluʼ cani o guchaaluʼ lá cani pa racaláʼdxiluʼ.

Ne laaca zanda guidxélaluʼ clase CSS gridzyItem . Gridzy riguixhe clase riʼ automáticamente para guiráʼ xiiñiʼ directu stiʼ elementu principal stiʼ contenedor. Nga runi, zanda iquiiñeluʼ clase riʼ para gucaaluʼ estilo stiʼ ca cosa ni nuu lu galería stiluʼ.

Biiyaʼ ca cosa risaca .

Naquiiñeʼ guicá guiráʼ contenidu stiʼ artículo ca. Guníʼ ique pa dxandíʼ zuchaa tamañu stiʼ ca elementu ca. Biquiiñeʼ ca valor porcentual lugar de ca valor de píxel. Ne biiyaʼ opción de diseño stiʼ Gridzy autoFontSize , ni rucaa tamañu stiʼ letra ca lu tamañu stiʼ cuadru ra cá ca cosa ca.
Cada cosa naquiiñeʼ gapa ti relación de aspectu ni guihuinni chaahuiʼ. Qué ziuu dxi guchaa relación de aspectu stiʼ cosa ca ne caquiiñeʼ gaca cálculo stiʼ cuadrícula ca. Nga runi, pa ti cosa cadi automáticamente napa ti relación de aspectu ni maʼ guca definir, biʼniʼ predefinir ni manualmente (por ejemplo, pur css).

Nuu biaje, zándaca jma nagueenda zaca estilo stiʼ contenidu stiʼ ca cosa ca ante guzulú Gridzy. Cadi naquiiñeʼ si cueeluʼ clase gridzy o archivu javascript stiʼ Gridzy ti tiempu si para gúniluʼ ni.

¡Ngapeʼ nga ni! Nga nga guiráʼ ni caquiiñeluʼ para guzaʼluʼ xcuérpuluʼ. Stale de ca piel ni maʼ guca predefinir ca qué riquiiñecaʼ jma que ndiʼ.

Peru zanda chuʼ jma pa racaláʼdxiluʼ ...

Ca piel avanzada

Gridzy riquiiñeʼ jma clase CSS que gridzyItem si. Stale de laacani zaca configurar cani automáticamente ne zanda iquiiñeluʼ cani para gúniluʼ estilo laaca.

Clase principal stiʼ contenedor

Lá clase	Ximodo ni
`gridzy` para ganda gucaaluʼ ni manualmente .	Gridzy automáticamente ridxela ca elementu ni napa clase riʼ ne runi inicializar cani.
`gridzyAnimated`	Zaca ni automáticamente pa `true` opción `animate` . Pa guiaana clase riʼ manualmente, opción `animate` laaca zaca automáticamente `true` (excepto pa explícitamente guiaana ni `false` ).

Clase de artículo

Lá clase	Ximodo ni
`gridzyItem`	Zaca ni ora maʼ bizulú elementu ca procesu de inicialización. Qué ziuu dxi guiree ni.
`gridzyItemInitializing`	Zaca ni ora maʼ bizulú elementu ca procesu de inicialización. Zaca reemplazar ni pur `gridzyItemReady` ora maʼ guca inicializar guiráʼ ni. Cadi dxandíʼ diʼ maʼ bidxá guiráʼ ca imagen ca (biiyaʼ `gridzyItemLoading` ), sínuque maʼ nuu elementu ca listu para guihuinni.
`gridzyItemReady`	Zaca reemplazar `gridzyItemInitializing` ora maʼ bizulú guiráʼ ni. Qué ziuu dxi guiree ni. Cadi dxandíʼ diʼ maʼ bidxá guiráʼ ca imagen ca (biiyaʼ `gridzyItemComplete` ), sínuque maʼ nuu elementu ca listu para guihuinni.
`gridzyItemLoading`	Zaca ni ora maʼ bizulú elementu ca procesu de inicialización. Zaca reemplazar ni pur `gridzyItemComplete` ora maʼ guca cargar ca imagen ni nuu ndaaniʼ ni (ni jma riquiiñeʼ nga tobi si).
`gridzyItemComplete`	Zaca reemplazar `gridzyItemLoading` ora maʼ guca cargar ca imagen ni nuu ndaaniʼ ni (ni jma riquiiñeʼ nga tobi si). Qué ziuu dxi guiree ni.
`gridzyItemInitialToVisible`	Zaca ni ora maʼ bizulú bihuinni cosa ca primé biaje. Zaree ni ora maʼ biiyaʼ guidubi cosa que.
`gridzyItemVisible`	Zaca setar ni ora maʼ rihuinni guidubi cosa ca. Zaree ni ora maʼ bizulú binitilú cosa ca.
`gridzyItemVisibleToHidden`	Zaca setar ni ora maʼ bizulú binitilú cosa ca. Zaree ni ora maʼ guidubi naca cosa ca nagaʼchiʼ.
`gridzyItemHidden`	Zaca setar ni ora maʼ guidubi naca cosa ca nagaʼchiʼ. Zaree ni ora maʼ bizulú bihuinni cosa ca.
`gridzyItemHiddenToVisible`	Zaca ni ora maʼ bizulú bihuinni ni (excepto ora bihuinni ni primé biaje – biiyaʼ clase `gridzyItemInitialToVisible` ). Zaree ni ora maʼ biiyaʼ guidubi cosa que.
`gridzyItemVisibleToVisible`	Zaca ni ora maʼ bichaa xiixa lu cuadrícula que, peru artículo que si nga guca ne qué zaree diʼ ni. Zaree ni ora maʼ biluxe animación de cambiu.

Pur defectu, indicador de procesu ne ca animación para ca imagen ni rihuinni ne ni rirá, maʼ guca predefinir cani lu archivu CSS principal stiʼ Gridzy.

Ne ca clase CSS ni maʼ bizéʼtenu riʼ zanda gucaaluʼ estilo stiluʼ lu indicador de procesu ne lu ca animación stiluʼ. Biiyaʼ chaahuiʼ archivu CSS principal stiʼ Gridzy, para guiéneluʼ xi naquiiñeʼ gucaaluʼ. Cadi guidxíbiluʼ, guiráʼ ni cá lu documentu ca galán nuu raqué.

Biʼniʼ optimizar carga

Pa iquiiñeluʼ stale imagen, zanda gacaneluʼ Gridzy guni cuadrícula ca jma nagueenda.

Bicueeza saltar imagen .

Gridzy absolutamente caquiiñeʼ relación de aspectu stiʼ guiráʼ imagen para guni cálculo de cuadrícula. Ca hecho riʼ rucaacani ca elementu ni ruxooñeʼ pa nuu imagen listu ne nuu xcaadxi ni cadi nuu. Ra jma stale imagen nuu, jma zanda guniná efectu riʼ binni.

Para cadi gaca ni zacá, naquiiñeʼ si gucaaluʼ atributu width ne height para guiráʼ ca elementu img . Nabé risaca nga gucaacabe ca valor ni caquiiñeʼ para cada imagen, pa qué gúnicabe zacá, zaca distorsionar ca imagen ca. Ca valor ni dxandíʼ nga ancho ne altura original stiʼ cada imagen:

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

Despué zanda guni Gridzy cálculo stiʼ cuadrícula que nagueendaca sin caquiiñeʼ ganna pabiáʼ naroʼbaʼ ca imagen que.

Carga perezosa

Para ganda gucaaluʼ ca imagen si ni nuu lu vista visible, biʼniʼ ca cosa riʼ:

Bicaa ca atributu width ne height casi maca bizéʼtenu ca (biiyaʼ iquiiñeluʼ ca valor ni caquiiñeluʼ)
Bichaa guiráʼ ca atributu src né data-gridzylazysrc casi rihuinni raríʼ (pa nápaluʼ ca atributu srcset laaca, bichaa cani né 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>

Despué de ca pasu riʼ, zaca cargar ca imagen ca ora maʼ nuucaʼ gaxha o ndaaniʼ vista.

Indicador de proceso

Indicador de proceso ca nga icono animadu huiiniʼ ni rihuinni ora maʼ ziguxooñeʼ imagen ca. Pa iquiiñeluʼ subtítulos & skins , zuuyaluʼ indicador de procesu ca automáticamente. Pa qué gúniluʼ zacá, caquiiñeʼ guchaaluʼ caadxi cosa:

Bicaa cada elementu img lu ti elementu div .
(o lu intiica sti elementu – biiyaʼ HTML semántico para gánnaluʼ jma)
Bicaa clase gridzyImage lu cada elementu 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>

Despué de ngue naquiiñeʼ gúʼyaluʼ ca indicador de procesu pa ca imagen ca rindaa cani para guicá cani.

Filtru

Ca filtru ni nuu lu Gridzy ca nabé sencillu cani peru nadipaʼ cani. Intiica si clase filtru caquiiñeluʼ, nabé zanda gúniluʼ ni. Guiráʼ ni caquiiñeluʼ nga, ti ndaa CSS ne caadxi elementu de formulario HTML ...

Raríʼ zeeda ti ejemplu 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>

Bizáʼ ni pasu pur pasu .

1. Primé caquiiñenu estructura HTML ni maca biaa Gridzy ne gucaʼnu lá clase para guiráʼ ca cosa ni nuu lu galería ca ti ganda gúninu filtru despué .

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

Lu ejemplu riʼ riquiiñenu ti clase si para cada elementu. Peru laaca zanda gucaaluʼ stale clase para ti elementu si, pa naquiiñeʼ guidxela elementu ca pur stale filtru.

2. Despué riguʼnu caadxi botón ra zanda guchaʼnu ca filtru ca despué .

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

Lugar de ca botón ca, laaca zanda iquiiñeluʼ xcaadxi elementu stiʼ formulario casi cuadru de verificación, botón de radio, campo seleccionado ne xcaadxi cosa.

Casi ruuyuʼ lu dibuju riʼ, ca valor stiʼ ca botón ca nga ca selector CSS ni riquiiñeʼ binni. Ora maʼ biluxe biʼniʼ clicnu, ora gúninu clic lu ti botón casi laani, zuuyanu ca imagen ni racané selector CSS que. Técnicamente simplemente rúnibe opción filter que lu valor riʼ.

Laaca zanda iquiiñeluʼ selector ni jma nagana. Ti ejemplu :not(.animals) laaca zuni dxiiñaʼ, zaqueca .animals.people ne .animals, .people .

3. Últimu, biʼniʼ encapsularnu ca botón que ndaaniʼ ti contenedor div ne biʼniʼ enlazarnu cani lu galería Gridzy, ra biʼniʼ establecernu 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>

Casi ruuyuʼ lu dibuju riʼ, laaca riquiiñedu ti selector CSS para opción filterControls . Contenedor div ni napa atributo id ca racané si ni para cadi gaca nagana para binni cuiʼ ca botón ca pur selector CSS que.

¡Ngapeʼ nga ni!

Pa jma riuuláʼdxiluʼ ti solución JavaScript, biiyaʼ API .

API

Neca napa Gridzy API stiʼ, stale cosa zanda gaca sin laa, purtiʼ si runi manipular DOM. Gridzy zudii cuenta ni ne zuchaa cuadru que. Peru laaca nuu ti API nabé nadipaʼ ...

Biʼniʼ manipularbe DOM .

Para guiráʼ ca manipulación ni raca lu Modelo de Objeto de Documento (DOM) primeru caquiiñenu elementu ni láʼ contenedor:

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

Bicaa imagen

Nabé risaca nga gucuiluʼ guidubi naca ne guzaaniluʼ elementu cubi stiʼ xiiñiluʼ ante gucaaluʼ ni lu elementu contenedor. Pa qué gúnitu zacá, qué zanda diʼ guʼyaʼ Gridzy ca dimensión ni caquiiñeʼ.

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

Biree ca imagen ca

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

Bichaa ca opción ca

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

Más de modo guni manipularluʼ DOM zanda guidxélaluʼ ni lu ca documentu web stiʼ MDN . Laaca nuu ti Introducción stiʼ DOM ni zanda guidxélaluʼ.

API ni napa binni

Para ganda iquiiñenu API ca, primeru caquiiñenu instancia Gridzy, ni nuu listu para elementu contenedor Gridzy:

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

Gucuaa opción .

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

Biiyaʼ guiráʼ ni zanda gúniluʼ .

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

Biʼniʼ opción

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

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

Biquiiñeʼ filtru

Ora riquiiñenu ti filtru, naquiiñeʼ si gúninu filter de opción ni zanda gaca selector CSS válidu:

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

Bicaa ca función de llamada .

MAʼ qué riquiiñeʼ diʼ ni dede lu versión 2.4.0.
Biquiiñeʼ ca Eventos ni nuu yanna ne ni jma flexible lugar stini. Biiyaʼ sti ndaa ca para gánnaluʼ jma.

~~Gridzy.js 2 racané caadxi opción para ca función de llamada de vuelta. Zanda gucaacabe cani pur API propietariu si, peru cásica xcaadxi opción:~~

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

	~~Ximodo ni~~
~~`onBeforeOptionsChanged`~~	~~Función de llamada ni raca invocar directamente ante gucaacabe opción.~~
~~`onOptionsChanged`~~	~~Función de llamada ni raca invocar directamente despué de guca ajustar ca opción.~~
~~`onBeforeRender`~~	~~Función de llamada ni raca invocar directamente ante gaca renderizar.~~
~~`onRender`~~	~~Función de llamada ni raca invocar directamente despué de renderización.~~

Biquiiñeʼ ca eventu

dede lu versión 2.4.0.

Zanda iquiiñeluʼ ca eventu stiʼ Gridzy cásica riquiiñeluʼ ca eventu stiʼ JavaScript:

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

Caadxi eventu ni raca lu elementu contenedor Gridzy ne xcaadxi eventu ni raca lu cada tobi de ca elementu de artículo ni nuu ndaaniʼ elementu contenedor.

Ca eventu ni bizaaca lu elementu contenedor Gridzy:

	Ximodo ni
`gridzyBeforeInit`	Bizaaniʼ ante guzulú galería.
`gridzyInit`	Bizaaniʼ despué de guca inicializar galería.
`gridzyBeforeOptionsChanged`	Bizaaniʼ ante gucaaluʼ opción.
`gridzyOptionsChanged`	Bizulú despué de biʼniʼ ajustarbe opción.
`gridzyBeforeRender`	Bizaaniʼ ante guni renderizar.
`gridzyRender`	Fuegos despué de render.

Pa qué ganda gaca xiixa eventu raríʼ, biseendaʼ ti solicitud de apoyo .

event.target rudii elementu ni napa contenedor Gridzy.
event.detail.instance rudii instancia stiʼ Gridzy.

Eventu ni bizaaca lu ca elementu stiʼ artículo:

	Ximodo ni
`gridzyItemBeforeInit`	Bizaaniʼ ante guzulú artículo.
`gridzyItemInit`	Fuego despué de inicialización stiʼ artículo.
`gridzyItemLoading`	Bizulú ora bizulú biʼniʼ cargar artículo que.
`gridzyItemReady`	Bizulú ora maʼ nuu artículo que listu para gaca cálculo de cuadrícula. Nga runi, nánnacabe xi relación de aspectu napa imagen ca, peru zándaca caʼruʼ guiree imagen ca.
`gridzyItemComplete`	Bizulú ora maʼ bidxá imagen stiʼ artículo que.

Pa qué ganda gaca xiixa eventu raríʼ, biseendaʼ ti solicitud de apoyo .

event.target rudii ca elementu ni caquiiñeʼ.
event.detail.instance rudii ni ejemplu stiʼ Gridzy.

API – Global

Nuu caadxi función ni qué racané ca instancia stiʼ Gridzy. Nga runi, cadi caquiiñeʼ diʼ guicaanu ti instancia ante.

Biiyaʼ opción predeterminada .

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

Biiyaʼ guiráʼ ca opción ni nuu ante .

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

Biʼniʼ opción predeterminada .

Cadi dxandíʼ diʼ nga racané ca opción stiʼ guiráʼ ca instancia stiʼ Gridzy ni maʼ guca inicializar, sínuque laaca racané ni para gaca ca instancia nacubi. Peru pa ti opción stiʼ ti instancia ni maʼ nuu, zuni restablecer ni pur valor null , zaquiiñeʼ ni valor predeterminado cubi ca.

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

Zanda iquiiñeluʼ ni para gucaaluʼ opción lu guidubi naca Guidxilayú, pa guni llamarluʼ ni ante chuʼ DOM listu. Nga runi, maʼ cadi caquiiñeʼ diʼ gucaaluʼ ca opción ca casi atributu.

Automátismo

Ne dxi maʼ nuu guiráʼ automatismo stiʼ Gridzy.js 2 activu, cadi caquiiñeʼ diʼ ca método ni zeeda raríʼ. Peru ca automatismo ca zanda gucueezacabe cani para iquiiñecabe Gridzy de ti modo jma 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
});

Caadxi de ca opción riʼ qué zanda diʼ guiaana cani pur atributo data-gridzy- o pur setOptions() , purtiʼ nuu razón lógica:

	Valor predeterminado	Ximodo ni
`autoInitOnDomReady`	`true`	Biiyaʼ ca elementu ni napa clase `gridzy` ora maʼ ziguxooñeʼ página ne biʼniʼ inicializar cani. Zanda guchaaganu ni né `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Observador de mutación	`true`	Biiyaʼ ca elementu nacubi ni napa clase `gridzy` ora maʼ bihuinni cani lu DOM ne biʼniʼ inicializar cani. (casi ora iquiiñenu ca transición stiʼ página) Zanda guchaaganu ni né `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Observador de mutación	`true`	Biiyaʼ pa maʼ guca agregar o maʼ biree ca elementu ni napa xiiñiʼ (imagen), ne raca actualizar cuadrícula que automáticamente. Zanda guchaaganu ni né `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Definir pa ca atributo `data-gridzy-` ca nga ni jma riquiiñeʼ o pa coʼ. Pa `false` ni, zanda gucaaluʼ ca opción ca pur API propietariu si. Zanda guchaaganu ni né `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Observador de mutación	`true`	Biiyaʼ pa bichaa ca atributu stiʼ `data-gridzy-` , ne biʼniʼ actualizarbe cuadrícula que automáticamente. Laaca ruuyaʼ pa maʼ guca agregar o maʼ biree clase `gridzyAnimated` ne pa maʼ bichaa atributu `style` . Pa `useOptionAttributes` nga `false` , zuuyaʼ si ni cambiu stiʼ atributu `style` . Zanda guchaaganu ni né `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Observador de mutación	`true`	Biiyaʼ cambiu ni raca lu ca atributu stiʼ `class` stiʼ guiráʼ ca elementu ni napa xiiñiʼ (imagen). Relevante ni caníʼ de ca filtru ca. Zanda guchaaganu ni né `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Observador de mutación dede lu versión 2.5.0.	`true`	Detecta cambiu stiʼ ca atributo `src` stiʼ guiráʼ imagen. Relevante ora iquiiñeʼ ni né React o biblioteca casi laani. Zanda guchaaganu ni né `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Cambiar tamañu stiʼ observador dede lu versión 2.6.0.	`true`	Detecta cambiu ni raca lu ancho stiʼ elementu. Relevante ni caníʼ de diseño ni ricabi. (Ante gueeda versión 2.6.0 biquiiñecabe ti listener de evento ni ruchaa tamañu stiʼ ventana) Zanda guchaaganu ni né `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Bizulú ni manualmente .

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

Binduuxeʼ Instancia que .

Casi ñaca, contrariu de inicializar Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sincronizar lista de hijos manualmente .

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

Sincronizar ti elementu si ni napa xiiñiʼ manualmente .

Suele cadi caquiiñeʼ diʼ ni, sínuque lu caadxi caso nabé raru.

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

Sincronizar ca atributu ca manualmente

Biiyaʼ pa true na ca useOptionAttributes riʼ.

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

Renderización de fuerza

Suele cadi caquiiñeʼ diʼ ni, neca maʼ bicueezacabe guiráʼ automatismo .

gridzyInstance.render();

Plugin stiʼ WordPress

Biblioteca stiʼ JavaScript

Servicio