Version 2.x – Gridzy.Gallery

Site Internet yango ebongolami na ndenge ya automatique. Soki likambo moko ezali polele te, tosengi otala mikanda ya Lingelesi.

Kosalela ya Moboko

Télécharger ba fichiers Gridzy na serveur na yo mpe bakisa yango na site na yo (mbala mingi na eteni ya motó):

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

Bakisa code HTML (esika nyonso na eteni ya nzoto):

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

Ezali bongo! Yango ezali ndakisa oyo ezali na mosala mobimba. Initialisation ya likolo esengeli te.

Configuration ya kosala

Lolenge ya pete ya ko configurer Gridzy ezali, kosalela kaka ba attributs HTML. Esengeli kaka otia liboso ya ba kombo ya ba options na data-gridzy- . Na yango, mpo na kotya option spaceBetween , bakisa kaka attribut 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>

Ba Options ya minene

	Valeur ya défaut	Ndimbola
`animate`	`true`	Ezali kokata soki esengeli kosalela ba animations tango grille ebongwanaka (ndakisa, tango ya kobongola bonene ya fenêtre ya navigateur to tango ya kotiya filtre).
`layout`	`justified`	Ezali kolimbola ndenge oyo basaleli. Gridzy.js 2 esungaka ba layouts mibale ekeseni `justified` mpe `waterfall` . Moko na moko na yango ezali na ba paramètres na yango ya option ya kobakisa, oyo okoki kokuta na se ya tableau oyo.
`filter`	`*`	Ezali kokata bililingi nini esengeli kolakisa. CSS-selector nionso ekoki kosalelama lokola valeur awa. Mbala mingi etiamaka automatiquement na nzela ya `filterControls` (tala option oyo elandi). Tala na ba Filtres
`filterControls`		Ezali ko déterminer ba éléments ya forme nini ekoki kosalelama pona ko filtrer ba images. Moponi nyonso ya CSS, oyo eponaka biloko ya formulaire HTML, ekoki kosalelama lokola motuya awa. Tala na ba Filtres
`autoConsiderScrollBars`	`true`	Mpo na kosakola bonene oyo ezali soki ba barres ya défilement ebimi to elimwaki. Ezali toujours recommandé kotika yango na `true` sauf soki automatisme oyo ebimisi ba problèmes.

Justified Ba options ya bobongisi

	Valeur ya défaut	Ndimbola
`autoFontSize`	`false`	Ezali kosala mise à jour automatiquement propriété ya taille ya font ya boîte moko na moko na kotalela taille ya boîte originale. Na ndenge ya libela bozwi ya bonene ya makomi etiamaki polele te.
`desiredHeight`	`190`	Elimboli bosanda oyo elingi ya milɔngɔ ya biloko. Bolai ya solo ekozala calculé selon largeur oyo ezali mpe ba éléments oyo ezali na molongo.
`hideOnMissingImage`	`true`	Ebombaka ba boîtes oyo ezali na bilili oyo ekokaki ko charger te.
`spaceBetween`	`4`	Elimboli ntaka kati ya biloko na ba pixels.
`lastRowAlign` banda version 2.3.0	`justified`	Elimboli bizaleli ya molongo ya suka. Ba valeurs oyo epesami nzela ezali `left` , `center` , `right` na `justified` .
`singleRowAlign` banda version 2.3.0	`justified`	Elimboli bizaleli soki ezali kaka na molongo moko. Ba valeurs oyo epesami nzela ezali `left` , `center` , `right` na `justified` .
~~`fillLastRow`~~ ~~banda version 2.1.0~~	~~`true`~~	ELONGI banda version 2.4.0 (ESIMBAMI banda version 2.3.0 ) Abongisaka bililingi na ndenge ete molɔngɔ ya nsuka etondisama ntango nyonso mobimba. Soki okani kobakisa bililingi na ndenge ya dynamique, ekoki kozala likanisi malamu ko désactiver yango. Ezuaka effet moko te na ba lignes moko (tala `fillSingleRow` ).
`fillSingleRow` banda version 2.1.0	~~`true`~~	ELONGI banda version 2.4.0 (ESIMBAMI banda version 2.3.0 ) Soki molɔngɔ ezali kaka moko, ebongisaka bililingi yango mpo molɔngɔ yango etonda ntango nyonso mobimba. Soki ekoki kosalema ete ozali kaka na elilingi moko to mibale na galerie, ekoki kozala likanisi malamu kokanga yango.

Waterfall Ba options ya layout

	Valeur ya défaut	Ndimbola
`autoFontSize`	`false`	Ezali kosala mise à jour automatiquement propriété ya taille ya font ya boîte moko na moko na kotalela taille ya boîte originale. Na ndenge ya libela bozwi ya bonene ya makomi etiamaki polele te.
`desiredWidth`	`250`	Elimboli bonene ya makonzí oyo olingi. Largeur ya solo ekozala calculé selon largeur oyo ezali mpe nombre ya ba colonnes.
`hideOnMissingImage`	`true`	Ebombaka ba boîtes oyo ezali na bilili oyo ekokaki ko charger te.
`horizontalOrder`	`false`	Elimboli ete ba éléments etiemaka strictement élément moko na colonne moko na moko de gauche à droite, sima ebandi lisusu na colonne oyo eleki gauche indépendante na colonne nini ezali plus place. Na ndenge ya libela ba éléments ekozala toujours kotiama na colonne oyo ezali na hauteur ya moke.
`spaceBetween`	`4`	Elimboli ntaka kati ya biloko na ba 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`.

Ba Options ya Avance mingi

Mpo na ba options ya likolo, tala API .

HTML ya sémantique

Structure HTML ya pete ya Gridzy ezali oyo:

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

Kasi, Gridzy ezali très flexible mpe okoki kosalela presque structure HTML mosusu nionso. Ezali kaka na mwa makambo oyo tosengeli kotalela:

Mwana moko na moko ya élément ya récipient azali komonisa eloko moko na grille.
Ezala élément ya conteneur na bana na yango ekoki kozala type nionso ya tag, lokola ul na li (considérer kaka ko réinitialiser ba défauts ya navigateur).
Soki élément img ezali mwana directe ye moko te, esengeli na classe gridzyImage .

Donc oyo ezali pe structure HTML oyo ezali kosala:

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

Surtout soki olingi obakisa ba captions, esengeli ozala na structure HTML avancée. Mpo na koyeba makambo mingi na ntina na yango, talá na Captions & Skins .

Ba Captions & Ba Loposo ya Likolo

Soki olingi kobakisa ba captions na galerie na yo, esengeli o définir apparence. Yango wana, mposo mosusu oyo esili kolimbolama liboso ezali. Loposo moko na moko oyo ezali na fichier CSS. Esengeli obakisa fisyé oyo en plus ya ba fichiers ya minene ya Gridzy (mbala mingi na eteni ya motó):

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

Lisusu esengeli na structure HTML ya liboso:

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

Soki ozali komituna na ntina ya structure ya HTML, tala na HTML Semantique .

Pona caption okoki kosalela type nionso ya tag, sala kaka que ezala na classe gridzyCaption . Elemento img esengeli na kelasi gridzyImage .

Ndakisa oyo ezali likolo ezali kolakisa yo loposo gridzySkinClassic . Mpo na kosalela oyo mosusu, tyá kaka nkombo ya loposo na esika na yango moko ya makambo oyo:

Ba Loposo oyo ezali na kati

	Ba kelasi oyo ezali
gridzyLoposoBlank esika ya kobanda malamu mpo na kosala loposo na yo moko aperçu en direct	`gridzySkinBlank`
gridzySkinClassic aperçu en direct	`gridzySkinClassic` `gridzySkinClassicLight`(ESIMBAMI banda version 2.6.0)
gridzySkinFullOverlay aperçu en direct	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(ESIMBAMI banda version 2.6.0)
gridzySkinLift aperçu en direct	`gridzySkinLift` `gridzySkinLiftLight`(ESIMBAMI banda version 2.6.0)
gridzySkinMagnifier fonctionnalité ya zoom ekotisami te aperçu en direct	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(ESIMBAMI banda version 2.6.0)

Ba skins nionso oyo ezali likolo esengeli kaka na fichier CSS, kasi ezali na ba skins ya kobakisa oyo esengaka pe fichier JavaScript:

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

	Ba kelasi oyo ezali
gridzySkinBlur esalaka na IE te aperçu en direct	`gridzySkinBlur` `gridzySkinBlurLight`(ESIMBAMI banda version 2.6.0)
gridzySkinCard aperçu en direct	`gridzySkinCard` `gridzySkinCardLight`(ESIMBAMI banda version 2.6.0)

Ba Options ya Loposo

Tango version 2.6.0 ezali na ba Options pona ko configurer ba skins intégrés. Na kotalela loposo ya sikisiki okoki kotya langi ya nsima, langi ya makomi mpe elili ya makomi. Esengeli kaka osalela ba propriétés personnalisées ya CSS ndenge okoki komona awa:

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

Tala ba variables oyo esungami mpe ba valeurs par défaut mpo na loposo moko na moko awa:

gridzySkinClassic

Variable oyo ekoki kobongwana	Valeur ya défaut	Nsango
`--background`	`rgba(0, 0, 0, .7)`	epesaka nzela na motuya nyonso ya sima ya CSS
`--color`	`rgb(255, 255, 255)`	epesaka nzela na motuya nyonso ya langi ya CSS
`--text-shadow`	`none`	epesaka nzela na motuya nyonso ya makomi-elili ya CSS

gridzySkinFullOverlay

Variable oyo ekoki kobongwana	Valeur ya défaut	Nsango
`--background`	`rgba(0, 0, 0, .7)`	epesaka nzela na motuya nyonso ya sima ya CSS
`--color`	`rgb(255, 255, 255)`	epesaka nzela na motuya nyonso ya langi ya CSS
`--text-shadow`	`none`	epesaka nzela na motuya nyonso ya makomi-elili ya CSS

gridzySkinLift

Variable oyo ekoki kobongwana	Valeur ya défaut	Nsango
`--background`	`rgba(0, 0, 0, .7)`	epesaka nzela na motuya nyonso ya sima ya CSS
`--color`	`rgb(255, 255, 255)`	epesaka nzela na motuya nyonso ya langi ya CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	epesaka nzela na motuya nyonso ya makomi-elili ya CSS

gridzySkinMagnifier

Variable oyo ekoki kobongwana	Valeur ya défaut	Nsango
`--background`	`rgba(0, 0, 0, .7)`	epesaka nzela na motuya nyonso ya sima ya CSS
`--color`	`rgb(255, 255, 255)`	epesaka nzela na motuya nyonso ya langi ya CSS

Loposo oyo esimbaka --text-shadow te

gridzySkinBlur

Variable oyo ekoki kobongwana	Valeur ya défaut	Nsango
`--background`	`rgba(0, 0, 0, .7)`	epesaka nzela na motuya nyonso ya sima ya CSS
`--color`	`rgb(255, 255, 255)`	epesaka nzela na motuya nyonso ya langi ya CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	epesaka nzela na motuya nyonso ya makomi-elili ya CSS

gridzySkinCard

Variable oyo ekoki kobongwana	Valeur ya défaut	Nsango
`--background`	`rgba(0, 0, 0, 1)`	epesaka nzela na motuya nyonso ya sima ya CSS
`--color`	`rgb(255, 255, 255)`	epesaka nzela na motuya nyonso ya langi ya CSS
`--text-shadow`	`none`	epesaka nzela na motuya nyonso ya makomi-elili ya CSS

Ba skins nionso oyo e définir liboso esimbaka kaka ba captions ya texte simple. Okoki kosala ba loposo na yo moko mpenza mpe ya mindondo mingi. Svp botala na Style Gridzy .

Style ya Gridzy

Soki loposo moko te oyo esili koyebana liboso ekokani na bamposa na yo, okoki kosala style ya loposo na yo moko.

Lolenge ya pɛtɛɛ ezali ya liboso kosala kopi ya loposo oyo ezali mpe kobongisa yango na bamposa na yo moko. gridzySkinBlank ya loposo oyo esili kolimbolama liboso elingaki mbala mingi kopesa moboko ya malamu lokola mpe mikanda ya malamu na fisyé 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;
}

Na fichier CSS okokuta ba classes gridzySkinBlank , gridzyImage na gridzyCaption . Gridzy ye moko azali na besoin ya ba classes oyo te. Basalelaka yango kaka mpo na kosala styling mpe bongo okoki kolongola to kopesa yango nkombo soki olingi.

En plus okokuta classe ya CSS gridzyItem . Gridzy atie classe oyo automatiquement na bana nionso ya direct ya élément ya conteneur principal. Donc, okoki kosalela classe oyo pona ko styler ba éléments ya galerie na yo.

Makanisi Makambo ya Ntina

Makambo oyo ezali na kati ya eloko yango esengeli koyanola mpenza. Talá ete bonene ya élément ekobongwana mpenza. Salelá ba valeurs ya pourcentage na esika ya ba valeurs ya pixel. Mpe tala option ya layout ya Gridzy autoFontSize , oyo ekangisaka font-size na taille ya boîte ya eloko.
Eloko mokomoko esengeli kozala na ratio ya aspect oyo elimbolami malamu. Ratio ya aspect ya eloko ekobongwana ata moke te mpe esengeli mpo na kosala calcul ya grille. Donc soki eloko moko eza automatiquement na rapport d'aspect bien défini te, prédéfini yango manuellement (par exemple via css).

Na ba cas misusu, ekoki kozala facile ko styler contenus ya biloko avant Gridzy a initialiser. Longola kaka classe gridzy to fichier javascript ya Gridzy mpo na mwa ntango mpo na yango.

Ezali bongo! Yango nde nyonso oyo osengeli na yango mpo na kotonga loposo na yo moko mpenza. La plupart ya ba peaux prédéfinis esalelaka mingi koleka oyo te.

Kasi ekoki kozala na mingi soki olingi ...

Ba Loposo ya Avancé

Gridzy esalela ba classes ya CSS mingi koleka kaka gridzyItem . Mingi na bango ekozala set automatiquement pe okoki kosalela yango pona styling pe.

Ba Classes ya ba Conteneurs Principaux

Nkombo ya Kelasi	Ndimbola
`gridzy` mpo na kotya na mabɔkɔ	Gridzy alukaka automatiquement ba éléments na classe oyo pe a initialiser yango.
`gridzyAnimated`	Ekozala set automatiquement soki option `animate` ezali `true` . Soki classe oyo etiamaki na maboko, option `animate` ekozua automatiquement `true` trop (sauf soki etiamaki polele na `false` ).

Ba kelasi ya Biloko

Nkombo ya Kelasi	Ndimbola
`gridzyItem`	Ekozala set noki soki eloko ebandi processus ya initialisation. Ekolongolama ata mokolo moko te.
`gridzyItemInitializing`	Ekozala set noki soki eloko ebandi processus ya initialisation. Ekozala remplacé na `gridzyItemReady` noki soki eloko ebandi mobimba. Elakisi te ete bilili bizali mobimba (tala `gridzyItemLoading` ), kasi eloko ezali pene mpo na komonana.
`gridzyItemReady`	Eko remplacer `gridzyItemInitializing` noki soki eloko ebandi mobimba. Ekolongolama ata mokolo moko te. Elakisi te ete bilili bizali mobimba (tala `gridzyItemComplete` ), kasi eloko ezali pene mpo na komonana.
`gridzyItemLoading`	Ekozala set noki soki eloko ebandi processus ya initialisation. Ekozwa esika ya `gridzyItemComplete` noki ntango bilili oyo ezali na kati (mbala mingi kaka moko) esili kozwama mobimba.
`gridzyItemComplete`	Eko remplacer `gridzyItemLoading` noki te ba images oyo ezali (mbala mingi kaka moko) e charger mobimba. Ekolongolama ata mokolo moko te.
`gridzyItemInitialToVisible`	Ekozala set noki soki eloko yango ebandi kobima mbala ya liboso. Ekolongolama noki soki eloko yango ezali komonana mobimba.
`gridzyItemVisible`	Ekozala set noki soki eloko yango ekomonana mobimba. Ekolongolama ntango kaka eloko yango ebandi kolimwa.
`gridzyItemVisibleToHidden`	Ekozala set noki soki eloko yango ebandi kolimwa. Ekolongolama noki soki eloko yango ebombami mobimba.
`gridzyItemHidden`	Ekozala set noki soki eloko yango ebombami mobimba. Ekolongolama ntango kaka eloko yango ebandi kobima.
`gridzyItemHiddenToVisible`	Ekotiamaka noki soki eloko ebandi kobima (longola se kobima mbala ya liboso – tala kelasi `gridzyItemInitialToVisible` ). Ekolongolama noki soki eloko yango ezali komonana mobimba.
`gridzyItemVisibleToVisible`	Ekozala set noki soki eloko moko na grille ebongwanaki, kasi eloko yango moko ezalaki mpe kotikala komonana. Ekolongolama noki soki animation ya changement esili.

Na ndenge ya libela elembo ya mosala mpe ba animations mpo na bilili oyo ezali komonana mpe oyo ezali kolimwa esili kolimbolama liboso na fisyé CSS ya monene ya Gridzy.

Na ba classes CSS oyo tolobeli likolo okoki ko styler indicateur ya processus na yo moko na ba animations. Oser ya kotala na fichier CSS principal ya Gridzy, pona ko comprendre oyo olingaki o superposer. Kobanga te, nionso ezali bien documenté kuna.

Optimiser Chargement

Soki osaleli bilili mingi, ekoki kozala likanisi malamu kosalisa Gridzy atonga grille noki.

Kopekisa Kopumbwa Bililingi

Gridzy azali mpenza na mposa ya ratio ya aspect ya bilili nyonso mpo na kosala calcul ya grille. Makambo yango esalaka ete biloko oyo ekoki kopumbwa ezala soki bililingi mosusu ezali prêt mpe mosusu ezali te. Soki bililingi ezali mingi, effet oyo ekoki kosilikisa mingi.

Pona kopekisa comportement oyo, tia kaka ba attributs width na height pona ba éléments nionso img . Ezali na ntina mingi kotya motuya oyo ebongi mpo na elilingi mokomoko, soki te bililingi yango elingaki kobeba. Ba valeurs correctes ezali largeur originale na hauteur ya image respective:

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

Na sima Gridzy akoki kosala calcul ya grille mbala moko sans besoin ya koyeba ba taille vraiment ya ba images.

Chargement ya paresseux

Pona ko charger kaka ba images oyo ezali na viewport visible, landa kaka ba étapes oyo:

Kotisa ba attributs width na height ndenge elobami likolo (sala que osalela ba valeurs ya malamu)
Remplacer ba attributs nionso src na data-gridzylazysrc ndenge elakisami awa na se (soki ozali na ba attributs srcset lokola, remplacer yango na 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>

Sima ya ba étapes oyo ba images eko charger noki soki ekozala pene to na kati ya viewport.

Indicateur ya Processus

Indicateur ya processus ezali icône ya moke ya animation oyo emonanaka tango image ezali ko charger. Soki osaleli ba captions & skins , indicateur ya processus ekolakisama automatiquement. Soki te osengeli kosala mwa mbongwana:

Tia élément img moko na moko na élément div
(to na kati ya élément mosusu nyonso – tala HTML sémantique mpo na koyeba makambo mosusu)
Bakisa classe gridzyImage na élément img moko na moko

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

Sima na yango esengeli omona ba indicateurs ya processus soki ba images ezo zua temps pona ko charger.

Ba filtres

Filtres na Gridzy eza assez simple mais puissant. Ata soki ozali na besoin ya filtre ya ndenge nini, ezali très probable que ezala réalisable. Oyo esengeli ezali, mwa CSS mpe mwa ba éléments ya formulaire HTML ...

Tala ndakisa moko ya mosala:

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

Totonga Yango Etape na Etape

1. Ya liboso tozali na besoin ya structure HTML ya momesano ya Gridzy pe totia ba kombo ya classe pona ba éléments nionso ya galerie po tokoka ko filtrer yango sima

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

Na ndakisa oyo tosalelaka kaka classe moko pona élément moko na moko. Kasi okoki pe kotiya ba classes ebele pona élément moko, soki élément wana esengeli ezala findable via ba filtres ebele.

2. Na sima tobakisi mua ba boutons na nzela na yango tokoki ko changer ba filtres alors

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

Na esika ya ba boutons, okokaki pe kosalela ba éléments mosusu ya formulaire lokola ba boîtes de contrôle, ba boutons ya radio, ba champs ya kopona pe bongo na bongo.

Ndenge bokoki komona, ba valeurs ya ba boutons ezali ba sélecteurs CSS ya momesano. Soki kaka tosilisi, soki tobɛti na bouton ya ndenge wana, ekomonisa bililingi oyo ekokani na moponi wana ya CSS. Techniquement ezo setting kaka option filter na valeur oyo.

Okoki mpe kosalela ba sélecteurs complexes mingi koleka. Ndakisa :not(.animals) elingaki kosala mpe, lokola mpe .animals.people mpe .animals, .people .

3. Na suka, to encapsuler ba boutons na kati ya conteneur div pe to kangi yango na galerie Gridzy, na ko setting option 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>

Ndenge bokoki komona, tosalelaka pe sélecteur ya CSS pona option filterControls . Récipient div oyo ezali na attribut id esalaka kaka mpo na kosala ete ba boutons ezala pete mpo na kopona na nzela ya moponi wana ya CSS.

Ezali bongo!

Soki olingi solution ya JavaScript, tala API .

API

Atako Gridzy ezali na API na yango moko, makambo mingi ekoki kosalema kozanga yango, kaka na kosala manipulation ya DOM. Gridzy akomona yango mpe akobongisa grille. Kasi ezali mpe na API moko ya nguya mingi ...

Manipulation ya DOM

Pona ba manipulations nionso ya Document Object Model (DOM) tozali nanu na besoin ya élément ya conteneur:

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

Bakisa Bililingi

Ezali na ntina kotonga mobimba mpe kotondisa élément ya mwana ya sika yambo ya kobakisa yango na élément ya récipient. Soki te Gridzy akoki ko détecter ba dimensions correctes te.

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

Longola Bililingi

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

Bobongola Ba Options

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

Makambo mingi na ntina ya kosala manipulation ya DOM okoki kozwa na MDN web docs . Ezali mpe na Introduction ya DOM oyo ezali.

API ya propriétaire

Pona kosalela API, toza na besoin ya liboso ya instance ya Gridzy, oyo ezali lien na élément ya conteneur Gridzy:

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

Bozwa Option

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

Zwá Ba Options Nionso

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

Set Options

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

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

Salelá Filtre ya kosala

Kosalela filtre ezali kaka ko setting filter ya option oyo ekoki kozala sélecteur nionso ya CSS ya valide:

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

Bakisa Misala ya Callback

EZALI DEPRECATED banda version 2.4.0
Salelá na esika na yango Ba Events ya mikolo oyo mpe oyo ekoki kobongwana. Talá eteni oyo elandi mpo na koyeba makambo mosusu.

~~Gridzy.js 2 esimbaka mwa ba options mpo na ba fonctions ya callback. Bakoki kotiama kaka na nzela ya API ya propriétaire, kasi kaka lokola ba options mosusu:~~

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

	~~Ndimbola~~
~~`onBeforeOptionsChanged`~~	~~Fonction ya callback oyo ebengami directement avant ya ko setting ba options.~~
~~`onOptionsChanged`~~	~~Fonction ya callback oyo ebengami directement après ko setting ba options.~~
~~`onBeforeRender`~~	~~Fonction ya callback oyo ebengami directement avant ya ko rendu.~~
~~`onRender`~~	~~Fonction ya callback oyo ebengamaka directement après rendu.~~

Salelá Makambo oyo esalemá

banda version 2.4.0

Okoki kosalela ba événements ya Gridzy exactement lokola ba événements ya JavaScript ya momesano:

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

Ba événements misusu ezo tirer na élément ya conteneur Gridzy pe ba événements misusu ezo tirer na ba éléments ya élément individuel na kati ya élément ya récipient.

Makambo oyo esalemaki na élément ya conteneur Gridzy:

	Ndimbola
`gridzyBeforeInit`	Moto avant initialisation ya galerie.
`gridzyInit`	Moto après initialisation ya galerie.
`gridzyBeforeOptionsChanged`	Moto liboso ya kotya ba options.
`gridzyOptionsChanged`	Moto nsima ya kotya ba options.
`gridzyBeforeRender`	Moto liboso ya kosala.
`gridzyRender`	Moto nsima ya kosala.

Soki ozangi ba événements moko awa, tinda demande ya soutien .

event.target epesaka élément ya récipient ya Gridzy.
event.detail.instance epesaka instance ya Gridzy.

Ba événements oyo ezo tirer na ba éléments ya item:

	Ndimbola
`gridzyItemBeforeInit`	Moto avant initialisation ya eloko.
`gridzyItemInit`	Moto après initialisation ya eloko.
`gridzyItemLoading`	Moto ntango eloko yango ebandi kokɔtisa.
`gridzyItemReady`	Moto ntango eloko yango ezali prêt mpo na calcul ya grille. Donc rapport ya aspect eyebani, mais image ekoki kozala kaka chargement.
`gridzyItemComplete`	Ezali kopela ntango elilingi ya eloko yango ekɔti mobimba.

Soki ozangi ba événements moko awa, tinda demande ya soutien .

event.target epesaka élément ya eloko oyo etali yango.
event.detail.instance epesaka instance ya Gridzy.

API – Mokili mobimba

Ezali na ba fonctions mosusu oyo ezali indépendante ya ba instances ya Gridzy. Donc toza na besoin te ya kozua instance avant.

Bozua Option ya Par défaut

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

Zua ba Options nionso ya par défaut

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

Set Options ya Par défaut

Yango etie te ba options ya ba instances nionso ya Gridzy oyo esi e initialisé, kasi elimboli moboko ya ba instances ya sika. Kasi, soki option ya instance oyo ezali elingaki kozongisama na nzela ya valeur null , elingaki kosalela valeur ya sika ya par défaut.

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

Okoki kosalela yango pona kotiya ba options na mokili mobimba, soki obengi yango avant DOM ezala prêt. Donc olingaki kozala na besoin ya ko setting ba options comme attributs lisusu te.

Ba automatismes (ba automatismes).

Tant que ba automatismes nionso ya Gridzy.js 2 ezali active, besoin ya ba méthodes oyo ezali awa na se ezali te. Kasi ba automatismes ekoki ko boma mpo na kosalela Gridzy na ndenge ya bonkoko:

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

Ba options mosusu oyo ekoki kozala te na nzela ya ba attributs data-gridzy- to na nzela ya setOptions() , mpo na ba raisons logique:

	Valeur ya défaut	Ndimbola
`autoInitOnDomReady`	`true`	Détecter ba éléments na classe `gridzy` na chargement ya page pe e initialiser yango. Ekoki kotyama na nzela ya `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Motali ya Mutation	`true`	Détecter ba éléments ya sika na classe `gridzy` noki soki ebimi na DOM pe e initialiser yango. (ndakisa na ntina ya kosalela mbongwana ya nkasa) Ekoki kotyama na nzela ya `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Motali ya Mutation	`true`	Ezali koyeba soki ba éléments ya bana (bililingi) ebakisami to elongolami, mpe ezongisaka na mikolo grille na ndenge ya automatique. Ekoki kozala na nzela ya `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Elimboli soki ba attributs `data-gridzy-` esalelamaka mingi to te. Soki oyo ezali `false` ba options ekoki kozala set kaka na nzela ya API propriétaire. Ekoki kotyama na nzela ya `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Motali ya Mutation	`true`	Emonisaka mbongwana ya ba attributs `data-gridzy-` , mpe ezongisaka na mikolo grille na ndenge ya automatique. Ezali mpe ko détecter soki classe `gridzyAnimated` ebakisami to elongolami mpe soki mbongwana ya attribut `style` esalemi. Soki `useOptionAttributes` ezali `false` , emoni kaka mbongwana ya attribut `style` . Ekoki kozala na nzela ya `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Motali ya Mutation	`true`	Emonisaka mbongwana ya bizaleli `class` ya biloko nyonso ya mwana (bililingi). Pertinent na oyo etali ba filtres. Ekoki kozala na nzela ya `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Motali ya Mutation banda version 2.5.0	`true`	Détecte ba changements ya ba attributs `src` ya ba images nionso. Ezali na ntina ntango esalelami na React to ba bibliothèques ya ndenge wana. Ekoki kozala na nzela ya `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Bobongoli bonene ya observateur banda version 2.6.0	`true`	Ezali ko détecter ba changements ya largeur ya élément. Pertinent na oyo etali design responsive. (Yambo ya version 2.6.0 bazalaki kosalela listener ya événement ya changement taille ya fenêtre) Ekoki kozala na nzela ya `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Initialiser na maboko

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

Bebisa Instance yango

Na ndenge ya moke, le contraire ya ko initialiser Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sync Liste ya Bana na maboko

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

Sync élément ya Mwana Moko Manuellement

Mbala mingi, esengeli te, longola kaka na makambo oyo esalemaka mingi te.

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

Sync ba Attributs na Manuellement

Yeba ete option useOptionAttributes esengeli kozala true mpo na yango.

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

Bobongoli ya makasi

Mbala mingi esengeli te, ata soki ba automatismes nionso ekangami

gridzyInstance.render();