Ukax 2.x – Gridzy.Gallery ukan uñt’ayatawa

Sitio web ukax mä automáticamente jaqukipatawa. Kunas jan qhanäkchi ukhaxa, inglés arun qillqatanakap uñakiptʼañamawa.

Uso Básico ukax mä juk’a pachanakanwa

Gridzy ukan qillqatanakap servidor ukar apkatañamawa ukat sitio web ukar yapxatañamawa (jilapartx p’iqinchäwinkiwa):

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

HTML chimpu yapxataña (kawkhantix janchi t’aqax utjki):

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

¡Ukhamawa! Ukax mä taqpach funcionamiento uñacht’äwiwa. Janiwa extra initialización ukaxa wakiskiti.

Configuración ukaxa mä juk’a pachanakwa lurasi

Gridzy ukar wakicht’añax jasakiwa, atributos HTML ukak apnaqañakiw. Ukax mä opción sutinak data-gridzy- ukamp nayraqat uñt’ayañakiw wakisi. Ukhamarusa, spaceBetween uka amtawi utt’ayañatakixa, atributo data-gridzy-spaceBetween ukampikiwa yapxataña.

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

Jilïr Amtawinaka

	Ukax mä valor predeterminado satawa	Qillqawi
`animate`	`true`	Animaciones ukanakax apnaqañapati janicha uk amti kunapachatix cuadrícula ukax mayjt’ki ukhaxa (santi, kunapachatix ventana de navegador ukan tamap mayjt’ayaña jan ukax filtro ukar uñstayaña).
`layout`	`justified`	Uñstayata layout ukanaka qhananchaña. Gridzy.js 2 ukax pä mayj mayj uñstayañ yanapt’i `justified` ukat `waterfall` . Sapa mayniw parámetros adicionales de opción ukanipxi, ukax aka tabla ukanx jikxatasiwayi.
`filter`	`*`	Kawkïr uñacht’äwinakas uñacht’ayatäñapa uk amti. Kawkïr CSS-selector ukax aka chiqanx valor ukham apnaqasispa. Jilapachax `filterControls` tuqiw automáticamente utt’ayata (jutir ajlliñ uñakipt’aña). Uñakipt’añatakix Filtros ukanakaw utji
`filterControls`		Kawkïr elementos de forma ukanakas uñacht’awinak filtrañatakix apnaqasispa uk amti. Kawkïr CSS ajlliri, ukax HTML formulario elementos ukar ajlli, ukax aka chiqanx valor ukham apnaqasispawa. Uñakipt’añatakix Filtros ukanakaw utji
`autoConsiderScrollBars`	`true`	Barras de desplazamiento ukanakax uñstaspa jan ukax chhaqtaspa ukhax kuna anchos utji uk yatiñataki. Sapa kutiw `true` jaytañax wali askiwa jan ukax aka automatismo ukax jan walt’awinak utjayaspa.

Justified Ukaxa mä juk’a pachanakwa lurasi

	Ukax mä valor predeterminado satawa	Qillqawi
`autoFontSize`	`false`	Sapa caja ukan font-size propiedad ukarux automáticamente machaqar tukuyi, ukax nayrïr caja tamaparjamawa. Ukhamarusa, font-size ukax janiw qhanpach uñt’ayatäkiti.
`desiredHeight`	`190`	Elemento filanaka munata alturapa qhananchaña. Chiqpach alturaxa jakhthapitawa kunatixa utjki uka ancho ukatxa elementos ukanakaxa fila ukankiwa.
`hideOnMissingImage`	`true`	Jani apkatañjamäki uka uñacht’awinaka utjki uka cajas ukanaka imantaña.
`spaceBetween`	`4`	Elementos ukanakan jayankxatapa pixel ukan qhanañchi.
`lastRowAlign` ukat 2.3.0 versión ukatpacha	`justified`	Qhipa t’aqa sarnaqawi qhananchaña. Ukhamarusa, ukaxa `left` , `center` , `right` ukatxa `justified` .
`singleRowAlign` ukat 2.3.0 versión ukatpacha	`justified`	Mä sapa ch’iqa utjipanxa sarnaqawi qhanancharaki. Ukhamarusa, ukaxa `left` , `center` , `right` ukatxa `justified` .
~~`fillLastRow`~~ ~~ukat 2.1.0 versión ukatpacha~~	~~`true`~~	2.4.0 versión ukhatpach APSUÑATAKI ( 2.3.0 versión ukhatpach JANK’AKÄTAWA ) Uñacht’awinakaxa wakicht’atawa ukhamata qhipa filaxa sapa kuti taqpacha phuqantatäñapataki. Jumatix uñacht’awinak dinámicamente yapxatañ amtasksta ukhax wali askïspawa aka desactivar. Sapa filanakarux janiw kuna efectos aptkiti ( `fillSingleRow` uñakipt’aña ).
`fillSingleRow` ukat 2.1.0 versión ukatpacha	~~`true`~~	2.4.0 versión ukhatpach APSUÑATAKI ( 2.3.0 versión ukhatpach JANK’AKÄTAWA ) Mä filakiw utji, ukax uñacht’awinak wakicht’i, ukhamat filax sapa kuti taqpach phuqhantatañapataki. Ukax mä jan ukax pä uñacht’awikiw galería ukan utji, ukax wali askïspawa aka desactivación.

Waterfall Ukax mä juk’a pachanakanwa

	Ukax mä valor predeterminado satawa	Qillqawi
`autoFontSize`	`false`	Sapa caja ukan font-size propiedad ukarux automáticamente machaqar tukuyi, ukax nayrïr caja tamaparjamawa. Ukhamarusa, font-size ukax janiw qhanpach uñt’ayatäkiti.
`desiredWidth`	`250`	Columnanakan munat anchop qhanañchi. Chiqpach ancho ukaxa jakhthapitawa kunatixa utjki uka ancho ukatxa qhawqha columnas ukanakasa.
`hideOnMissingImage`	`true`	Jani apkatañjamäki uka uñacht’awinaka utjki uka cajas ukanaka imantaña.
`horizontalOrder`	`false`	Uñacht’ayiwa elementos ukanakaxa sapa columna ukanxa estrictamente mä elemento ch’iqa tuqiru ch’iqa tuqiru uskuta, ukatxa mayampi qalltaraki juk’ampi ch’iqa columna independiente kawkiri columna ukanxa juk’ampi chiqaru. Ukhamarusa elementos ukaxa sapa kutiwa columna ukanxa jisk’a alturampi uchatarakini.
`spaceBetween`	`4`	Elementos ukanakan jayankxatapa pixel ukan qhanañchi.
`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`.

Juk’amp nayrar sartañ amtanaka

Juk’amp nayrar sartañ amtanakatakix, API ukar uñakipt’añäni.

HTML semántico ukax mä juk’a pachanakanwa

Gridzy ukan HTML ukan sapuru lurawipax akawa:

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

Ukampirus Gridzy ukax wali flexible ukhamarak niyas yaqha HTML estructura apnaqañax wakisispawa. Mä qhawqha amuyunakakiw utji:

Sapa wawax elemento contenedor ukax mä yäw rejilla ukan uñacht’ayi.
Elemento contenedor ukat wawanakapax kuna kasta etiqueta ukhamäspawa, ul ukat li (ukax navegador ukan defaults ukar kutt’ayañ amtañamawa).
Mä elemento img ukax janiw directo wawakiti, ukax gridzyImage clase ukaruw munasi.

Ukhamat akax mä irnaqir HTML ukan lurawiparakiwa:

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

Yämas capciones ukanakamp yapxatañ munsta ukhax mä nayrar sartat HTML ukan estructura ukaw munasispa. Uka tuqit juk’amp yatxatañatakix Captions & Skins ukar uñakipt’añäni.

Capciones & Skins ukax mä juk’a pachanakanwa

Galería ukar leyendanak yapxatañ munsta ukhaxa, uñstawip qhanañchañamawa. Ukatwa, yaqhip nayraqat uñt’at ñik’utanakax utji. Sapa ñik’utax mä CSS qillqatan luratawa. Aka qillqatx Gridzy jach’a qillqatanakat sipanx yapxatañaw wakisi (jilapartx p’iqinchaw t’aqaruw uñt’ayasi):

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

Ukhamarus mä nayrar sartat HTML uñstayañaw wakisi:

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

HTML ukan lurawipat jiskt’asiñ munsta ukhax HTML Semántico ukar uñakipt’añamawa.

Capción ukatakix kunayman kasta etiqueta apnaqañax wakisispawa, ukakipkarakiw gridzyCaption clase ukax utjañapa. img elemento ukax gridzyImage uka clase ukaruw munasi.

Aka uñacht’awix uñacht’ayiw janchi gridzySkinClassic . Yaqha apnaqañatakixa, janchi sutixa akanakatxa mayampiwa turkañapa:

Ukhamaraki Skins

	Uñstayata Clases ukanaka
gridzySkinCh’uqi ch’uqi mä suma qalltawi mä pachpa janchi lurañataki jakkir nayrïr uñacht’äwi	`gridzySkinBlank`
gridzySkinClassic jakkir nayrïr uñacht’äwi	`gridzySkinClassic` `gridzySkinClassicLight`(2.6.0 versión ukhatpach JANIW UTJKITI)
gridzySkinFullOverlay jakkir nayrïr uñacht’äwi	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(2.6.0 versión ukhatpach JANIW UTJKITI)
gridzySkinLift jakkir nayrïr uñacht’äwi	`gridzySkinLift` `gridzySkinLiftLight`(2.6.0 versión ukhatpach JANIW UTJKITI)
gridzySkinMagnifier zoom lurawixa janiwa uñt’ayatakiti jakkir nayrïr uñacht’äwi	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(2.6.0 versión ukhatpach JANIW UTJKITI)

Taqi aka pata tuqinkir ñik’utanakax mä CSS qillqañakiw munapxi, ukampis yaqha ñik’utanakax utjarakiwa, ukax mä JavaScript qillqataw munasiraki:

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

	Uñstayata Clases ukanaka
gridzySkinBlur janiw IE ukan irnaqkiti jakkir nayrïr uñacht’äwi	`gridzySkinBlur` `gridzySkinBlurLight`(2.6.0 versión ukhatpach JANIW UTJKITI)
gridzySkinCard jakkir nayrïr uñacht’äwi	`gridzySkinCard` `gridzySkinCardLight`(2.6.0 versión ukhatpach JANIW UTJKITI)

Janchi tuqit ajllitanaka

Kunjamakitix versión 2.6.0 ukax Opciones ukanakaw utji configurar las piels incorporadas. Uka específico ñik’utaparjamaxa qhipa color, texto color ukat texto sombra ukanakaw utt’ayasispa. Ukax CSS ukan propiedades personalizadas ukanakamp apnaqañakiw wakisi kunjamatix akan uñjaski ukhama:

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

Uñakipt’añatakix yanapt’at variables ukat default valores sapa ñik’utanx akham uñakipt’añäni:

gridzySkinClassic

Variable ukhamawa	Ukax mä valor predeterminado satawa	Yatiyäwi
`--background`	`rgba(0, 0, 0, .7)`	kuna CSS ukan qhipa chimpunakaparux jaysaña
`--color`	`rgb(255, 255, 255)`	kuna CSS colores ukanakas jaysaña
`--text-shadow`	`none`	kuna CSS qillqat-ch’amanchawi chimpunak jaysaña

gridzySkinFullOverlay

Variable ukhamawa	Ukax mä valor predeterminado satawa	Yatiyäwi
`--background`	`rgba(0, 0, 0, .7)`	kuna CSS ukan qhipa chimpunakaparux jaysaña
`--color`	`rgb(255, 255, 255)`	kuna CSS colores ukanakas jaysaña
`--text-shadow`	`none`	kuna CSS qillqat-ch’amanchawi chimpunak jaysaña

gridzySkinLift

Variable ukhamawa	Ukax mä valor predeterminado satawa	Yatiyäwi
`--background`	`rgba(0, 0, 0, .7)`	kuna CSS ukan qhipa chimpunakaparux jaysaña
`--color`	`rgb(255, 255, 255)`	kuna CSS colores ukanakas jaysaña
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	kuna CSS qillqat-ch’amanchawi chimpunak jaysaña

gridzySkinMagnifier

Variable ukhamawa	Ukax mä valor predeterminado satawa	Yatiyäwi
`--background`	`rgba(0, 0, 0, .7)`	kuna CSS ukan qhipa chimpunakaparux jaysaña
`--color`	`rgb(255, 255, 255)`	kuna CSS colores ukanakas jaysaña

Aka ñik’utax janiw --text-shadow yanapt’kiti

gridzySkinBlur

Variable ukhamawa	Ukax mä valor predeterminado satawa	Yatiyäwi
`--background`	`rgba(0, 0, 0, .7)`	kuna CSS ukan qhipa chimpunakaparux jaysaña
`--color`	`rgb(255, 255, 255)`	kuna CSS colores ukanakas jaysaña
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	kuna CSS qillqat-ch’amanchawi chimpunak jaysaña

gridzySkinCard

Variable ukhamawa	Ukax mä valor predeterminado satawa	Yatiyäwi
`--background`	`rgba(0, 0, 0, 1)`	kuna CSS ukan qhipa chimpunakaparux jaysaña
`--color`	`rgb(255, 255, 255)`	kuna CSS colores ukanakas jaysaña
`--text-shadow`	`none`	kuna CSS qillqat-ch’amanchawi chimpunak jaysaña

Taqi nayraqat uñt’at ñik’utanakax sapuru qillqat qillqt’atanakarukiw yanapt’i. Jumax wali suma ukat juk’amp ch’amäki uka janchinak lurasma. Mä juk'a uñakipt'añatakix Style Gridzy .

Estilo Gridzy ukax mä juk’a pachanakanwa

Janitï nayratpach uñtʼatäki uka ñikʼutax munañanakamarjamäkchi ukhaxa, juma pachpaw estilomarux estilo lurasma.

Nayraqatax mä utjki uka ñik’ut copiaña ukat juma pachpaw munañamarjam lurañax wali ch’amawa. Uka predefinido skin gridzySkinBlank ukax mä suma fundamento ukhamarak mä suma documentación CSS archivo ukan churaspa:

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

CSS qillqatanx gridzySkinBlank , gridzyImage ukat gridzyCaption uka yatichäwinakaw jikxatasi. Gridzy pachpax janiw uka clasenakarux munaskiti. Jupanakax estilo ukatakik apnaqapxi ukat ukhamat apsuñ jan ukax sutip mayjt’ayañax munaschi ukhaxa.

Ukhamarus CSS clase gridzyItem ukan jikxatasi. Gridzy ukax aka clase ukax automáticamente taqi directo wawanakarux elemento principal contenedor ukaruw uñt’ayi. Ukhamarusa, aka clase ukampixa galería ukan yänakaparux estilo uñacht’ayaraksnawa.

Amuyun Wali wakiskir yänaka

Uka yänakan utjki ukax taqpach jaysañapawa. Amuyt’añäni, elemento tamapax chiqpachapuniw mayjt’ani. Sapa patakatx sapa patakatx pixel chimpunak apnaqañaw wakisi. Ukat Gridzy layout opción autoFontSize ukar uñakipt’añäni, ukax font-size ukax elemento caja tamaparuw chint’i.
Sapa yänakax mä suma qhananchata aspecto ratio ukaniñapaw. Uka yänakan aspecto ratio ukax janipuniw mayjt’kaniti ukatx rejilla ukar jakthapiñatakiw wakisi. Ukhamat mä yäx jan automáticamente mä suma uñt’at aspecto ratio ukanïkchi ukhax nayraqat uñt’ayañamawa manualmente (jan ukax css tuqi).

Yaqhip pachax Gridzy janïr qalltañkamax kunayman yänakan utjki ukanak estilo uñt’ayañax juk’amp jasakïspawa. Jasakiw gridzy clase jan ukax Gridzy javascript qillqat mä juk’a pachatakix ukatakix apsuñama.

¡Ukhamawa! Ukakiw juma pachpa janchim lurañatakix wakisi. Jilapart nayraqat uñt’at ñik’utanakax janiw juk’amp apnaqapkiti.

Ukampis jumatï munsta ukhajja, jukʼampiw utjaspa ...

Nayrar sartat Q’ara

Gridzy ukax juk’amp CSS clasenak apnaqi gridzyItem ukakipkarakiw apnaqi. Jilapart jupanakax automáticamente utt’ayatäniwa ukatx estilo ukatakix apnaqaraksnawa.

Jilïr Contenedor Clases ukanaka

Yatiqañ utan Sutipa	Qillqawi
`gridzy` amparampi utt’ayañataki	Gridzy ukax automáticamente elementos ukanak aka clase ukamp jikxati ukat qalltaraki.
`gridzyAnimated`	Ukax mäkiw utt'ayasini, ukax opción `animate` ukax `true` . Aka clase ukax amparampix utt’ayatawa, `animate` uka amtawix automáticamente `true` utjarakini (jan ukax qhanpachax `false` ukar uñt’ayatawa ).

Item Clases ukax mä juk’a pachanakanwa

Yatiqañ utan Sutipa	Qillqawi
`gridzyItem`	Ukaxa utt’ayatarakiniwa kunjamatixa uka yänakaxa qalltaña lurawi qalltaski ukhama. Janipuniw apsutäkaniti.
`gridzyItemInitializing`	Ukaxa utt’ayatarakiniwa kunjamatixa uka yänakaxa qalltaña lurawi qalltaski ukhama. `gridzyItemReady` ukampiw turkatasini, kunawsatix uka yänakax taqpach qalltatäki ukhaxa. Janiw uñacht’awinakax taqpach phuqhantat sañ munkiti ( `gridzyItemLoading` uñakipt’aña ), jan ukasti yänakax uñjañatak wakicht’atawa.
`gridzyItemReady`	`gridzyItemInitializing` lantintañapawa, kunawsatix yänakax taqpach qalltatäki ukhaxa. Janipuniw apsutäkaniti. Janiw uñacht’awinakax taqpach phuqhantat sañ munkiti ( `gridzyItemComplete` uñakipt’aña ), jan ukasti yänakax uñjañatak wakicht’atawa.
`gridzyItemLoading`	Ukaxa utt’ayatarakiniwa kunjamatixa uka yänakaxa qalltaña lurawi qalltaski ukhama. `gridzyItemComplete` ukampiw turkatasini, kunawsatix utjki uka jamuqanak (jilapartx mäkiw) taqpach phuqhantat ukhama.
`gridzyItemComplete`	`gridzyItemLoading` ukax lantintañapawa, kunawsatix utjki uka jamuqanak (jilapartx mäkiw) taqpach apkatata. Janipuniw apsutäkaniti.
`gridzyItemInitialToVisible`	Nayrïr kutiw uka yäx uñstañ qalltani ukhakiw utt’ayatäni. Uka yäx taqpach uñjatäxani ukhakiw apsutäni.
`gridzyItemVisible`	Uka yänakax taqpach uñjatäki ukhakiw utt’ayatäni. Uka yänakax chhaqtañ qalltani ukhakiw apsutäni.
`gridzyItemVisibleToHidden`	Uka yänakax chhaqtañ qalltani ukhakiw utt’ayatäni. Uka yänakax taqpach imantatäxi ukhakiw apsutäni.
`gridzyItemHidden`	Uka yänakax taqpach imantatäxi ukhakiw utt’ayatäni. Uka yäx uñstañ qalltani ukhakiw apsutäni.
`gridzyItemHiddenToVisible`	Ukax mäkiw uñstayatäni, kunawsatix yäx uñstañ qalltani ukhax (janiw nayrïr kuti uñstkiti – `gridzyItemInitialToVisible` clase uñakipt’aña ). Uka yäx taqpach uñjatäxani ukhakiw apsutäni.
`gridzyItemVisibleToVisible`	Kunas rejilla ukan mayjt’ayat ukhamakiw utt’ayatäni, ukampis uka yäx pachpaw utjäna ukat uñjkañaw qhiparani. Mayjt’awi animación tukuyatatxa apsutäxaniwa.

Ukhamarusa, lurawi uñacht’ayiriwa ukhamaraki animaciones uñstañataki ukhamaraki chhaqhayañataki uñacht’awinakaxa Gridzy jach’a CSS qillqatampi nayraqata uñt’ayatawa.

Aka nayraqat arsut CSS clasenakampix juma pachpaw proceso indicador ukat animaciones ukanakax estilo ukar uñtasit lurasispa. Gridzy jach’a CSS qillqatar uñakipt’añ atrevimiento, kuntix mayjt’ayañax wakiski uk amuyañataki. Janiw axsarañakiti, taqi kunas ukanx wali qillqt’atawa.

Optimizar Carga ukax mä juk’a pachanakanwa

Walja uñacht’awinak apnaqañax wali askïspawa Gridzy ukar yanapt’añax juk’amp jank’ak rejilla lurañataki.

Salto Imagenes ukanakat jark’aqasiña

Gridzy ukax chiqpachapuniw taqi uñacht’awinakan aspecto ratio ukax rejilla ukar jakthapiñatakix wakisi. Uka chiqawjanakax elementos saltas ukanakaruw puriyi, yaqhip uñacht’awinakax wakicht’atächi ukatx yaqhipanakax jan wakicht’atäkchi ukhaxa. Jukʼamp uñachtʼäwinakajj utjki ukhajja, uka efectojj jukʼamp chuym ustʼayaspawa.

Uka sarnaqäw jark’aqañatakix, taqi img elementonakatakix width ukat height atributos ukanakak uñt’ayañakiw wakisi. Sapa mayni uñacht’awinakatakix chiqap chimpunak utt’ayañax wali askiwa, jan ukhamäkaspa ukhax uñacht’awinakax mayjt’ayatarakispawa. Chiqapa chimpunakaxa nayraqata ancho ukhamaraki alturapa sapa mayni uñacht’awina:

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

Ukatx Gridzy ukax jank’akiw cuadrícula ukx jakthapispa, jan chiqpachan jach’a uñacht’äwinakap yatiñax wakiskiti.

Lazy Loading ukax mä juk’a pachanakanwa

Uñch’ukiñ chiqan utjki uka uñacht’awinakak apkatañatakix, aka lurawinakampiw phuqhañama:

width ukat height atributos ukanakamp chikancht’asiñamawa kunjamatix nayraqat qhanañchaski ukhamarjama (chiqap valores apnaqañax ch’amanchatawa) .
Taqi src atributos ukanakax data-gridzylazysrc ukamp turkañawa kunjamatix akham uñacht’ayaski ukhama ( srcset atributos ukanakax utjkchi ukhax data-gridzylazysrcset ukamp turkañawa ).

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

Uka lurawinak tukuyatatxa, uñacht’awinakax jak’an jan ukax manqhan uñjañ utar puriñkamaw apkatasini.

Proceso uñacht’ayiriwa

Proceso uñacht’ayiriwa jisk’a icono animado ukaxa uñstiwa kunapachatixa uñacht’awixa cargaski ukhaxa. Ukax captions & skins , ukax proceso indicador ukax automáticamente uñacht’ayatawa. Jan ukhamäkanixa, mä qhawqha mayjtʼäwinakaw wakisi:

Sapa img elemento ukarux mä elemento div ukar uchañawa
(jan ukax yaqha elemento ukar – juk’amp yatxatañatakix HTML semántico uñakipt’aña)
gridzyImage uka clase ukax sapa img elemento ukar yapxatatawa

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

Uka qhipatxa uñjañawa proceso indicadores ukaxa uñacht’awinakaxa mä tiempo apst’asiñapataki.

Filtros ukanaka

Gridzy ukan filtros ukanakax wali ch’amawa ukampis ch’amaniwa. Kunjam filtro munaschi, ukax wali amuyatawa, ukax amuyañjamawa. Taqi kunatix munaski ukax, mä juk’a CSS ukat mä qawqha elementos de formulario HTML ...

Akax mä funcional uñacht’äwiwa:

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

Ukax Paso a Paso Uñstayañani

1. Nayraqatax Gridzy ukan HTML ukan sapürunjam estructura ukaw munasispa ukatx taqi galería ukan yänakatakix clase sutinak uñt’ayañaw wakisi ukhamat qhipatx filtrañasataki

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

Aka uñacht’awinakanx sapa elemento ukatakix mä clase ukak apnaqapxta. Ukampis mä elemento ukatakix walja clases ukanakaw utt’ayatarakispa, uka elementox walja filtros tuqiw jikxatasiñapa.

2. Ukatxa mä qawqha botones ukanakaw yapxatasi, uka tuqiw filtros ukanakax mayjt’ayaraksna

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

Botones ukanakat sipansa, yaqha elementos de formulario ukanakamp apnaqaraksnawa, kunjamatix cuadros de verificación, radio botones, campos seleccionados ukat juk’ampinaka.

Kunjamtix uñjktanxa, uka chimpunakax CSS ajllirinakaw sapürunjam uñt’ayasi. Ukhama tukuyatatxa, ukham botón ukar ch’iqt’asax uka CSS ajllirimp chika uñacht’ayañapawa. Técnicamente ukax mäkiw filter opción ukax aka valor ukar uñt’ayi.

Ukhamaraki, juk’ampi ch’amäki uka ajllirinakampiwa apnaqaraksna. Amuyt’añataki :not(.animals) ukax irnaqarakispawa, ukhamarak .animals.people ukat .animals, .people .

3. Qhiparusti, mä div contenedor ukan botonanak encapsular ukat Gridzy galería ukar chint’aña, filterControls ukar uñt’ayasa:

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

Kunjamtix uñjktanxa, mä CSS ajlliñ apnaqaraktanwa filterControls uka amtawimpi. div contenedor ukax atributo id ukampiw uka CSS ajlliri tuqix botones ukanakar jan ch’amäñapatakix yanapt’i.

¡Ukhamawa!

JavaScript ukan mä solución ukar munaschi ukhax API ukar uñakipt’añamawa.

API

Gridzy ukax API ukax utjkchispas, jilpach lurawinakax jan ukampiw lurasispa, DOM ukar mayjt’ayañakiw wakisispa. Gridzy jupax uk uñjani ukat rejilla ukarux chiqañchani. Ukampis mä jach’a ch’aman API ukaw utjaraki ...

DOM ukar manipular luraña

Taqi Documento Objeto Modelo (DOM) manipulaciones ukatakix nayraqatax elemento contenedor ukaruw munapxta:

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

Uñacht’awinaka yapxataña

Wali askiw taqpach luraña ukat phuqt’ayaña machaq elemento wawa janïr elemento contenedor ukar yapxatkasa. Jan ukhamäkanixa Gridzy ukax janiw chiqap dimensiones ukanakax uñt’kaspati.

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

Imajinanaka apsuña

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

Mayjt’ayaña Amtawinaka

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

DOM ukar apnaqañat juk’amp yatxatañax MDN web docs ukan jikxatasi. Ukhamaraki DOM ukar uñt’ayañax utjarakiwa.

API propiedad ukax mä propiedad ukaniwa

API apnaqañatakix nayraqatax Gridzy instancia ukaruw munapxta, ukax Gridzy contenedor elemento ukar chint’atawa:

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

Opción ukar puriñkama

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

Taqi Amtañanak katuqañamawa

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

Ukaxa Opciones ukanaka utt’ayaña

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

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

Ukaxa Filtro ukampi luratawa

Mä filtro apnaqañax mä filter de opción ukar uñt’ayañakiw kunatix kuna chiqap CSS ajllirinakas utjaspa:

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

Callback Funciones ukanaka yapxataña

2.4.0 ukat jichhakamax JANK’AKÄTAWA
Uka lantix jichha pacha ukat juk’amp flexible Eventos ukanakamp apnaqañamawa. Jutïr tʼaqa uñjjattʼäta.

~~Gridzy.js 2 ukax mä qawqha amtawinak jawsañ lurawinakatak yanapt’i. Jupanakax API propiedad uka tuqikiw utt’ayasipxaspa, ukampis yaqha amtawinakjama:~~

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

	~~Qillqawi~~
~~`onBeforeOptionsChanged`~~	~~Callback función ukax chiqak jawsatawa janïr amtawinak utt’ayañkama.~~
~~`onOptionsChanged`~~	~~Función de llamadas ukax chiqak jawsatawa, ukax amtawinak utt’ayañ tukuyatat.~~
~~`onBeforeRender`~~	~~Callback función ukax chiqak jawsatawa janïr uñacht’ayañkama.~~
~~`onRender`~~	~~Callback función ukaxa jawsatawa chiqapa lurawi tukuyatatxa.~~

Eventos ukanak apnaqaña

ukat 2.4.0 versión ukatpacha

Gridzy ukan lurawinakap chiqpachapuniw JavaScript ukan lurawinakap apnaqañax wakisispa:

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

Yaqhip lurawinakax Gridzy elemento contenedor ukaruw phichhantapxi ukatx yaqha lurawinakax sapa elemento elementos ukaruw elemento contenedor ukanx phichhantapxi.

Gridzy elemento contenedor ukan phichhantat lurawinaka:

	Qillqawi
`gridzyBeforeInit`	Nina naktäwinak janïr galería qalltañkama.
`gridzyInit`	Galería qalltañ tukuyatat nina naktäwinaka.
`gridzyBeforeOptionsChanged`	Nina naktayaña janïra amtawinak utt’ayaña.
`gridzyOptionsChanged`	Nina naktayaña ukatsti amtawinak utt’ayaña.
`gridzyBeforeRender`	Nina naktayaña janïra rendering.
`gridzyRender`	Nina naktayaña ukatsti render.

Aka chiqan kuna wakichäwinakas jan utjkchi ukhax mä yanapt’äw mayiw apayanipxsma .

event.target Gridzy uka elemento contenedor ukaruw uñt’ayi.
event.detail.instance ukax Gridzy ukan uñacht’ayatawa.

Eventos ukanakax elementos elementos ukan phichhantatawa:

	Qillqawi
`gridzyItemBeforeInit`	Nina naktayaña janïra elemento qalltaña.
`gridzyItemInit`	Nina naktayaña ukatsti elemento qalltaña.
`gridzyItemLoading`	Nina naktayaña kunapachatixa yänakaxa carga qalltaski ukhaxa.
`gridzyItemReady`	Nina naktayaña kunapachatixa yänakaxa wakicht’ata rejilla jakhthapiñataki. Ukhamat aspecto ratio uñt’atawa, ukampis uñacht’awix wali cargañjamawa.
`gridzyItemComplete`	Nina naktayaña kunapachatixa yänaka uñacht’awixa taqpacha phuqhata.

Aka chiqan kuna wakichäwinakas jan utjkchi ukhax mä yanapt’äw mayiw apayanipxsma .

event.target sapa mayni elemento elemento ukar uñt’ayi.
event.detail.instance ukax Gridzy ukan uñacht’ayatawa.

API – Uraqpachan uñt’ayata

Mä qawqha lurawinakaw utji, ukax Gridzy instancias ukanakat independiente ukhamawa. Ukhamajj janiw nayrajj mä instancia jikjjatañajj wakiskiti.

Ukax Default Opción ukankiwa

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

Taqi Default Opciones ukanaka katuqaña

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

Uñstayaña Default Opciones ukanaka

Akax janiw taqi nayraqat qalltata Gridzy instancias ukan amtawinakap uñt’aykiti, jan ukasti machaq instancias ukanakatakix base ukar uñt’ayi. Ukampirus, mä utjki uka instancian mä amtawix null valor tuqimp kutt’ayatäspa ukhax machaq valor predeterminado ukampiw apnaqasispa.

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

Ukax uraqpachan amtawinak utt’ayañatakiw apnaqasispa, janïr DOM wakicht’atäkipanx jawst’añamawa. Ukhamajj janiw jukʼamp opciones ukanakar atributos ukham uttʼayañajj wakiskaspati.

Automatismos ukanaka

Kunjamakitix taqi automatismos de Gridzy.js 2 ukax activo ukhamawa, janiw aka amparamp lurat lurawinakax wakiskiti. Ukampis automatismos ukanakax Gridzy ukar juk’amp nayra saräwin apnaqañatakix jist’antatäspawa:

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

Yaqhipa amtawinakax janiw atributos data-gridzy- tuqi jan ukax setOptions() tuqi utt’ayatäkaspati, kunatix razones lógicas ukanakaw utji:

	Ukax mä valor predeterminado satawa	Qillqawi
`autoInitOnDomReady`	`true`	Elementos ukanakax clase `gridzy` ukampiw página carga ukanx uñt’ayasi ukatx qalltaraki. `Gridzy.setDefaultOptions()` tuqiw utt’ayasi.
`autoInitOnDomMutation` MutaciónObserver ukax mä juk’a pachanakanwa	`true`	Machaq elementos ukanakax clase `gridzy` ukampiw uñt’ayasi, kunawsatix DOM ukan uñstki ukhamarak qalltaraki. (jan ukax panka mayjt’awinak apnaqañ tuqita) `Gridzy.setDefaultOptions()` tuqiw utt’ayasi.
`autoSyncChildListMutation` MutaciónObserver ukax mä juk’a pachanakanwa	`true`	Wawa elementos (imagenes) ukanakax yapxatatäpachati janicha uk yatiñawa, ukatx rejilla ukarux automáticamente machaqar tukuyi. Ukax `data-grizy-` tuqiw utt’ayasi, `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Ukax `data-gridzy-` atributos ukanakax taqpachan apnaqatäpachati janicha uk qhanañchi. Ukax `false` amtawinakax API propiedad uka tuqikiw utt’ayasispa. `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` uka tuqiw utt’ayasispa.
`autoSyncAttributesMutation` MutaciónObserver ukax mä juk’a pachanakanwa	`true`	`data-gridzy-` atributos ukan mayjt’awinakapat uñt’ayi, ukatx rejilla ukarux automáticamente machaqar tukuyi. Ukhamaraki `gridzyAnimated` clase ukax yapxatatawa jan ukax apsutawa ukat atributo `style` ukax mayjt’ayatawa. `useOptionAttributes` ukax `false` , ukax `style` atributo mayjt’awinakak uñt’ayi. Ukax `data-grizy-` tuqiw utt’ayasi, `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutaciónObserver ukax mä juk’a pachanakanwa	`true`	Taqi wawa elementonakan (imajinanaka) atributos de `class` ukan mayjt’awinakap uñt’ayi. Filtros ukanakatxa wakiskiri. Ukax `data-grizy-` tuqiw utt’ayasi, `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutaciónObserver ukax mä juk’a pachanakanwa ukat 2.5.0 versión ukatpacha	`true`	Taqi uñacht’awinakan atributos `src` ukan mayjt’awinakap uñt’ayi. React jan ukax ukar uñtasit bibliotecas ukanakamp apnaqatäki ukhax wakiskiriwa. Ukax `data-grizy-` tuqiw utt’ayasi, `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver ukax mä juk’a pachanakanwa ukat 2.6.0 versión ukatpacha	`true`	Elemento ancho ukan mayjt’awinakapat uñt’ayi. Diseño responsivo uka tuqita wakiskiri. (Janïr versión 2.6.0 ukax mä ventana tama mayjt’ayañ evento ist’iriw apnaqatäna) Ukax `data-grizy-` tuqiw utt’ayasi, `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Manualmente qalltaña

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

Instancia ukar t’unjaña

Mä juk’a arsutaxa, Gridzy ukar qalltañat sipanx mayjawa.

gridzyInstance.destroy();
gridzyInstance = null;

Wawa Lista Manualmente sincronización luraña

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

Mä sapa Wawa Elemento Manualmente sincronización luraña

Jilapachax janiw wakiskiti, jan ukasti wali juk’akiw utji.

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

Atributos ukanakax Manual ukamp sincronizatawa

Qhanacht’añatakix useOptionAttributes ukax true ukatakix.

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

Ch’amampi Uñacht’ayaña

Jilapachax janiw wakiskiti, taqi automatismos ukanakax jist’antatäkchisa

gridzyInstance.render();

WordPress ukax mä plugin ukhamawa

JavaScript ukax mä biblioteca ukhamawa

Sirwisyu

Versión 2.x ukan uñt’ayata