Version 2.x – Gridzy.Gallery

Website ne juloko gire gire. Ka lembe moko nen ungo maleng, nen waraga mi dhok mi Ingresa.

Tic ma yot

Med Gridzy files i server peri man imed gi i website peri (pol kare i thenge ma malu):

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

Med HTML code (kabedo moku ci i thenge mi kum):

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

Eni kende! Eni ubedo lanyuth maber. Lembe mukende ma juyenyo epe.

Yub

Yo mayot mi yubu Gridzy utiye, ni tiyo ku HTML kende. Umitu iketh nying lembe ma ibemito kende ku data-gridzy- . Pieno, mi ketho spaceBetween option, med attribute 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>

Yore madongo

	Piny ma pire tek	Lanyuth
`animate`	`true`	Ngiyo ka nyo jubi tiyo ku animation ka grid ulokore (lapor, ka loko dit pa window pa browser nyo ka ju ketho filter).
`layout`	`justified`	Nyuthu layout ma jutiyo kudu. Gridzy.js 2 kony layout ario matung tung `justified` man `waterfall` . Kubang acel acel utiye ku lembe pare ma jumedo, ma icopo nwangu piny pa table eni.
`filter`	`*`	Ngiyo cal makani ma umitu junyuth. CSS-selector moko ci jucopo tiyo kudu calu wel kany. Pol kare juyike kende kende nikadhu kud i `filterControls` (nen lembe mukende). Nen Filters
`filterControls`		Ng'eyo kit piny ango ma juromo tiyo kudu pi poko cal. CSS selector moko ci, ma yero HTML form elements, jucopo tiyo kudu calu wel keni. Nen Filters
`autoConsiderScrollBars`	`true`	Mi ngeyo lac ma tiye ka scroll bars nen nyo rwinyo. Jubekwayi kare ku kare ni weko iwi `true` kawang ma automatism eni ukelo peko.

Justified Layout Options

	Piny ma pire tek	Lanyuth
`autoFontSize`	`false`	Edwoko rwom pa font pa sanduku acel acel nimakere ku dit pa sanduku macon. Ku lageng, font-size property juketho ngo maleng.
`desiredHeight`	`190`	Nyuthu bor pa piny ma mitere. Bor mandha jubi kwanu nimakere ku lac ma tiye man piny ma ni i rwom.
`hideOnMissingImage`	`true`	Umu sanduku ma tye ku cal ma jucopo ketho ngo.
`spaceBetween`	`4`	Nyuthu bor pa piny i pixels.
`lastRowAlign` nicaku i version 2.3.0	`justified`	Nyuthu kura pa dul ma tok cen. Piny ma juyiyu utiye `left` , `center` , `right` man `justified` .
`singleRowAlign` nicaku i version 2.3.0	`justified`	Nyutho kura ka nyo rwom acel kende utiye. Piny ma juyiyu utiye `left` , `center` , `right` man `justified` .
~~`fillLastRow`~~ ~~nicaku i version 2.1.0~~	~~`true`~~	JUKWONYE nicaku i version 2.4.0 (DEPRECATED since version 2.3.0 ) Keth cal kara dul ma tok cen ubed ma pong. Ka imito medu cal ma loko loko, ecopu bedu paru maber mi juku tic eni. Etimo ngo adwogi ikum dul acel acel (nen `fillSingleRow` ).
`fillSingleRow` nicaku i version 2.1.0	~~`true`~~	JUKWONYE nicaku i version 2.4.0 (DEPRECATED since version 2.3.0 ) ~~Ka rwom acel kende utiye, eketho cal ne kara rwom ne upong kare ku kare. Ka ecopu timere nia ibedo ku cal acel nyo aryo kende i gallery, ecopu bedu paru maber mi juku tic eni.~~

Waterfall Layout Options

	Piny ma pire tek	Lanyuth
`autoFontSize`	`false`	Edwoko rwom pa font pa sanduku acel acel nimakere ku dit pa sanduku macon. Ku lageng, font-size property juketho ngo maleng.
`desiredWidth`	`250`	Nyuthu lac pa columns ma mitu. Lat ma andha jubi kwanu nimakere ku lat ma tiye man wel pa columns.
`hideOnMissingImage`	`true`	Umu sanduku ma tye ku cal ma jucopo ketho ngo.
`horizontalOrder`	`false`	Nyuthu nia piny eca juketho piny acel kende i dul acel acel nicaku yor acam nitundo yor acam, man ecaku kendu i dul ma yor acam ulokere ku dul kani ma utiye kabedo madwong. Ku lageng, piny eca bibedo kare ku kare i column ku bor ma nok.
`spaceBetween`	`4`	Nyuthu bor pa piny i pixels.
`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`.

Lembe mukende ma malu

Pi lembe mukende ma malu, nen API .

Semantic HTML

Kit HTML mayot pa Gridzy utiye eni:

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

Ento, Gridzy utiye piny ma yot man icopo tiyo ku HTML moko ci. Lembe manok kende utiye ma umitu ipar:

Nyathin acel acel pa piny ma jucwalo nyuthu piny acel i grid.
Lembe mi container man awiya pare copo bedu kit tag moko ci, calu ul ku li (nen kende ni dwoko browser defaults).
Ka piny moko ma img epe nyathin kende, emito gridzyImage .

Dong eni de ubedo kit HTML ma tiyo:

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

Mandha tek imito medu wi lembe, umitu ibed ku kit HTML maber. Pi ningeyo lembe madwong ikume, nen Captions & Skins .

Wi lembe man adila

Ka imito medu wi lembe i gallery peri, umitu iket nen pa piny. Pieno, adila moko ma juyiko con utiye. Skin acel acel utiye ku CSS file. Umitu imed fail eni ikum fail madongo pa Gridzy (pol kare i thenge mi wi):

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

Man de, umitu ibed ku kit HTML ma malu:

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

Ka ibeno paru ikum kit ma HTML nen kudu, nen Semantic HTML .

Pi wi lembe icopo tiyo ku kit tag moko ci, nen nia etiye ku gridzyCaption . img element mito kilasi gridzyImage .

Lanyuth malu eni nyuthu iri adila gridzySkinClassic . Mi tiyo ku mange, lok kende nying adila ku acel ikin gi:

Adila ma juketho i iye

	Kilasi ma nwang
gridzySkinBlank kabedo maber mi caku pi yubu adila peri giri neno kwo	`gridzySkinBlank`
gridzySkinClassic neno kwo	`gridzySkinClassic` `gridzySkinClassicLight`(DEPRECATED since version 2.6.0)
gridzySkinFullOverlay neno kwo	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(DEPRECATED since version 2.6.0)
gridzySkinLift neno kwo	`gridzySkinLift` `gridzySkinLiftLight`(DEPRECATED since version 2.6.0)
gridzySkinMagnifier tic mi zoom epe neno kwo	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(DEPRECATED since version 2.6.0)

Lembe ma malu eno zo mitu CSS file kende, ento lembe mukende de utiye ma mitu JavaScript file:

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

	Kilasi ma nwang
gridzySkinBlur timo ngo tic i IE neno kwo	`gridzySkinBlur` `gridzySkinBlurLight`(DEPRECATED since version 2.6.0)
gridzySkinCard neno kwo	`gridzySkinCard` `gridzySkinCardLight`(DEPRECATED since version 2.6.0)

Kit adila

Nicaku i version 2.6.0 utiye ku yore moko mi ketho adila ma juketho i iye. Nimakere ku adila peri, icopo ketho rangi mi ngeye, rangi pa lembe man tipo pa lembe. Umitu iti ku CSS kende kende ma nen keni:

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

Nen lembe ma jukonyo man wel ma juketho pi adila acel acel keni:

gridzySkinClassic

Piny ma loko loko	Piny ma pire tek	Lembe angeya
`--background`	`rgba(0, 0, 0, .7)`	yio wel pa CSS moko ci
`--color`	`rgb(255, 255, 255)`	yio rangi pa CSS moko ci
`--text-shadow`	`none`	yio wel pa CSS moko ci

gridzySkinFullOverlay

Piny ma loko loko	Piny ma pire tek	Lembe angeya
`--background`	`rgba(0, 0, 0, .7)`	yio wel pa CSS moko ci
`--color`	`rgb(255, 255, 255)`	yio rangi pa CSS moko ci
`--text-shadow`	`none`	yio wel pa CSS moko ci

gridzySkinLift

Piny ma loko loko	Piny ma pire tek	Lembe angeya
`--background`	`rgba(0, 0, 0, .7)`	yio wel pa CSS moko ci
`--color`	`rgb(255, 255, 255)`	yio rangi pa CSS moko ci
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	yio wel pa CSS moko ci

gridzySkinMagnifier

Piny ma loko loko	Piny ma pire tek	Lembe angeya
`--background`	`rgba(0, 0, 0, .7)`	yio wel pa CSS moko ci
`--color`	`rgb(255, 255, 255)`	yio rangi pa CSS moko ci

Adila eni kony --text-shadow

gridzySkinBlur

Piny ma loko loko	Piny ma pire tek	Lembe angeya
`--background`	`rgba(0, 0, 0, .7)`	yio wel pa CSS moko ci
`--color`	`rgb(255, 255, 255)`	yio rangi pa CSS moko ci
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	yio wel pa CSS moko ci

gridzySkinCard

Piny ma loko loko	Piny ma pire tek	Lembe angeya
`--background`	`rgba(0, 0, 0, 1)`	yio wel pa CSS moko ci
`--color`	`rgb(255, 255, 255)`	yio rangi pa CSS moko ci
`--text-shadow`	`none`	yio wel pa CSS moko ci

Skins ceke ma juyiko con cwaku lembe ma yot kende. Icopo yubu adila peri giri man ma tek. Kwayu nen Style Gridzy .

Style Gridzy

Ka adila moko ope ma rwate ku yeny peri, icopo yubu adila peri giri.

Yo mayot uloyu utiye ni caku lubo adila ma con man ilok kudu ni mitu peri giri. gridzySkinBlank ma juyiko con copo mio the lembe maber man bende waraga maber i CSS file:

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

I CSS file ibinwango dul gridzySkinBlank , gridzyImage man gridzyCaption . Gridzy en gire emito ngo ponji eni. Gitiyo kudu pi yubu kende kende man icopo kwanyu nyo loko nying gi kani imito.

Mi medo, ibinwangu CSS class gridzyItem . Gridzy ketho kilasi eni kende kende ni awiya pa piny ma pire tek. Dong, icopo tiyo ku kilasi eni ni ketho piny peri i gallery peri.

Keth wii ikum piny ma pire tek

Piny ma nwang i iye umaku ubed maber. Keth i wii nia dit pa piny bi lokore andha. Ti ku wel pa percentage kakare pa wel pa pixel. Man nen Gridzy layout option autoFontSize , ma mako dit pa coc ikum dit pa sanduku pa piny.
Piny acel acel umaku obed ku rwom maber. Aspect ratio pa piny ne bi lokore ngo man mitere pi kwanu grid. Ka piny moko epe ku aspect ratio maber, yub kudu giri (e.g. nikadhu kud i css).

I kare moko, ecopu bedu yot ni loko lembe ma nwang i piny ma podi Gridzy ucaku ngo. Kwany kende gridzy mi kilasi nyo Gridzy javascript file pi kare manok pi timo eni.

Eni kende! Eni kende re ma mitire pi yiku adila peri giri. Pol pa adila ma juyiko con tiyu ngo ku piny madwong uloyu.

Ento ecopu bedu mukende kan imito ...

Advanced Skins

Gridzy tiyo ku CSS mapol makadhu gridzyItem kende. Pol migi jubi kethe giri man icopo tiyo kudgi pi yubu rangi de.

Kilasi madongo mi container

Nying ot kwan	Lanyuth
`gridzy` ni ketho ku cing	Gridzy nwangu piny ku kilasi eni man ecaku gi.
`gridzyAnimated`	Jubikethe kende kende ka option `animate` utiye `true` . Ka kilasi eni juyike ku cing, yub mi `animate` de bibedo `true` (muweko ka juyike ni `false` ).

Kilasi mi piny

Nying ot kwan	Lanyuth
`gridzyItem`	Jubikethe ndhundhu ka piny ucaku tic. Jubiwothe ngo.
`gridzyItemInitializing`	Jubikethe ndhundhu ka piny ucaku tic. Jubikethe ku `gridzyItemReady` ndhundhu ka piny ne ucaku tic. Nyuthu ngo nia cal upong (nen `gridzyItemLoading` ), ento piny utimbre pi nen.
`gridzyItemReady`	Ebi loko `gridzyItemInitializing` ndhundhu ka piny ne ucaku tic. Jubiwothe ngo. Nyuthu ngo nia cal upong (nen `gridzyItemComplete` ), ento piny utimbre pi nen.
`gridzyItemLoading`	Jubikethe ndhundhu ka piny ucaku tic. Jubikethe ku `gridzyItemComplete` ndhundhu ka cal ma iye (pol kare acel kende) upong.
`gridzyItemComplete`	Biloko `gridzyItemLoading` ndhundhu ka cal ma nwang i iye (ma pol kare acel kende) upong. Jubiwothe ngo.
`gridzyItemInitialToVisible`	Jubikethe ndhundhu ka piny ucaku wok wang mir acel. Jubiwodho woko ndhundhu ka piny ne nen maleng.
`gridzyItemVisible`	Jubikethe ndhundhu ka piny ne nen maleng. Jubiwodho woko ndhundhu ka piny ne ucaku rweny.
`gridzyItemVisibleToHidden`	Jubikethe ndhundhu ka piny ne ucaku rweny. Jubiwothe woko ndhundhu ka piny ne ungwere zo.
`gridzyItemHidden`	Jubikethe ndhundhu ka piny ne ungwere zo. Jubiwodho woko ndhundhu ka piny ne ucaku wok.
`gridzyItemHiddenToVisible`	Jubikethe ndhundhu ka piny ucaku wok (muweko wok wang mir acel – nen `gridzyItemInitialToVisible` ). Jubiwodho woko ndhundhu ka piny ne nen maleng.
`gridzyItemVisibleToVisible`	Jubikethe ndhundhu ka piny moko i grid ulokore, ento piny ne gire ubedo man edong nen. Jubiwodho woko ndhundhu ka animation mi aloka loka uthum.

Ku lageng, lanyuth pa tic man cal ma nen man ma rweny juyike con ku Gridzy main CSS file.

Ku CSS classes ma juweco pigi malu eni icopo yubu process indicator peri man animations peri. Nen i Gridzy main CSS file, mi nyang ango ma umitu ilok. Kud lworo, lembe ceke jukiewo maber keca.

Kethu piny maber

Ka itiyo ku cal madwong, ecopu bedu paru maber mi konyo Gridzy ni yubu grid pio pio.

Geng cal ma wok

Gridzy mitu aspect ratio pa cal zo pi kwanu grid. Lembe eni kelo aloka loka ka cal moko utiye atera man mukende epe. Ka cal ubedo madwong, adwogi eni copo bedu marac.

Mi jwigo kura eni, ket kende kende width man height pa piny img zo. Ber ni ketho wel maber pi cal acel acel, tek epe cal ne copo bedo marac. Wel ma atira utiye lac man bor pa cal acel acel:

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

I ngeye Gridzy copo kwanu grid pio pio labongo ngeyo dit pa cal.

Lazy Loading

Mi ketho cal kende ma nen i viewport, lubo lembe ma e:

Med width man height piny calu ma jukoro malu (nen nia itiyo ku wel ma atira)
Lok src attributes ceke ku data-gridzylazysrc calu ma ju nyuthu piny eno (ka itiye ku srcset attributes de, lok gi ku 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>

I ngei timo lembe eni, cal eca bi wok nyathotho ka gini kago nyo i iye pa viewport.

Lanyuth pa yub

Lanyuth pa tic ubedo lanyuth ma nok ma nen ikare ma cal ubekadhu. Ka itiyo ku wi lembe & adila , lanyuth pa tic bi nyuthiri gire. Ka epe, imito aloka loka moku:

Keth img acel acel i div element
(nyoke i piny moko ci – nen semantic HTML pi lembe mukende)
Med kilasi gridzyImage i img element acel acel

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

I ngeye, umitu inen lanyuth pa tic ka cal ne tero kare mi wok.

Filters

Filters in Gridzy utiye yot ento tek. Kadi bed ni filter ango ma imito, ecopu bedu nya ecopu timere. Gin ma imito kende ubedo, CSS manok man HTML form elements manok ...

Eni ubedo lanyuth maber:

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

Wek wagere rwom ku rwom

1. Mir acel umitu wabed ku HTML structure pa Gridzy man wabed ku nying mi kilasi pi piny ceke mi gallery kara wabed ku copo mi filter gi i ngeye

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

I lapor eni watiyo ku dul acel kende pi piny acel acel. Ento icopo ketho kilasi madwong pi piny acel, tek piny ne nwangire nikadhu kud i filter madwong.

2. I ngeye wamedo button moko ma wacopo loko kudu filters

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

Kakare pa buttons, icopo tiyo ku piny mukende ma calu checkboxes, radio buttons, select fields man mange mapol.

Nen kende, wel pa buttons ubedo CSS selectors. Ka dong wathum, dii iwi bute ma kumeno bi nyuthu cal ma rwate ku CSS selector. I yore mi ryeko, eketho filter option ni wel eni.

Icopo tiyo ku selectors mapol ma tek. Ku lapor :not(.animals) copo tiyo de, calu .animals.people man .animals, .people .

3. Mir ajiki, wa ketho buttons i div container man wa bid gi i Gridzy gallery, ni ketho filterControls option:

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

Nen kende, wabe tiyo ku CSS selector pi filterControls option. div container ku id attribute tiyo kende ni ketho buttons bedo yot ni yero nikadhu kud i CSS selector.

Eni kende!

Ka imito tiyo ku JavaScript, nen API .

API

Kadi bende Gridzy utiye ku API pare gire, lembe madwong copu timere manangu epe, kende kende ni loko DOM. Gridzy bineno man ebi loko grid. Ento tiye ku API ma tek mandha ...

Tiyo ku DOM

Pi lembe ceke ma jutimo i Document Object Model (DOM) wamito acaki ni container element:

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

Med cal

Piretek ni yubu man ni pongu piny manyen ma nyathin mapodi imedu ngo i container element. Ka epe Gridzy copo nwangu ngo dit pa piny.

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

Woth cal

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

Lok lembe

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

Lembe mukende ikum loko DOM icopo nwangu i MDN web docs . Man de lembe mi acaki pa DOM utiye.

API ma pire tek

Mi tiyo ku API, umitu wabed ku Gridzy instance, ma ucungo ikum Gridzy container element:

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

Nwang yore

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

Nwang yore zo

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

Keth lembe ma imito

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

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

Ti ku Filter

Tiyo ku filter ubedo kende kende ketho filter ma copo bedu CSS selector moko ci maber:

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

Med tic mi lwongo

JUKWODO woko nicaku i version 2.4.0
Ti ku Events ma kawoni man ma yot. Nen dul ma lubo pi lembe mukende.

~~Gridzy.js 2 konyowa ku lembe moko ma wacopo timo pi lwongo dhanu. Gicopu bedu kende kende nikadhu kud i API ma juyike, ento calu yore mukende:~~

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

	~~Lanyuth~~
~~`onBeforeOptionsChanged`~~	~~Callback function ma jutiyo kudu ndhundhu ma podi ju ketho ngo lembe.~~
~~`onOptionsChanged`~~	~~Callback function ma jutiyo kudu ndhundhu ingey ketho lembe.~~
~~`onBeforeRender`~~	~~Callback function ma julwongo directly mapodi rendering utimiri ngo.~~
~~`onRender`~~	~~Callback function ma jutiyo kudu ndhundhu ingey nyuthu.~~

Ti ku lembe

nicaku i version 2.4.0

Icopo tiyo ku Gridzy events calu JavaScript events:

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

Lembe moko jutimo iwi Gridzy container element man lembe mukende jutimo iwi piny acel acel i container element.

Lembe ma jutimo iwi Gridzy container element:

	Lanyuth
`gridzyBeforeInit`	Mac mapodi gallery ucaku ngo.
`gridzyInit`	Mac ingey caku tic pa gallery.
`gridzyBeforeOptionsChanged`	Mac mapodi iketo ngo lembe.
`gridzyOptionsChanged`	Uwang ingey ketho lembe.
`gridzyBeforeRender`	Mac mapodi juyubu ngo.
`gridzyRender`	Mac ingey nyuthu.

Ka iweko yub moko keni, cwal kwac mi kony .

event.target mio Gridzy container element.
event.detail.instance mio Gridzy instance.

Lembe ma jutimo iwi piny moko:

	Lanyuth
`gridzyItemBeforeInit`	Mac ma podi piny ucaku ngo.
`gridzyItemInit`	Uwang ingey caku piny.
`gridzyItemLoading`	Uwang ka piny ucaku wok.
`gridzyItemReady`	Uwang ka piny ne utiye atera pi kwan pa grid. Dong aspect ratio ungeyere, ento cal copo bedu podi ube wok.
`gridzyItemComplete`	Uwang ka cal pa piny ne upong.

Ka iweko yub moko keni, cwal kwac mi kony .

event.target mio piny ma pire tek.
event.detail.instance mio Gridzy instance.

API – Global

Tic moko utiye ma tiye giri giri ku Gridzy instances. Dong umitu ngo wabed ku lanyuth moku cii.

Nwang yore macon

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

Nwang lembe ceke ma juketho

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

Keth lembe macon

Eni ketho ngo lembe ma juyero ikum Gridzy instances ceke ma judaru caku, ento eketho the lembe manyen. Ento, ka lembe moko ma con ubedo nuti jubidwoko kendu nikadhu kud i wel null , ebitiyo ku wel manyen.

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

Icopo tiyo ku eni mi ketho lembe iwi ngom zoo, kan ilwonge mapodi DOM utimbre ngo. Dong ibemito ngo iket lembe ma iyero calu attributes kendu.

Automatisms

Tek kende kende automatisms pa Gridzy.js 2 utiye katiyo, epe ku yeny pa yore ma piny eni. Ento automatisms jucopo ketho gi woko pi tic ku Gridzy i yore macon:

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

Moko kuom lembe maeni copo bedu ngo nikadhu kud i data-gridzy- attributes nyo nikadhu kud i setOptions() , pi the lembe ma rwinyo:

	Piny ma pire tek	Lanyuth
`autoInitOnDomReady`	`true`	Nwangu piny ma tiye ku class `gridzy` ikum karatasi man caku gi. Jucopo kethe nikadhu kud i `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	Nwangu piny manyen ku class `gridzy` ndhundhu ka giwok in DOM man ecaku gi. (e.g. ikum tic ku loko karatasi) Jucopo kethe nikadhu kud i `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Nwangu ka nyo piny moko (cal) ju medo nyo juwodho, man edwoko grid manyen kende kende. Jucopo kethe nikadhu kud i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Nyuthu ka `data-gridzy-` utiye piny ma jutiyo kudu pol kare nyo epe. Ka eni utiye `false` lembe ma juyero copo bedu kende kende nikadhu kud i API pa ngati kende. Jucopo kethe nikadhu kud i `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	Nwangu aloka loka pa `data-gridzy-` , man dwoko grid manyen kende kende. Man de engeyo ka `gridzyAnimated` class umedere nyo juwodho man ka `style` attribute lokore. Ka `useOptionAttributes` utiye `false` , enwangu aloka loka `style` kende. Jucopo kethe nikadhu kud i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Nwangu aloka loka pa kit `class` pa piny ceke (cal). Ber ikum filters. Jucopo kethe nikadhu kud i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver nicaku i version 2.5.0	`true`	Nwangu aloka loka pa `src` pa cal zo. Ber ka jutiyo kudu ku React nyoke libraries mange. Jucopo kethe nikadhu kud i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` loko dit pa janen nicaku i version 2.6.0	`true`	Nwangu aloka loka pa lac pa piny. Ber ikum kit ma juyubu kudu piny. (I wang version 2.6.0, jubed jutiyo ku window resize event listener) Jucopo kethe nikadhu kud i `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Caku ku cing

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

Nyoth Instance

I lembe ma yot, tung tung ku caku Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Kethu wel pa awiya karacelu ku cing

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

Keth nyathin acel acel karacelu ku cingi

Pol kare epe, mako i kare manok kende.

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

Kethu kit piny karacelu ku cing

Nen nia useOptionAttributes option umaku obed true pi eni.

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

Teko nyuthu

Pol kare epe, kadi nangu automatisms zo uthum

gridzyInstance.render();

Kit 2.x