Version 2.x – Gridzy.Gallery .

Site ni ayeke traduire automatiquement. Tongana mbeni ye ayeke polele pëpe, pardon bâ ambeti ti Anglais.

Kozo kusala

Zia afichier ti Gridzy na ndo ti serveur ti mo na zia ni na ndo ti site ti mo (mingi ni na yâ ti mbage ti li ti tënë ni):

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

Zia kode ti HTML (na ndo kue na yâ ti mbage ti tere ni):

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

So ni la! So ayeke mbeni tapande so ayeke sala kusala kue. A hunda pëpe ti tene a sara mbeni initialisation nde.

Lege ti lekengo ye

A yeke ngangu pëpe ti leke Gridzy, ti sara kua gi na a-attribut ti HTML. E yeke gi na bezoin ti zia kozoni iri ti a-option ni data-gridzy- . Tongaso, ti leke option spaceBetween , zia gi 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>

Akota ye ti soro

	Valeur ti defaut	Fango ye
`animate`	`true`	A yeke fa wala a lingbi a sara kua na a-animation na ngoi so grille ni achangé (na tapande, na ngoi so a yeke changé kota ti fenêtre ti navigateur wala na ngoi so a yeke zia mbeni filtre).
`layout`	`justified`	Fa nda ti layout ti lo. Gridzy.js 2 amû maboko na alege use so ayeke nde nde `justified` na `waterfall` . Ala oko oko ayeke na ambeni paramètre ti option ti ala, so mo lingbi ti wara ni na gbe ti tableau so.
`filter`	`*`	A fa a-image wa a lingbi a fa ni. A lingbi ti sala kusala na CSS-selector kue tongana ngele ge. Mingi ni, a yeke leke ni gi tongaso na lege ti `filterControls` (bâ option so ayeke na pekoni). Bâ afiltre .
`filterControls`		A fa a-élément ti forme wa a lingbi ti sara kua na ni ti filtré na a-image ni. Azo kue so ayeke soro CSS, so ayeke soro a-élément ti formulaire HTML, alingbi ti sara kua na ni tongana ngere ge. Bâ afiltre .
`autoConsiderScrollBars`	`true`	Ti fa kozoni largeur so ayeke dä tongana a-barre ti défilement asigigi wala abuba. A yeke lakue nzoni ti zia ni na ndo `true` gi tongana automatisme so aga na kpale.

Justified Alege ti lekengo ye

	Valeur ti defaut	Fango ye
`autoFontSize`	`false`	A yeke sara si akota mbeti ti yâ ti boîte oko oko aga fini automatiquement alingbi na kota ti boîte ni so ayeke kozo. Na lege ti defaut, a leke pëpe propriété ti font-size ni polele.
`desiredHeight`	`190`	A fa nda ti akota ye so mo ye ti sara. A yeke diko ande tâ yongo ni alingbi na largeur so ayeke dä nga na aye so ayeke na yâ ti molongo ni.
`hideOnMissingImage`	`true`	A honde akete boîte so ayeke na a-image so a lingbi ti zia ni pëpe.
`spaceBetween`	`4`	A fa yongo ti aye so ayeke na yâ ti pixel.
`lastRowAlign` ngbene ye na version 2.3.0.	`justified`	Fa salango ye ti ndangba molongo ni. A mû lege na a-valeur `left` , `center` , `right` nga na `justified` .
`singleRowAlign` ngbene ye na version 2.3.0.	`justified`	Fa nda ti salango ye tongana a yeke gi mbeni molongo oko. A mû lege na a-valeur `left` , `center` , `right` nga na `justified` .
~~`fillLastRow`~~ ~~ngbene ye na version 2.1.0.~~	~~`true`~~	A zi ni ngbene ye na version 2.4.0. (A YEKE sara kua na ni ngbene ye na version 2.3.0 ) A leke a-image ni tongaso si ndangba molongo ni asi lakue na azo kue. Tongana mo leke ti zia ambeni image na ndo ni na lege ti dynamique, a lingbi ti duti nzoni ti kanga lege na ye so. A yeke sara ye oko pëpe na ndo ti akete molongo (bâ `fillSingleRow` ).
`fillSingleRow` ngbene ye na version 2.1.0.	~~`true`~~	A zi ni ngbene ye na version 2.4.0. (A YEKE sara kua na ni ngbene ye na version 2.3.0 ) Tongana a yeke gi mbeni molongo oko, a yeke leke a-image ni tongaso si molongo ni asi lakue kue. Tongana a lingbi ti si so mo yeke gi na mbeni image oko wala use na yâ ti galerie ni, a lingbi ti duti nzoni ti kanga ye so.

Waterfall Alege ti lekengo ye

	Valeur ti defaut	Fango ye
`autoFontSize`	`false`	A yeke sara si akota mbeti ti yâ ti boîte oko oko aga fini automatiquement alingbi na kota ti boîte ni so ayeke kozo. Na lege ti defaut, a leke pëpe propriété ti font-size ni polele.
`desiredWidth`	`250`	Fa largeur ti acolonne so mo ye. A yeke diko ande tâ largeur ni alingbi na largeur so ayeke dä nga na wungo ti acolonne ni.
`hideOnMissingImage`	`true`	A honde akete boîte so ayeke na a-image so a lingbi ti zia ni pëpe.
`horizontalOrder`	`false`	A fa so a zia a-élément ni gï mbeni ye oko na yâ ti colonne oko oko ti londo na mbage ti gauche ti si na mbage ti droite, na pekoni a kiri a komanse na yâ ti colonne so ayeke na mbage ti gauche mingi so ayeke nde na colonne wa la ayeke na place mingi. Na lege ti defaut, a yeke zia lakue a-élément ni na yâ ti colonne so ayeke na kete yongo.
`spaceBetween`	`4`	A fa yongo ti aye so ayeke na yâ ti pixel.
`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`.

Ambeni ye so ayeke kota mingi .

Ti wara ambeni ye nde, bâ API .

HTML ti nda ti tënë

A yeke ngangu pëpe ti sara kua na HTML ti Gridzy:

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

Me, Gridzy ayeke sara kua nzoni mingi na mo lingbi ti sara kua na ambeni ye nde ti HTML. Ambeni ye ayeke dä so a lingbi e bâ ni:

Molenge oko oko ti élément ti conteneur ni ayeke fä ti mbeni ye oko na yâ ti grille ni.
A-élément ti conteneur ni nga na amolenge ti lo alingbi ti duti mara ti tag kue, na tapande ul na li (gi ti pensé ti réinitialiser a-defaut ti navigateur ni).
Tongana mbeni ye img ayeke pëpe mbeni molenge ti lo mveni, lo yeke na bezoin ti klase gridzyImage .

Tongaso, so ayeke nga mbeni structure HTML so ayeke sara kua:

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

Mbilimbili tongana mo ye ti zia ambeni tënë na ndo ni, mo yeke na bezoin ti mbeni kode ti HTML so ayeke na lege ni. Ti hinga ye mingi na ndo ni, bâ Captions & Skins .

Sous-titre na poro ti tere

Tongana mo ye ti zia ambeni tënë na yâ ti galerie ti mo, a lingbi mo fa nda ti bango ndo ni. Tongaso, ambeni poro so a leke ni kozo awe ayeke dä. Skin oko oko ayeke na mbeni fichier CSS. A lingbi mo zia fichier so na ndo ti akota fichier ti Gridzy (mingi ni na yâ ti mbage ti li ti tënë ni):

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

Na ndo ni, mo yeke na bezoin ti mbeni structure HTML so ayeke na lege ni:

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

Tongana mo yeke hunda tere ti mo na ndo ti lege so a leke na HTML, bâ Semantic HTML .

Ti wara atënë ti yâ ni so mo lingbi ti sara kua na mara ti tag kue, gi ti tene a duti na klase gridzyCaption . A yeke na lege img ti tene e sara kua na gridzyImage .

Tapande so ayeke na nduzu ge afa na e gridzySkinClassic ti tere ti e. Ti sala kusala na mbeni nde, gi ti zia na place ti iri ti poro ni mbeni oko ti aye so:

A yeke wara na yâ ni aSkin

	A-étude so ayeke dä
gridzy Poro senge mbeni nzoni tongo nda ti lekengo mbeni poro ti tele . aperçu en direct	`gridzySkinBlank`
gridzySkinClassic aperçu en direct	`gridzySkinClassic` `gridzySkinClassicLight`(A zia ni awe ngbene ye na version 2.6.0)
gridzySkinFullOverlay aperçu en direct	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(A zia ni awe ngbene ye na version 2.6.0)
gridzySkinLift aperçu en direct	`gridzySkinLift` `gridzySkinLiftLight`(A zia ni awe ngbene ye na version 2.6.0)
gridzySkinMagnifier kusala ti zoom ayeke na yâ ni pëpe aperçu en direct	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(A zia ni awe ngbene ye na version 2.6.0)

A-skin kue so ayeke na nduzu ge ayeke gi na bezoin ti mbeni fichier CSS, me ambeni skin nde ayeke dä so ahunda nga ti wara mbeni fichier JavaScript:

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

	A-étude so ayeke dä
gridzySkinBlur a yeke sara kua na IE . aperçu en direct	`gridzySkinBlur` `gridzySkinBlurLight`(A zia ni awe ngbene ye na version 2.6.0)
gridzySkinCard aperçu en direct	`gridzySkinCard` `gridzySkinCardLight`(A zia ni awe ngbene ye na version 2.6.0)

A-option ti poro ti tere

Ti londo na version 2.6.0, a yeke wara a-Option ti leke na a-skin so ayeke na yâ ti ni. Na lege ti mbilimbili poro ti tele ti mo, mo lingbi ti leke couleur ti peko, couleur ti atënë nga na ombre ti atënë. A lingbi mo sara kua gi na a-appareil ti CSS tongana ti so mo lingbi ti bâ ge:

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

Bâ a-variable so a mû maboko na ni nga na a-valeur so a zia na sese teti poro oko oko ge:

gridzySkinClassic

Variable	Valeur ti defaut	Asango
`--background`	`rgba(0, 0, 0, .7)`	amû lege na mbeni ngere ti peko ti CSS .
`--color`	`rgb(255, 255, 255)`	amû lege na ngere ti couleur ti CSS kue .
`--text-shadow`	`none`	amû lege na ngele ti mbeti-ombre ti CSS kue .

gridzySkinFullOverlay

Variable	Valeur ti defaut	Asango
`--background`	`rgba(0, 0, 0, .7)`	amû lege na mbeni ngere ti peko ti CSS .
`--color`	`rgb(255, 255, 255)`	amû lege na ngere ti couleur ti CSS kue .
`--text-shadow`	`none`	amû lege na ngele ti mbeti-ombre ti CSS kue .

gridzySkinLift

Variable	Valeur ti defaut	Asango
`--background`	`rgba(0, 0, 0, .7)`	amû lege na mbeni ngere ti peko ti CSS .
`--color`	`rgb(255, 255, 255)`	amû lege na ngere ti couleur ti CSS kue .
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	amû lege na ngele ti mbeti-ombre ti CSS kue .

gridzySkinMagnifier

Variable	Valeur ti defaut	Asango
`--background`	`rgba(0, 0, 0, .7)`	amû lege na mbeni ngere ti peko ti CSS .
`--color`	`rgb(255, 255, 255)`	amû lege na ngere ti couleur ti CSS kue .

Azo so ayeke mû maboko na --text-shadow

gridzySkinBlur

Variable	Valeur ti defaut	Asango
`--background`	`rgba(0, 0, 0, .7)`	amû lege na mbeni ngere ti peko ti CSS .
`--color`	`rgb(255, 255, 255)`	amû lege na ngere ti couleur ti CSS kue .
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	amû lege na ngele ti mbeti-ombre ti CSS kue .

gridzySkinCard

Variable	Valeur ti defaut	Asango
`--background`	`rgba(0, 0, 0, 1)`	amû lege na mbeni ngere ti peko ti CSS .
`--color`	`rgb(255, 255, 255)`	amû lege na ngere ti couleur ti CSS kue .
`--text-shadow`	`none`	amû lege na ngele ti mbeti-ombre ti CSS kue .

A-skin kue so a leke ni kozo awe ayeke mû maboko gi na akete kete tënë. Mo lingbi ti leke abongo ti mo wani nga so ayeke ngangu mingi. Pardon, bâ Style Gridzy .

Style ti Gridzy

Tongana mbeni poro so a leke ni kozo awe alingbi na bezoin ti mo pëpe, mo lingbi ti leke mbeni poro ti mo wani.

Lege so ayeke ngangu pëpe ayeke ti kozoni ti sara copie ti mbeni poro so ayeke dä awe na ti sara si a lingbi na bezoin ti mo wani. A-skin gridzySkinBlank so a leke ni kozo awe ayeke mû mingi ni mbeni nzoni fondation nga na mbeni nzoni mbeti na yâ ti fichier 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 yâ ti fichier CSS ni, mo yeke wara a-étude so iri ni gridzySkinBlank , gridzyImage nga na gridzyCaption . Gridzy mveni ayeke na bezoin ti a-étude so pëpe. A yeke sara kua gi na ala ti sara na style na tongaso mo lingbi ti zi wala ti changé iri ti ala tongana mo ye.

Na ndo ni, mo yeke wara nga klase ti CSS gridzyItem . Gridzy azia klase so automatiquement na amolenge kue so ayeke direct ti kota élément ti conteneur ni. Tongaso, mo lingbi ti sara kua na klase so ti sara style na aye ti galerie ti mo.

Mind Akota ye .

A lingbi atënë ti yâ ti ye ni alingbi kue. Bâ so kota ti élément ni ayeke changé biani. Lo sara kua na a-pourcentage ahon ti sara kua na a-pixel. Na bâ option ti lekengo ye ti Gridzy autoFontSize , so abungbi kota ti mbeti ni na ndo ti kota ti boîte ti aye ni.
A lingbi ye oko oko aduti na mbeni mbage so a fa ni nzoni. A-aspect ti ye ni ayeke changé lâ oko pëpe na a hunda ti sara calcul ti grille ni. Tongaso, tongana mbeni ye ayeke na mbeni aspect so a fa ni nzoni pëpe, leke ni kozoni na maboko (na tapande na lege ti css).

Na yâ ti ambeni ye, a lingbi ti duti ngangu pëpe ti sara style ti atënë ti yâ ti aye ni kozoni si Gridzy akomanse ti sara kua na ni. Gi ti zi gridzy ti klase wala fichier ti javascript ti Gridzy teti kete ngoi teti ye so.

So ni la! So ayeke gi ye so mo yeke na bezoin ni ti leke na poro ti mo wani. Mingi ti a-skins so a leke ni kozo awe ayeke sara kua pëpe na aye so.

Me ambeni ye nde alingbi ti duti dä tongana mo ye ...

A-Skins so ayeke gue na li ni

Gridzy asala kusala na a-étude ti CSS mingi ahon gi gridzyItem . Mingi ti ala ayeke duti ande automatiquement na mo lingbi ti sara kua na ala ti sara na style nga.

Akota klase ti conteneur

Iri ti klase	Fango ye
`gridzy` ti leke ni na maboko	Gridzy ayeke wara gi lo oko a-élément so ayeke na yâ ti klase so na lo yeke komanse ni.
`gridzyAnimated`	A yeke leke ni automatiquement tongana option `animate` ayeke `true` . Tongana a leke klase so na maboko, option `animate` ayeke ga ande `true` nga (gï tongana a zia ni polele na `false` ).

A-Item ti klase

Iri ti klase	Fango ye
`gridzyItem`	A yeke leke ande ni hio tongana ye ni ato nda ti sala kusala na ni. A yeke zi ni lâ oko pëpe.
`gridzyItemInitializing`	A yeke leke ni ande gi tongana ye ni ato nda ti sala kusala na ni. A yeke mû place ti `gridzyItemReady` gi tongana a leke ye ni kue awe. A ye ti tene pëpe so a-image ni kue ayeke na yâ ni (bâ `gridzyItemLoading` ), me aye ni ayeke nduru ti tene a bâ ni.
`gridzyItemReady`	A yeke mû place ti `gridzyItemInitializing` gi tongana a leke ye ni kue awe. A yeke zi ni lâ oko pëpe. A ye ti tene pëpe so a-image ni ayeke na yâ ni kue (bâ `gridzyItemComplete` ), me ye ni ayeke nduru ti tene a bâ ni.
`gridzyItemLoading`	A yeke leke ande ni hio tongana ye ni ato nda ti sala kusala na ni. A yeke mû place ti `gridzyItemComplete` gi tongana a-image so ayeke na yâ ni (mingi ni gi oko) asi singo na yâ ni.
`gridzyItemComplete`	A yeke mû place ti `gridzyItemLoading` gi tongana a-image so ayeke na yâ ni (mingi ni gi oko) asi singo na yâ ni. A yeke zi ni lâ oko pëpe.
`gridzyItemInitialToVisible`	A yeke leke ni ande gi tongana ye ni akomanse ti sigigi kozoni. A yeke zi ni ande gi tongana ye ni asigigi kue.
`gridzyItemVisible`	A yeke leke ni ande gi tongana ye ni asigigi kue. A yeke zi ni ande gi tongana ye ni akomanse ti hon.
`gridzyItemVisibleToHidden`	A yeke leke ni ande gi tongana ye ni akomanse ti hon. A yeke zi ni ande gi tongana a honde ye ni kue awe.
`gridzyItemHidden`	A yeke leke ni ande gi tongana ye ni ahonde kue awe. A yeke zi ni ande gi tongana ye ni akomanse ti sigigi.
`gridzyItemHiddenToVisible`	A yeke leke ande ni hio tongana ye ni akomanse ti sigigi (gï ti sigigi kozoni – bâ klase `gridzyItemInitialToVisible` ). A yeke zi ni ande gi tongana ye ni asigigi kue.
`gridzyItemVisibleToVisible`	A yeke zia ande ni hio tongana mbeni ye na yâ ti grille ni achangé, me ye ni wani ayeke lani dä na angbâ ti bâ ni. A yeke zi ni ande gi tongana animation ti changement ni ahunzi.

Na lege ti defaut, a yeke fa kozoni awe indicateur ti processus nga na a-animation ti image so ayeke sigigi nga na so ayeke hon na yâ ti kota fichier CSS ti Gridzy.

Na lege ti a-étude ti CSS so a fa ni na nduzu ge, mo lingbi ti leke a-indicateur ti processus ti mo wani nga na a-animation. Dare a bâ na yâ ti kota fichier CSS ti Gridzy, ti hinga ye so mo yeke na bezoin ti hon ndo ni. Mbeto asara mo pëpe, a sû aye kue nzoni na mbeti kâ.

Sara si chargement ni aga nzoni

Tongana mo sala kusala na a-image mingi, a lingbi ti duti nzoni ti mû maboko na Gridzy ti leke grille ni hio.

Kanga lege na a-image ti saut .

Gridzy ayeke biani na bezoin ti a-aspect ti a-image kue ti sara na calcul ti grille ni. Akota ye so ayeke sara si a yeke wara a-élément ti saut tongana ambeni image ni ayeke nduru na ambeni ayeke nduru pëpe. Tongana a-image ayeke mingi, ye so alingbi ti son bê ti zo mingi.

Ti kanga lege na salango ye so, zia gi a-attribut width na height teti a-élément img kue. A yeke kota ye ti zia ambilimbili ngele teti image oko oko, tongana pëpe, a-image ni ayeke ga kirikiri. A yeke wara na yâ ni akota ye so ayeke na yâ ti image ni:

<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 pekoni, Gridzy alingbi ti sara calcul ti grille ni hio sân ti tene lo hinga tâ kota ti a-image ni.

Chargement ti paresseux

Ti zia gi a-image so ayeke na yâ ti viewport so zo alingbi ti bâ ni, sara ye alingbi na aye so:

Zia na yâ ni a-attribut width na height tongana ti so a fa na nduzu ge (sara si mo sara kua na a-valeur so ayeke na lege ni)
Zia na place ti a-attribut src kue data-gridzylazysrc tongana ti so a fa na gbe ni ge (tongana mo yeke na a-attribut srcset nga, zia na place ni 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>

Na peko ti aye so, a-image ni ayeke charge gi tongana ala yeke nduru wala na yâ ti viewport ni.

Ye ti fango lege na kusala

Processus indicateur ni ayeke kete icon ti animation so ayeke sigigi na ngoi so image ni ayeke charge. Tongana mo sara kua na a-encadré & skins , a yeke fa ande ye so afa so mo yeke sara kua na ni. Tongaso pëpe, mo yeke na bezoin ti sara ambeni changement:

Zia aye img oko oko na yâ ti mbeni ye div
(wala na yâ ti mbeni ye nde – bâ HTML ti semantique ti hinga ye mingi na ndo ni)
A yeke wara na yâ ti klase ni gridzyImage na yâ ti a-élément img oko oko .

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

Na pekoni, a lingbi mo bâ a-indicateur ti processus ni tongana a-image ni amû ngoi ti charge.

Afiltre

A-filtre so ayeke na yâ ti Gridzy ayeke pendere mingi me ayeke ngangu. Atâa mara ti filtre wa la mo yeke na bezoin ni, a yeke tâ ye ti dongo bê pëpe so mo lingbi ti sara ni. Ye so mo yeke na bezoin ni ayeke gi, mbeni kete CSS nga na ambeni kete ye ti formulaire HTML ...

Mbeni tapande ti kusala ni ayeke so:

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

Zia e leke ni Etape na Etape .

1. Kozoni kue, a lingbi e sara kua na HTML ti Gridzy nga e zia iri ti klase ti aye kue so ayeke na yâ ti galerie ni tongaso si e lingbi ti filtré ni na pekoni .

<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 yâ ti tapande so e yeke sara kua gi na mbeni klase oko ndali ti aye oko oko. Me mo lingbi nga ti zia a-école mingi ndali ti mbeni ye oko, tongana a lingbi a wara ye so na lege ti afiltre mingi.

2. Na pekoni, a zia ambeni bouton so na lege ni a lingbi ti changé afiltre ni na pekoni .

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

Ahon ti tene mo sara kua na a-bouton ni, mo lingbi nga ti sara kua na ambeni ye ti formulaire tongana a-boîte ti sango, a-bouton ti radio, a-oko ndo so mo soro ni nga na ambeni ye tongaso.

Tongana ti so mo lingbi ti bâ, a-valeur ti bouton ni ayeke lakue a-selecteur ti CSS. Gi so e hunzi awe, tongana e cliqué na ndö ti mara ti bouton tongaso, a yeke fa na e a-image so alingbi na selecteur ti CSS so. Na lege ti ndara, lo zia gi option filter ni na ngele so.

Mo lingbi nga ti sala kusala na a-selecteur so ayeke ngangu mingi ahon. Na tapande :not(.animals) ayeke sala kusala nga, legeoko tongana .animals.people na .animals, .people .

3. Na pekoni, a yeke zia a-bouton ni na yâ ti mbeni bozo div na a yeke kanga ni na galerie ti Gridzy, na ziango 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>

Tongana ti so mo lingbi ti bâ, a yeke nga na mbeni ye ti soro na CSS ti soro na filterControls . Conteneur div so ayeke na attribut id ayeke sara kua gi ti sara si a-bouton ni aga ngangu pëpe ti soro ni na lege ti selecteur ti CSS so.

So ni la!

Tongana mo ye ti sara kua na JavaScript, bâ API .

API

Atâa so Gridzy ayeke na API ti lo wani, mingi ti aye alingbi ti sara sân ti tene lo sara kua na ni, gi na lege ti sarango kua na DOM. Gridzy ayeke bâ ni na lo yeke leke grille ni. Me a yeke nga na mbeni API so ayeke ngangu mingi ...

Ti sara kua na DOM .

Ti sara kua na Modèle ti aye ti mbeti (DOM) kue, a lingbi kozoni kue a lingbi a sara kua na élément ti conteneur ni:

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

Zia a-image na ndo ni

A yeke kota ye ti leke na ti mû fini ye ti molenge ni kue kozoni si mo zia ni na ndo ti ye ti conteneur ni. Tongaso pëpe, Gridzy alingbi pëpe ti hinga akota ye so ayeke na lege ni.

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

Zia a-image

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

Changé a-option .

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

Mo lingbi ti wara ambeni ye na ndo ti sarango kua na DOM na MDN web docs . Mbeni Kozo tënë ti DOM ayeke nga dä.

API ti propriétaire

Ti sala kusala na API, a lingbi kozoni kue a sala kusala na instance ti Gridzy, so abungbi na élément ti conteneur ti Gridzy:

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

Ge Option .

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

Ge a-option kue .

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

Zia a-option

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

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

Sara kua na Filtre

Ti sala kusala na mbeni filtre ayeke gi ti leke filter ti option so alingbi ti duti mbeni selector CSS so ayeke na lege ni:

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

Azo ti kua ti Callback .

A YEKE sara kua na ni ngbene ye na version 2.4.0.
Lo sara kua na a-Evénement ti ngoi ti e nga so ayeke flexible mingi. Bâ mbage so ayeke ga na pekoni ti hinga anzene nzene tënë na ndo ni.

~~Gridzy.js 2 amû maboko na ambeni ye ti sarango na kusala ti iringo azo. A lingbi ti leke ala gi na lege ti API ti propriétaire ni, me legeoko tongana ambeni ye nde:~~

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

	~~Fango ye~~
~~`onBeforeOptionsChanged`~~	~~Callback fonction so a iri ni directement kozoni si a zia a-option.~~
~~`onOptionsChanged`~~	~~Callback fonction so a iri ni directement na peko ti so a zia a-option.~~
~~`onBeforeRender`~~	~~Fonction ti callback so a iri ni directement kozo ti tene a sara kua na ni.~~
~~`onRender`~~	~~Fonction ti callback so a iri ni gï na peko ti so a sara rendu.~~

Lo sara kua na a-événement .

ngbene ye na version 2.4.0.

Lo lingbi ti sara kua na a-événement ti Gridzy mbilimbili tongana ti so a-événement ti JavaScript ayeke sara ka:

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

Ambeni ye so ayeke si na ndo ti élément ti conteneur ti Gridzy na ambeni ye so ayeke si na ndo ti a-élément ti aye oko oko so ayeke na yâ ti élément ti conteneur ni.

A yeke na lege ni ti tene e sara kua na élément ti conteneur ti Gridzy:

	Fango ye
`gridzyBeforeInit`	A yeke kozoni na galerie ti tongo nda ni.
`gridzyInit`	A yeke na peko ti galerie ti tongo nda ni.
`gridzyBeforeOptionsChanged`	A yeke sara kua na a-option.
`gridzyOptionsChanged`	A yeke na peko ti so a zia a-option.
`gridzyBeforeRender`	A yeke sara ni kozo ti tene a sara ni.
`gridzyRender`	A yeke na peko ti rendu.

Tongana mo manke ambeni ye so asi ge, tokua mbeni demande ti mungo maboko .

event.target ayeke mû na e aye ti batango na Gridzy.
event.detail.instance amû lege na Gridzy ti sara kua na ni.

A-événement so a sara na ndö ti a-élément:

	Fango ye
`gridzyItemBeforeInit`	A yeke kozoni ti tene a komanse ti sara kua.
`gridzyItemInit`	A yeke na peko ti so a komanse ti sara kua.
`gridzyItemLoading`	A yeke sara si ye ni akomanse ti charge.
`gridzyItemReady`	A yeke sara si ye ni aga nzoni ndali ti calcul ti grille. Tongaso, a hinga aspect ti image ni, me image ni alingbi ti ngbâ ti charge.
`gridzyItemComplete`	A yeke sara si image ti ye ni asi singo na aye.

Tongana mo manke ambeni ye so asi ge, tokua mbeni demande ti mungo maboko .

event.target ayeke mû na e aye so alingbi na e.
event.detail.instance amû lege na Gridzy ti sara kua na ni.

API – Dunia kue

Ambeni kusala ayeke dä so ayeke nde na a-instance ti Gridzy. Tongaso, a hunda pëpe ti wara mbeni tapande kozoni.

Ge Option ti defaut .

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

Ge la a yeke wara a-option kue .

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

Zia a-option ti defaut .

Ye so ayeke zia pëpe na sese a-option ti a-instance ti Gridzy kue so a to nda ni awe, me a yeke fa gunda ti afini instance. Me, tongana a yeke kiri na mbeni option ti mbeni instance so ayeke dä awe na lege ti ngere null , a yeke sara kua na fini ngere so a zia na sese.

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

E lingbi ti sala kusala na ye so ti leke a-option na ndo sese kue, tongana e iri ni kozoni si DOM aleke. Tongaso, mo yeke na bezoin ti zia a-option tongana a-attribut encore ape.

A-automatisme

Na ngoi so a-automatisme kue ti Gridzy.js 2 ayeke sala kusala, a hunda pëpe ti sala kusala na akode so ayeke na gbe ni ge. Me a lingbi ti kanga lege na a-automatisme ti sala kusala na Gridzy na mbeni lege so ayeke ti kodoro:

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

Ambeni ye so alingbi ti si pëpe na lege ti a-attribut data-gridzy- wala na lege ti setOptions() , ndali ti araison so ayeke na lege ni:

	Valeur ti defaut	Fango ye
`autoInitOnDomReady`	`true`	A yeke wara a-élément so ayeke na classe `gridzy` na ndo ti chargement ti page ni na a yeke komanse ni. A lingbi ti leke ni na lege ti `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Zo ti bango ye ti gbiango ye	`true`	A yeke wara afini ye so ayeke na classe `gridzy` gi tongana ala sigigi na yâ ti DOM na a yeke komanse ti sara kua na ni. (na tapande na ndo ti sarango kua na a-transition ti lembeti) A lingbi ti leke ni na lege ti `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Zo ti bango ye ti gbiango ye	`true`	A yeke hinga wala a zia wala a zi ambeni ye ti molenge (a-image), na a yeke sara si grille ni aga fini gi lo oko. A lingbi ti leke ni na lege ti `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	A fa wala a yeke sala kusala na a-attribut ti `data-gridzy-` wala pëpe. Tongana a yeke `false` a lingbi ti leke a-option gi na lege ti API ti propriétaire. A lingbi ti leke ni na lege ti `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Zo ti bango ye ti gbiango ye	`true`	A yeke wara achangement so ayeke na yâ ti a-attribut ti `data-gridzy-` , na a yeke sara si grille ni aga fini. A yeke nga nzoni ti hinga wala a zia wala a zi klase `gridzyAnimated` nga wala a changé a-attribut `style` . Tongana `useOptionAttributes` ayeke `false` , a yeke hinga gi achangement so ayeke na `style` . A lingbi ti leke ni na lege ti `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Zo ti bango ye ti gbiango ye	`true`	A yeke wara achangement na yâ ti a-attribut ti `class` ti a-élément kue ti amolenge (a-image). A yeke na lege ni na ndo ti afiltre. A lingbi ti leke ni na lege ti `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Zo ti bango ye ti gbiango ye ngbene ye na version 2.5.0.	`true`	A yeke wara achangement ti `src` ti a-image kue. A yeke nzoni tongana a sara kua na React wala ambeni bibliothèque tongaso. A lingbi ti leke ni na lege ti `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` gbian kota ti zo ti bango ndo ngbene ye na version 2.6.0.	`true`	A yeke wara achangement na yâ ti élément ni. A yeke na lege ni na ndo ti lekengo ye so ayeke kiri tënë. (Kozoni na version 2.6.0 a sala kusala na mbeni fenêtre ti gbian kota ti aye so asi) A lingbi ti leke ni na lege ti `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Initialisation na maboko

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

Futi Instance ni .

Na lege ti fä, a yeke nde na ti tongo nda ti Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Synchronisé Liste ti amolenge na maboko

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

Synchronisé mbeni élément ti molenge oko na maboko .

Mingi ni, a hunda ni pëpe, gi na yâ ti ambeni ye so ayeke si ka mingi pëpe.

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

Synchronisation ti a-attribut na maboko

Bâ so a lingbi option ti useOptionAttributes aduti true ndali ti ye so.

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

Fango ye na ngangu

Mingi ni, a hunda ni pëpe, même tongana a kanga a-automatique kue .

gridzyInstance.render();