Stumm 2.x – Gridzy.Gallery

Troet eo bet al lec'hienn ent emgefre. Ma n'eo ket sklaer un dra bennak, sellit ouzh an teuliadoù saoznek mar plij.

Implij diazez

Kargañ ar restroù Gridzy war ho servijer hag ouzhpennañ anezho war ho lec'hienn (er rann penn peurliesañ) :

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

Ouzhpennit ar c'hod HTML (e pep lec'h er rann korf) :

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

Setu tout ! Ur skouer fonnus penn-da-benn eo. N'eus ket ezhomm da zigeriñ ouzhpenn.

Kefluniadur

An doare aesañ da gefluniañ Gridzy eo implijout perzhioù HTML hepken. N'hoc'h eus ezhomm nemet lakaat data-gridzy- rakger anvioù an dibarzhioù. Neuze, evit lakaat an dibab spaceBetween , ouzhpennit an elfenn 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>

Dibarzhioù pennañ

	Talvoud dre ziouer	Deskrivadur
`animate`	`true`	Divizout a ra hag-eñ e ranker implijout bevaat pa vez kemmet ar gael (da skouer, pa vez kemmet ment prenestr ar merdeer pe pa vez arventennet ur sil).
`layout`	`justified`	Termeniñ a ra an tres arveret. Gridzy.js 2 a skor an daou zoare disheñvel `justified` ha `waterfall` . Pep hini anezho en deus e arventennoù dibab ouzhpenn, a c'hallit kavout dindan an daolenn-mañ.
`filter`	`*`	Divizout a ra peseurt skeudennoù a zlefe bezañ diskouezet. Ne vern peseurt diuzad CSS a c'hall bezañ implijet evel talvoud amañ. Peurliesañ e vez arventennet ent emgefre dre `filterControls` (gwelet an dibarzh da heul). Sellit ouzh Siloù
`filterControls`		Termeniñ a ra peseurt elfennoù furmskrid a c'haller implijout evit silañ ar skeudennoù. Ne vern peseurt diuzad CSS, a zibab elfennoù furmskrid HTML, a c'hall bezañ implijet evel talvoud amañ. Sellit ouzh Siloù
`autoConsiderScrollBars`	`true`	Evit rakwelet al ledander a c'haller kaout ma teu war wel pe ma teu ar barrennoù riklañ war wel. Aliet e vez bepred lezel anezhañ war `true` nemet pa vez kudennoù gant an emgefre-mañ.

Justified Dibarzhioù tresañ

	Talvoud dre ziouer	Deskrivadur
`autoFontSize`	`false`	Hizivaat a ra ent emgefre perzh ment ar voest pep voest diouzh ment ar voest orin. Dre ziouer n'eo ket arventennet splann ar perzh font-size.
`desiredHeight`	`190`	Termeniñ a ra uhelder ar renkennadoù elfennoù a fell deoc'h. Jedet e vo an uhelder gwirion diouzh al ledander a c'haller kaout hag an elfennoù er renk.
`hideOnMissingImage`	`true`	Kuzhat a ra ar boestoù a endalc'h skeudennoù n'hallont ket bezañ karget.
`spaceBetween`	`4`	Termeniñ a ra ar pellder etre an elfennoù e pikseloù.
`lastRowAlign` abaoe ar stumm 2.3.0	`justified`	Termeniñ a ra emzalc'h al linenn ziwezhañ. Ar gwerzhioù aotreet a zo `left` , `center` , `right` ha `justified` .
`singleRowAlign` abaoe ar stumm 2.3.0	`justified`	Termeniñ a ra an emzalc'h ma n'eus nemet ur renkennad hepken. Ar gwerzhioù aotreet a zo `left` , `center` , `right` ha `justified` .
~~`fillLastRow`~~ ~~abaoe ar stumm 2.1.0~~	~~`true`~~	DILAMET abaoe ar stumm 2.4.0 (Diweredekaet abaoe ar stumm 2.3.0 ) Renkañ a ra ar skeudennoù evel ma vo leuniet penn-da-benn al linenn ziwezhañ bepred. Ma fell deoc'h ouzhpennañ skeudennoù en un doare dinamek e c'hallfe bezañ ur mennozh mat diweredekaat an dra-se. N'eus efed ebet war linennoù hepken (gwelet `fillSingleRow` ).
`fillSingleRow` abaoe ar stumm 2.1.0	~~`true`~~	DILAMET abaoe ar stumm 2.4.0 (Diweredekaet abaoe ar stumm 2.3.0 ) Ma n'eus nemet ur renk e renk ar skeudennoù en un doare ma vo leuniet penn-da-benn ar renk atav. Ma c'hoarvez n'hoc'h eus nemet unan pe ziv skeudenn er palier, e c'hallfe bezañ ur mennozh mat diweredekaat an dra-se.

Waterfall Dibarzhioù tresañ

	Talvoud dre ziouer	Deskrivadur
`autoFontSize`	`false`	Hizivaat a ra ent emgefre perzh ment ar voest pep voest diouzh ment ar voest orin. Dre ziouer n'eo ket arventennet splann ar perzh font-size.
`desiredWidth`	`250`	Termeniñ a ra al ledander c'hoantaet evit ar bannoù. Ar ledander gwirion a vo jedet diouzh al ledander a c'haller kaout hag an niver a vannoù.
`hideOnMissingImage`	`true`	Kuzhat a ra ar boestoù a endalc'h skeudennoù n'hallont ket bezañ karget.
`horizontalOrder`	`false`	Termeniñ a ra e vez lakaet an elfennoù un elfenn strizh e pep bann eus an tu kleiz d'an tu dehou, ha goude-se e krog en-dro er bann a-gleizañ diouzh peseurt bann a zo muioc'h a blas. Dre ziouer e vo lakaet an elfennoù bepred er bann gant an uhelder vihanañ.
`spaceBetween`	`4`	Termeniñ a ra ar pellder etre an elfennoù e pikseloù.
`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`.

Dibarzhioù araokaet muioc'h

Evit dibaboù araokaet, sellit ouzh an API .

HTML semantek

Hemañ eo framm HTML simplañ 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>

Koulskoude eo Gridzy hewel-tre ha gallout a rit implijout kazi kement framm HTML all. N'eus nemet un nebeud poentoù da sellet outo :

Pep bugel eus an elfenn endalc'her a zastum un elfenn er gael.
An elfenn endalc'her hag he bugale a c'hell bezañ ne vern pe seurt tikedenn, evel ul ha li (soñjit adderaouekaat arventennoù dre ziouer ar merdeer hepken).
Ma n'eo ket un elfenn img ur bugel reizh hec'h-unan, ezhomm he deus eus ar c'hlas gridzyImage .

Setu ivez ur framm HTML o vont en-dro :

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

Dreist-holl ma fell deoc'h ouzhpennañ istitloù, ezhomm ho peus eus ur framm HTML araokaet. Evit gouzout hiroc'h diwar e benn, sellit ouzh Captions & Skins .

Titloù ha skinoù

Mar fell deoc'h ouzhpennañ istitloù d'ho palier, e rankit termeniñ an neuz. Dre-se e c'haller kaout skinoù termenet en a-raok. Pep skin ennañ ur restr CSS. Ret eo deoc'h ouzhpennañ ar restr-mañ ouzhpenn ar restroù Gridzy pennañ (er rann penn peurliesañ) :

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

Ouzhpenn-se ezhomm ho peus eus ur framm HTML araokaet :

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

Ma 'z oc'h o klask gouzout hiroc'h diwar-benn framm an HTML, sellit ouzh HTML semantek .

Evit an titl e c'hallit implijout ne vern peseurt tikedenn, gwiriit ez eus ar rummad gridzyCaption ennañ. Ezhomm en deus an elfenn img eus ar c'hlas gridzyImage .

Ar skouer a-us a ziskouez deoc'h ar c'hroc'hen gridzySkinClassic . Evit implijout unan all, n'ho peus nemet erlec'hiañ anv ar skin gant unan eus ar re-mañ :

Skinoù enni

	Kentelioù hegerz
gridzySkinBlank ur poent loc'hañ mat evit krouiñ ur c'hroc'hen deoc'h-c'hwi rakweledenn war-eeun	`gridzySkinBlank`
gridzySkinClassic rakweledenn war-eeun	`gridzySkinClassic` `gridzySkinClassicLight`(Diweredekaet abaoe ar stumm 2.6.0)
gridzySkinFullOverlay rakweledenn war-eeun	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(Diweredekaet abaoe ar stumm 2.6.0)
gridzySkinLift rakweledenn war-eeun	`gridzySkinLift` `gridzySkinLiftLight`(Diweredekaet abaoe ar stumm 2.6.0)
gridzySkinMagnifier arc'hwelioù zoumañ n'int ket enlakaet rakweledenn war-eeun	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(Diweredekaet abaoe ar stumm 2.6.0)

An holl skinoù meneget a-us n'o deus ezhomm nemet eus ur restr CSS, met ez eus skinoù ouzhpenn a c'houlenn ur restr JavaScript ivez :

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

	Kentelioù hegerz
gridzySkinBlur ne ya ket en-dro en IE rakweledenn war-eeun	`gridzySkinBlur` `gridzySkinBlurLight`(Diweredekaet abaoe ar stumm 2.6.0)
gridzySkinCard rakweledenn war-eeun	`gridzySkinCard` `gridzySkinCardLight`(Diweredekaet abaoe ar stumm 2.6.0)

Dibarzhioù ar c'hroc'hen

Abaoe ar stumm 2.6.0 ez eus Dibarzhioù evit kefluniañ ar skinoù enkorfet. Hervez ar c'hroc'hen resis e c'hallit termeniñ liv an drekleur, liv an destenn ha skeud an destenn. Ret eo deoc'h implijout perzhioù personelaet CSS evel ma welit amañ :

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

Sellit ouzh an argemmennoù skoret hag ouzh an talvoudoù dre ziouer evit pep skin amañ :

gridzySkinClassic

Argemmenn	Talvoud dre ziouer	Keloù
`--background`	`rgba(0, 0, 0, .7)`	aotren ne vern peseurt talvoud dre ziouer CSS
`--color`	`rgb(255, 255, 255)`	aotren kement talvoud liv CSS
`--text-shadow`	`none`	aotren kement talvoud skeud-destenn CSS

gridzySkinFullOverlay

Argemmenn	Talvoud dre ziouer	Keloù
`--background`	`rgba(0, 0, 0, .7)`	aotren ne vern peseurt talvoud dre ziouer CSS
`--color`	`rgb(255, 255, 255)`	aotren kement talvoud liv CSS
`--text-shadow`	`none`	aotren kement talvoud skeud-destenn CSS

gridzySkinLift

Argemmenn	Talvoud dre ziouer	Keloù
`--background`	`rgba(0, 0, 0, .7)`	aotren ne vern peseurt talvoud dre ziouer CSS
`--color`	`rgb(255, 255, 255)`	aotren kement talvoud liv CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	aotren kement talvoud skeud-destenn CSS

gridzySkinMagnifier

Argemmenn	Talvoud dre ziouer	Keloù
`--background`	`rgba(0, 0, 0, .7)`	aotren ne vern peseurt talvoud dre ziouer CSS
`--color`	`rgb(255, 255, 255)`	aotren kement talvoud liv CSS

Ne skor ket ar skin-mañ --text-shadow

gridzySkinBlur

Argemmenn	Talvoud dre ziouer	Keloù
`--background`	`rgba(0, 0, 0, .7)`	aotren ne vern peseurt talvoud dre ziouer CSS
`--color`	`rgb(255, 255, 255)`	aotren kement talvoud liv CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	aotren kement talvoud skeud-destenn CSS

gridzySkinCard

Argemmenn	Talvoud dre ziouer	Keloù
`--background`	`rgba(0, 0, 0, 1)`	aotren ne vern peseurt talvoud dre ziouer CSS
`--color`	`rgb(255, 255, 255)`	aotren kement talvoud liv CSS
`--text-shadow`	`none`	aotren kement talvoud skeud-destenn CSS

An holl skinoù termenet en a-raok ne c'hallont nemet titloù testenn eeun. Gallout a rit krouiñ ho skinoù hoc'h-unan ha kemplesoc'h. Sellit ouzh Style Gridzy mar plij.

Gridzy stil

Ma n'eus kroc'hen termenet en a-raok ebet a glot gant ho ezhommoù, e c'hallit stilañ ho hini hoc'h-unan.

An doare aesañ eo kopiañ ur skin zo anezhañ da gentañ ha lakaat anezhañ da glotañ gant ho ezhommoù. Ar skin raktermenet gridzySkinBlank a ginnigfe peurliesañ ur fondasion vat hag ivez un teuliad mat er restr 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;
}

Er restr CSS e kavoc'h ar c'hlasoù gridzySkinBlank , gridzyImage ha gridzyCaption . Gridzy e-unan n'en deus ket ezhomm eus ar c'hlasoù-se. Implijet e vezont evit ar stilañ hepken ha gallout a rit o lemel pe o anv ma fell deoc'h.

Ouzhpenn-se e kavoc'h ar c'hlas CSS gridzyItem . Gridzy a laka ar c'hlas-mañ ent emgefre da holl vugale reizh an elfenn endalc'her pennañ. Neuze, gallout a rit implijout ar c'hlas-mañ evit stilañ elfennoù ho palier.

Ment Traoù Pouezus

Danvez an elfenn a zlefe bezañ respontus penn-da-benn. Soñjit e cheñcho ment an elfenn diouzh ar c'hiz. Implijit talvoudoù dregantad e-lec'h talvoudoù piksel. Ha sellit ouzh an dibab tresañ Gridzy autoFontSize , a liamm ment ar font ouzh ment ar voest elfenn.
Pep elfenn a zlefe kaout ur feur stumm termenet mat. Ne cheñcho ket ment an elfenn ha ret eo evit jediñ ar gael. Neuze, ma n'eus ket gant un elfenn ur feur stumm termenet mat ent emgefre, raktermenit anezhañ dre zorn (da sk. dre css).

E lod degouezhioù e c'hall bezañ aesoc'h stilañ endalc'had an elfennoù a-raok ma vo arloet Gridzy. Dilemel ar c'hlas gridzy pe ar restr javascript Gridzy evit ur pennadig evit se.

Setu tout ! Setu ar pezh a rankit evit sevel ho kroc'hen hoc'h-unan. An darn vrasañ eus ar skinoù termenet en a-raok ne implijont ket muioc'h eget se.

Met muioc'h a c'hellfe bezañ ma fell deoc'h ...

Skinoù araokaet

Gridzy a implij muioc'h a rummadoù CSS eget gridzyItem hepken. Arventennet e vo an darn vrasañ anezho ent emgefre ha gallout a rit o implijout evit ar stilañ ivez.

Klasoù endalc'herioù pennañ

Anv ar c'hlas	Deskrivadur
`gridzy` da lakaat dre zorn	Gridzy a gav ent emgefre elfennoù gant ar c'hlas-mañ hag a laka anezho da vont en-dro.
`gridzyAnimated`	Lakaet e vo ent emgefre ma'z eo `true` an `animate` bevaat. Ma vez arventennet ar c'hlas-mañ dre zorn e vo `true` an dibab `animate` ent emgefre ivez (nemet ma vez arventennet splann da `false` ).

Klasoù elfennoù

Anv ar c'hlas	Deskrivadur
`gridzyItem`	Arventennet e vo kerkent ha ma krogo an elfenn gant an argerzh loc'hañ. Ne vo ket tennet kuit biskoazh.
`gridzyItemInitializing`	Arventennet e vo kerkent ha ma krogo an elfenn gant an argerzh loc'hañ. Erlec'hiet e vo gant `gridzyItemReady` kerkent ha ma vo arloet an elfenn penn-da-benn. Ne dalvez ket eo karget penn-da-benn ar skeudennoù (gwelet `gridzyItemLoading` ), met prest eo an elfenn da vezañ gwelet.
`gridzyItemReady`	Erlec'hiañ a raio `gridzyItemInitializing` kerkent ha ma vo arloet penn-da-benn an elfenn. Ne vo ket tennet kuit biskoazh. N'eo ket karget penn-da-benn ar skeudennoù (gwelet `gridzyItemComplete` ), met prest eo an elfenn da vezañ gwelet.
`gridzyItemLoading`	Arventennet e vo kerkent ha ma krogo an elfenn gant an argerzh loc'hañ. Erlec'hiet e vo gant `gridzyItemComplete` kerkent ha ma vo karget penn-da-benn ar skeudennoù enno (unan hepken peurliesañ).
`gridzyItemComplete`	Erlec'hiañ a raio `gridzyItemLoading` kerkent ha ma vo karget penn-da-benn ar skeudennoù enno (unan hepken peurliesañ). Ne vo ket tennet kuit biskoazh.
`gridzyItemInitialToVisible`	Arventennet e vo kerkent ha ma krogo an elfenn da zont war wel ar wech kentañ. Tennet e vo kerkent ha ma vo gwelet an elfenn penn-da-benn.
`gridzyItemVisible`	Arventennet e vo kerkent ha ma vo gwelet an elfenn penn-da-benn. Tennet e vo kerkent ha ma krogo an elfenn da vont da get.
`gridzyItemVisibleToHidden`	Arventennet e vo kerkent ha ma krogo an elfenn da vont da get. Tennet e vo kerkent ha ma vo kuzhet penn-da-benn an elfenn.
`gridzyItemHidden`	Arventennet e vo kerkent ha ma vo kuzhet penn-da-benn an elfenn. Tennet e vo kerkent ha ma krogo an elfenn da zont war wel.
`gridzyItemHiddenToVisible`	Arventennet e vo kerkent ha ma krogo an elfenn da zont war wel (nemet dont war wel ar wech kentañ – gwelit ar c'hlas `gridzyItemInitialToVisible` ). Tennet e vo kerkent ha ma vo gwelet an elfenn penn-da-benn.
`gridzyItemVisibleToVisible`	Arventennet e vo kerkent ha ma vo cheñchet un dra bennak er gael, met an elfenn hec'h-unan a oa ha chom a raio gwelet. Dilamet e vo kerkent ha ma vo echuet an tresadennoù-bev kemm.

Dre ziouer e vez termenet en a-raok an arouezer argerzh hag an tresadennoù-bev evit ar skeudennoù a zeu war wel hag a ya kuit gant ar restr CSS pennañ Gridzy.

Gant ar c'hlasoù CSS meneget a-us e c'hallit stilañ ho merk argerzh hag ho bevaat. Sellit ouzh restr CSS pennañ Gridzy, evit kompren ar pezh a vo ret deoc'h diverkañ. Aon ebet, pep tra a zo teuliet mat eno.

Gwellaat ar c'hargañ

Ma implijit kalz skeudennoù e c'hallfe bezañ ur mennozh mat sikour Gridzy da sevel ar gael buanoc'h.

Diwall ouzh ar skeudennoù da lammat

Ezhomm en deus Gridzy eus ment an holl skeudennoù evit jediñ ar gael. Ar fedoù-se a zegas elfennoù lammat ma vez prest skeudennoù zo ha re all n'int ket. Seul vuioc'h a skeudennoù a vez, seul nec'husoc'h e c'hell bezañ an efed-se.

Evit mirout ouzh an emzalc'h-mañ, lakait perzhioù width ha height evit an holl elfennoù img . Pouezus eo lakaat an talvoudoù reizh evit pep skeudenn hiniennel, a-hend-all e vefe distummet ar skeudennoù. Ar gwerzhioù reizh eo ledander ha uhelder orin ar skeudenn :

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

Goude-se e c'hall Gridzy jediñ ar gael diouzhtu hep bezañ ezhomm da c'houzout ment ar skeudennoù e gwirionez.

Kargañ lezirek

Evit kargañ ar skeudennoù a zo er gwel gwelus hepken, heuliit ar pazennoù-mañ :

Enlakait perzhioù width ha height evel deskrivet a-us (gwiriit e implijit an talvoudoù reizh)
Erlec'hiañ an holl elfennoù src gant data-gridzylazysrc evel m'eo diskouezet amañ dindan (ma'z eus perzhioù srcset ganeoc'h ivez, erlec'hiit anezho gant 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>

Goude ar pazennoù-mañ e vo karget ar skeudennoù kerkent ha ma vint e-kichen pe e-barzh ar gwel.

Diskouezer an argerzh

An arouezenn argerzh eo an arlun bevaat bihan a zeu war wel e-pad ma vez karget ar skeudenn. Ma implijit titloù ha skinoù e vo diskouezet an arouezenn argerzh ent emgefre. A-hend-all e rankit kemmañ traoù :

Lakaat pep elfenn img en un elfenn div
(pe e kement elfenn all – gwelit HTML semantek evit gouzout hiroc'h)
Ouzhpennañ ar c'hlas gridzyImage da bep elfenn img

<div class="gridzy">
  <div><img src="https://loremflickr.com/640/480?random=1" class="gridzyImage" alt="a random image" /></div>
  <div><img src="https://loremflickr.com/480/640?random=2" class="gridzyImage" alt="another random image" /></div>
  <div><img src="https://loremflickr.com/640/640?random=3" class="gridzyImage" alt="yet another random image" /></div>
  <div><img src="https://loremflickr.com/640/480?random=4" class="gridzyImage" alt="a random image again" /></div>
  <div><img src="https://loremflickr.com/640/480?random=5" class="gridzyImage" alt="one last random image" /></div>
</div>

Goude-se e tlefec'h gwelet an arouezioù argerzh ma vez ezhomm pell evit kargañ ar skeudennoù.

Siloù

Simpl a-walc'h met galloudus eo ar siloù e Gridzy. N'eus forzh peseurt sil ho peus ezhomm, sur a-walc'h e c'hallfe bezañ graet. N'eus ezhomm ebet nemet eus un tamm CSS hag un nebeud elfennoù furmskrid HTML ...

Setu ur skouer fonksionel :

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

Sevel a reomp tamm-ha-tamm

1. Da gentañ e rankomp kaout ar framm HTML boas eus Gridzy ha lakaat anvioù ar c'hlasoù evit an holl elfennoù eus ar palier evit ma c'hellfemp o silañ goude

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

Er skouer-mañ ne implijomp nemet ur c'hlas evit pep elfenn. Met gallout a rit ivez lakaat meur a rummad evit un elfenn hepken, ma rank an elfenn-se bezañ kavet dre meur a sil.

2. Neuze e ouzhpennomp boutonoù drezo e c'hellomp cheñch ar siloù neuze

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

E-lec'h ar boutonoù e c'hallit implijout elfennoù furmskrid all evel boestoù-gwiriañ, boutonoù radio, maeziennoù diuzet hag all.

Evel ma welit, talvoudoù ar boutonoù a zo diuzadoù CSS boas. Kerkent ha ma vo echu, ur c'hlik war ur bouton evel-se a ziskouez ar skeudennoù a glot gant an diuzad CSS-se. E gwirionez e laka an dibarzh filter d'ar werzh-mañ hepken.

Gallout a rit implijout diuzadoù kalz kempleshoc'h ivez. Da skouer :not(.animals) a yafe en-dro ivez, evel .animals.people ha .animals, .people .

3. Evit echuiñ, enkorfañ a reomp ar boutonoù en un endalc'her div ha liammañ anezho ouzh ar palier Gridzy, en ur lakaat an dibarzh 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>

Evel ma welit, implijout a reomp ivez un diuzad CSS evit an dibarzh filterControls . An endalc'her div gant an elfenn id ne servij nemet da aesaat ar boutonoù da zibab dre an diuzad CSS-se.

Setu tout !

Mar plij deoc'h un diskoulm JavaScript, sellit ouzh an API .

API

Daoust ma 'z eus gant Gridzy e API e-unan e c'haller ober an darn vrasañ eus an traoù heptañ, dre dreuzfurmiñ an DOM hepken. Gridzy a welo an dra-se hag a adreizho ar gael. Met un API galloudus-kenañ zo ivez ...

Ober gant an DOM

Evit an holl zarempredoù Document Object Model (DOM) ezhomm hon eus da gentañ eus an elfenn endalc'her :

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

Ouzhpennañ skeudennoù

Pouezus eo sevel ha leuniañ an elfenn bugel nevez penn-da-benn a-raok he ouzhpennañ d'an elfenn endalc'her. A-hend-all ne c'hallo ket Gridzy detektiñ ar mentoù reizh.

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

Dilemel ar skeudennoù

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

Cheñch an dibarzhioù

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

Muioc'h a ditouroù diwar-benn ober gant an DOM a c'hallit kavout war MDN web docs . Ur pennad-stur d'an DOM a c'haller kaout ivez.

API perc'hennet

Evit implijout an API, ezhomm hon eus da gentañ eus an ensavadur Gridzy, a zo liammet ouzh elfenn endalc'her Gridzy :

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

Kaout an dibab

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

Kaout an holl zibaboù

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

Lakaat an dibarzhioù

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

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

Arverañ ar sil

Arverañ ur sil a zo arventennañ ar filter dibaboù a c'hell bezañ un diuzad CSS reizh :

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

Ouzhpennañ arc'hwelioù galv en-dro

DIWAR-BENN abaoe ar stumm 2.4.0
Implijit an Darvoudoù modern ha souplesoc'h e-lec'h. Sellit ouzh ar pennad da heul evit gouzout hiroc'h.

~~Gridzy.js 2 a skor un nebeud dibaboù evit arc'hwelioù galv en-dro. N'hallont bezañ arventennet nemet dre an API perc'hennet, met evel an dibaboù all :~~

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

	~~Deskrivadur~~
~~`onBeforeOptionsChanged`~~	~~Arc'hwel galv en-dro a vez galvet war-eeun a-raok arventennañ an dibarzhioù.~~
~~`onOptionsChanged`~~	~~Arc'hwel galv en-dro a vez galvet diouzhtu goude bezañ arventennet an dibarzhioù.~~
~~`onBeforeRender`~~	~~Arc'hwel galv en-dro a vez galvet war-eeun a-raok ar rendezañ.~~
~~`onRender`~~	~~Arc'hwel galv en-dro a vez galvet diouzhtu goude ar rendez.~~

Implijout darvoudoù

abaoe ar stumm 2.4.0

Gallout a rit implijout darvoudoù Gridzy evel darvoudoù JavaScript boas :

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

Lod darvoudoù a vez lañset war an elfenn endalc'her Gridzy ha darvoudoù all a vez lañset war an elfennoù elfenn hiniennel e-barzh an elfenn endalc'her.

Darvoudoù kaset da benn war an elfenn endalc'her Gridzy :

	Deskrivadur
`gridzyBeforeInit`	Tennañ a ra a-raok loc'hañ ar palier.
`gridzyInit`	Tennañ a ra goude loc'hañ ar palier.
`gridzyBeforeOptionsChanged`	Tennañ a ra a-raok lakaat an dibarzhioù.
`gridzyOptionsChanged`	Tennañ a ra goude bezañ arventennet an dibarzhioù.
`gridzyBeforeRender`	Tennañ a ra a-raok ar renkadur.
`gridzyRender`	Tan goude ar rentadur.

Ma chomfec'h hep darvoud ebet amañ, kasit ur goulenn skoazell mar plij.

event.target a ginnig an elfenn endalc'her Gridzy.
event.detail.instance a ginnig an instans Gridzy.

Darvoudoù kaset da benn war elfennoù an elfenn :

	Deskrivadur
`gridzyItemBeforeInit`	Tennañ a ra a-raok arloañ an elfenn.
`gridzyItemInit`	Tennañ a ra goude arloañ an elfenn.
`gridzyItemLoading`	Tennañ a ra pa grog an elfenn da gargañ.
`gridzyItemReady`	Tennañ a ra pa vez prest an elfenn evit jediñ ar gael. Anavezet eo neuze ar feur skeudenn, met marteze emañ ar skeudenn o kargañ c'hoazh.
`gridzyItemComplete`	Lakaat a ra da darzhañ pa vez karget penn-da-benn ar skeudenn elfenn.

Ma chomfec'h hep darvoud ebet amañ, kasit ur goulenn skoazell mar plij.

event.target a ginnig an elfenn elfenn a-fet.
event.detail.instance a ginnig an instans Gridzy.

API – Hollvedel

Ur bern arc'hwelioù zo dizalc'h diouzh skouerennoù Gridzy. Neuze n'hon eus ket ezhomm da gaout un ensavadur a-raok.

Kaout an dibab dre ziouer

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

Kaout an holl zibarzhioù dre ziouer

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

Lakaat an dibarzhioù dre ziouer

N'eo ket termenet an dibarzhioù evit an holl skouerennoù Gridzy bet krouet dija, met termeniñ a ra ar bazenn evit skouerennoù nevez. Koulskoude, ma vefe adloc'het un dibarzh eus un ensavadur zo anezhañ dre ar werzh null , e vo arveret ar werzh dre ziouer nevez.

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

Gallout a rit implijout an dra-se evit termeniñ an dibarzhioù dre vras, ma c'halvit anezhañ a-raok ma vo prest DOM. Neuze ne vefe ket ret deoc'h lakaat an dibarzhioù evel perzhioù ken.

Emgefreoù

Keit ha ma vo oberiant holl emgefreoù Gridzy.js 2, n'eus ket ezhomm eus an doareoù da-heul. Met an emgefreoù a c'hell bezañ lazhet evit implijout Gridzy en un doare hengouneloc'h :

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

Lod eus an dibarzhioù-mañ n'hallont ket bezañ arventennet dre elfennoù data-gridzy- pe dre setOptions() , abalamour da abegoù reizhel :

	Talvoud dre ziouer	Deskrivadur
`autoInitOnDomReady`	`true`	Detektiñ a ra elfennoù gant ar c'hlas `gridzy` pa vez karget ar bajenn ha loc'hañ anezho. Arventennet dre `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Arvesterien ar c'hemmoù	`true`	Detektiñ a ra elfennoù nevez gant ar c'hlas `gridzy` kerkent ha ma teuont war wel en DOM ha loc'hañ anezho. (da sk. diwar-benn implijout treuzfurmadurioù pajennoù) Arventennet dre `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Arvesterien ar c'hemmoù	`true`	Gwelout a ra hag-eñ eo bet ouzhpennet pe tennet elfennoù bugel (skeudennoù), ha hizivaat a ra ar gael ent emgefre. Arventennet dre `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Termeniñ a ra hag-eñ e vez implijet an elfennoù `data-gridzy-` dre vras pe get. Mard eo `false` e c'hall an dibarzhioù bezañ arventennet dre an API perc'hennet hepken. Arventennet dre `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Arvesterien ar c'hemmoù	`true`	Detektiñ a ra kemmoù an elfennoù `data-gridzy-` , ha hizivaat a ra ar gael ent emgefre. Detektiñ a ra ivez ma vez ouzhpennet pe tennet ar c'hlas `gridzyAnimated` ha ma c'hoarvez kemmoù e doareenn `style` . Mard eo `false` `useOptionAttributes` , ne zizolo nemet kemmoù doareenn `style` . Arventennet dre `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Arvesterien ar c'hemmoù	`true`	Detektiñ a ra kemmoù perzhioù `class` eus an holl elfennoù bugel (skeudennoù). Talvoudus evit ar siloù. Arventennet dre `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Arvesterien ar c'hemmoù abaoe ar stumm 2.5.0	`true`	Detektiñ a ra kemmoù perzhioù `src` an holl skeudennoù. Talvoudus pa vez implijet gant React pe levraouegoù heñvel. Arventennet dre `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Adment an arvester abaoe ar stumm 2.6.0	`true`	Detektiñ a ra kemmoù ledander an elfenn. Talvoudus evit a sell ouzh an tresañ respontus. (A-raok ar stumm 2.6.0 e veze implijet ur selaouer darvoud ment ar prenestr) Arventennet dre `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Arloañ dre zorn

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

Distrujañ an ensavadur

Dre vras, ar c'hontrol da arverañ Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sinkronizañ ar roll bugale dre zorn

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

Sinkronelaat un elfenn bugel hepken dre zorn

Peurliesañ n'eo ket ezhomm, nemet e degouezhioù ral-tre.

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

Sinkronelaat an elfennoù dre zorn

Notit e rank an dibarzh useOptionAttributes bezañ true evit se.

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

Rediñ dre nerzh

N'eo ket ret peurliesañ, memes ma vez diweredekaet an holl emgefreoù

gridzyInstance.render();

Enlugellad WordPress

Levraoueg JavaScript

Servij