Verisiyo 2.x – Gridzy.Gallery .

Urubuga rwahinduwe ubwarwo. Niba hari ikintu kitasobanutse, ndabinginze murabe inyandiko z’icongereza.

Ikoreshwa ry'ishimikiro

Shira amadosiye ya Gridzy kuri server yawe maze uyashire ku rubuga rwawe (kenshi mu gice c'umutwe):

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

Yongerako kode ya HTML (aho hose mu gice c'umubiri):

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

Ni vyo! Ukwo ni akarorero gakora neza. Nta n’ibindi bisabwa vyo gutangura.

Gutunganya

Uburyo bworoshe bwo gutunganya Gridzy ni, gukoresha gusa ibiranga HTML. Ukeneye gusa gutangura amazina y'amahitamwo data-gridzy- . Rero, kugira ngo ushireho spaceBetween , wongereko gusa akaranga 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>

Amahitamwo nyamukuru

	Agaciro mburabuzi	Imvugo
`animate`	`true`	Igena nimba amashusho akwiye gukoreshwa igihe uruzitiro ruhindutse (nk'akarorero, igihe uhindura ingano y'idirisha ry'umucukumbuzi canke igihe ushiraho akayunguruzo).
`layout`	`justified`	Isobanura imiterere ikoreshwa. Gridzy.js 2 ishigikira imiterere ibiri itandukanye `justified` na `waterfall` . Imwe yose muri zo ifise amahitamwo yayo y’inyongera, ushobora kuyisanga munsi y’iyi mbonerahamwe.
`filter`	`*`	Igena amashusho akwiye kwerekanwa. Igihitamwo cose ca CSS gishobora gukoreshwa nk'agaciro hano. Kenshi bishirwaho ubwavyo biciye ku `filterControls` (raba uburyo bukurikira). Raba amayunguruzo
`filterControls`		Igena ibintu bishobora gukoreshwa mu kuyungurura amashusho. Ihitamwo ryose rya CSS, rihitamwo ibintu vy'ifomu ya HTML, rishobora gukoreshwa nk'agaciro hano. Raba amayunguruzo
`autoConsiderScrollBars`	`true`	Kugira ngo umenye ubwaguke buriho nimba imirongo y’uruzitiro iboneka canke izimangana. Ni vyiza kwama uyisiga kuri `true` kiretse iyo automatisme iteye ingorane.

Justified Amahitamwo y'imiterere

	Agaciro mburabuzi	Imvugo
`autoFontSize`	`false`	Ihindura ubwayo ubunini bw'inyuguti bw'agasanduku kose bishingiye ku bunini bw'agasanduku k'umwimerere. Ku mburabuzi, ubunini bw'inyuguti ntibushizweho mu buryo bugaragara.
`desiredHeight`	`190`	Isobanura uburebure bwifuzwa bw'imirongo y'ibintu. Uburebure nyabwo buzoharurwa bivanye n'ubwaguke buriho n'ibintu biri mu murongo.
`hideOnMissingImage`	`true`	Hisha amasandugu arimwo amashusho atashobora gushirwako.
`spaceBetween`	`4`	Isobanura urugendo hagati y'ibintu mu bipimo.
`lastRowAlign` kuva kuri verisiyo 2.3.0	`justified`	Sigura inyifato y'umurongo wa nyuma. Agaciro kemerewe ni `left` , `center` , `right` na `justified` .
`singleRowAlign` kuva kuri verisiyo 2.3.0	`justified`	Sigura inyifato iyo hari umurongo umwe gusa. Agaciro kemerewe ni `left` , `center` , `right` na `justified` .
~~`fillLastRow`~~ ~~kuva kuri verisiyo 2.1.0~~	~~`true`~~	VYAKUWEHO kuva kuri verisiyo 2.4.0 (BIRASHIKIRIJWE kuva kuri verisiyo 2.3.0 ) Gutunganya amashusho kugira ngo umurongo wa nyuma wama wuzuye. Niba utegura kwongerako amashusho mu buryo buhinduka, vyoshobora kuba iciyumviro ciza guhagarika ivyo. Ntaco bihindura ku mirongo imwe (raba `fillSingleRow` ).
`fillSingleRow` kuva kuri verisiyo 2.1.0	~~`true`~~	VYAKUWEHO kuva kuri verisiyo 2.4.0 (BIRASHIKIRIJWE kuva kuri verisiyo 2.3.0 ) Iyo hari umurongo umwe gusa, iratunganya amashusho kugira ngo uwo murongo wama wuzuye. Niba bishobora gushika ko ufise ishusho imwe canke zibiri gusa mu nzu y’ibishushanyo, vyoshobora kuba vyiza ubizimye.

Waterfall y'imiterere

	Agaciro mburabuzi	Imvugo
`autoFontSize`	`false`	Ihindura ubwayo ubunini bw'inyuguti bw'agasanduku kose bishingiye ku bunini bw'agasanduku k'umwimerere. Ku mburabuzi, ubunini bw'inyuguti ntibushizweho mu buryo bugaragara.
`desiredWidth`	`250`	Isobanura ubwaguke bwifuzwa bw'inkingi. Ubwaguke nyabwo buzoharurwa bivanye n’ubwaguke buriho be n’umubare w’inkingi.
`hideOnMissingImage`	`true`	Hisha amasandugu arimwo amashusho atashobora gushirwako.
`horizontalOrder`	`false`	Isobanura ko ibintu bishirwaho ikintu kimwe muri buri nkingi kuva ibubamfu gushika iburyo, hanyuma igasubira gutangura mu nkingi y'ibubamfu cane yigenga aho inkingi iri ahantu henshi. Ku mburabuzi ibintu bizoma bishirwa mu nkingi ifise uburebure butoyi.
`spaceBetween`	`4`	Isobanura urugendo hagati y'ibintu mu bipimo.
`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`.

Amahitamwo ayandi ateye imbere

Kubindi bihitamwo biteye imbere, raba API .

Insobanuro ya HTML

Uburyo bworoshe cane bwa HTML bwa Gridzy ni ubu:

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

Ariko rero, Gridzy irahinduka cane kandi urashobora gukoresha hafi ubundi buryo bwose bwa HTML. Hariho ingingo nkeyi gusa twozirikana:

Umwana wese w'ikintu c'ibikoresho aserukira ikintu kimwe mu rutonde.
Ivyo vyose bishobora kuba ubwoko bwose bw'ikimenyetso, nka ul na li (wiyumvire gusa gusubiramwo ivy'umucukumbuzi).
Niba ikintu img atari umwana ubwaco, gikeneye ikigo gridzyImage .

Rero iyi nayo ni imiterere ya HTML ikora:

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

Cane cane iyo ushaka kwongerako amajambo, ukeneye ubuhinga bwa HTML buteye imbere. Kugira ngo umenye vyinshi kurivyo, raba Amajambo n'Impuzu .

Insobanuro n'inkovu

Niba ushaka kwongerako amajambo ku rutonde rwawe, ukeneye gusobanura ukuntu bisa. Ku bw’ivyo, hariho inkovu zimwe zimwe zategekanijwe imbere y’igihe ziboneka. Urukoba rwose rugizwe na dosiye ya CSS. Ukeneye kwongerako iyi dosiye ku madosiye nyamukuru ya Gridzy (kenshi mu gice c'umutwe):

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

Ikindi ukeneye imiterere ya HTML iteye imbere:

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

Niba wibaza ibijanye n'imiterere ya HTML, raba Semantic HTML .

Ku bijanye n'insobanuro ushobora gukoresha ubwoko bwose bw'ikimenyetso, urabe ko gifise umugwi gridzyCaption . Igikoresho img gikeneye ishusho y'umugwi gridzyImage .

Akarorero kari hejuru kakwereka urukoba gridzySkinClassic . Kugira ngo ukoreshe irindi, subiriza gusa izina ry'urukoba rimwe muri aya:

Inkovu zirimwo

	Amashure araboneka
Urukoba rw'uruzitiro intango nziza yo kwiremera urukoba imbonerakure y'ubuzima	`gridzySkinBlank`
gridzySkinClassic imbonerakure y'ubuzima	`gridzySkinClassic` `gridzySkinClassicLight`(IVYASHIKIRIJWE kuva kuri verisiyo 2.6.0)
gridzySkinFullOverlay imbonerakure y'ubuzima	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(IVYASHIKIRIJWE kuva kuri verisiyo 2.6.0)
gridzySkinLift imbonerakure y'ubuzima	`gridzySkinLift` `gridzySkinLiftLight`(IVYASHIKIRIJWE kuva kuri verisiyo 2.6.0)
gridzySkinMagnifier gukura ntibishizwemwo imbonerakure y'ubuzima	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(IVYASHIKIRIJWE kuva kuri verisiyo 2.6.0)

Izo mpuzu zose zivugwa haruguru zikeneye gusa dosiye ya CSS, ariko hariho n'izindi mpuzu zikeneye dosiye ya JavaScript:

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

	Amashure araboneka
gridzySkinBlur ntibikora muri IE imbonerakure y'ubuzima	`gridzySkinBlur` `gridzySkinBlurLight`(IVYASHIKIRIJWE kuva kuri verisiyo 2.6.0)
gridzySkinCard imbonerakure y'ubuzima	`gridzySkinCard` `gridzySkinCardLight`(IVYASHIKIRIJWE kuva kuri verisiyo 2.6.0)

Amahitamwo y'urukoba

Kuva kuri verisiyo 2.6.0 hariho Amahitamwo yo gutunganya inkovu zirimwo. Bivanye n'urukoba rwihariye ushobora gushinga ibara ry'inyuma, ibara ry'inyandiko n'igitutu c'inyandiko. Ubwirizwa gukoresha CSS nk'uko ushobora kubibona hano:

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

Raba ibihinduka bishigikiwe n'agaciro ka mburabuzi k'urukoba rwose hano:

gridzySkinClassic

Ihinduka	Agaciro mburabuzi	Amakuru
`--background`	`rgba(0, 0, 0, .7)`	kwemera agaciro k'inyuma ka CSS
`--color`	`rgb(255, 255, 255)`	kwemera agaciro k'ibara ryose rya CSS
`--text-shadow`	`none`	kwemera agaciro k'igitutu c'umwandiko wa CSS

gridzySkinFullOverlay

Ihinduka	Agaciro mburabuzi	Amakuru
`--background`	`rgba(0, 0, 0, .7)`	kwemera agaciro k'inyuma ka CSS
`--color`	`rgb(255, 255, 255)`	kwemera agaciro k'ibara ryose rya CSS
`--text-shadow`	`none`	kwemera agaciro k'igitutu c'umwandiko wa CSS

gridzySkinLift

Ihinduka	Agaciro mburabuzi	Amakuru
`--background`	`rgba(0, 0, 0, .7)`	kwemera agaciro k'inyuma ka CSS
`--color`	`rgb(255, 255, 255)`	kwemera agaciro k'ibara ryose rya CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	kwemera agaciro k'igitutu c'umwandiko wa CSS

gridzySkinMagnifier

Ihinduka	Agaciro mburabuzi	Amakuru
`--background`	`rgba(0, 0, 0, .7)`	kwemera agaciro k'inyuma ka CSS
`--color`	`rgb(255, 255, 255)`	kwemera agaciro k'ibara ryose rya CSS

Uru rukoba ntirushigikira --text-shadow

gridzySkinBlur

Ihinduka	Agaciro mburabuzi	Amakuru
`--background`	`rgba(0, 0, 0, .7)`	kwemera agaciro k'inyuma ka CSS
`--color`	`rgb(255, 255, 255)`	kwemera agaciro k'ibara ryose rya CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	kwemera agaciro k'igitutu c'umwandiko wa CSS

gridzySkinCard

Ihinduka	Agaciro mburabuzi	Amakuru
`--background`	`rgba(0, 0, 0, 1)`	kwemera agaciro k'inyuma ka CSS
`--color`	`rgb(255, 255, 255)`	kwemera agaciro k'ibara ryose rya CSS
`--text-shadow`	`none`	kwemera agaciro k'igitutu c'umwandiko wa CSS

Inkovu zose zasobanuwe mbere zishigikira gusa amajambo yoroshe. Ushobora kwiremera inkovu zawe bwite kandi zikomeye cane. Urasabwa kuraba uburyo bwa Gridzy .

Uburyo bwa gridzy

Nimba ata rukoba rwategekanijwe imbere y’igihe rujanye n’ivyo ukeneye, urashobora kwikorera urukoba rwawe.

Uburyo bworoshe ni ukubanza gukopa urukoba ruriho maze ukaruhuza n’ivyo ukeneye. Urukoba rwasobanuwe mbere gridzySkinBlank rwoshobora gutanga umushinge mwiza hamwe n'inyandiko nziza muri dosiye ya 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;
}

Muri dosiye ya CSS uzosanga amashure gridzySkinBlank , gridzyImage n'Inyandiko gridzyCaption . Gridzy ubwayo ntaco ikeneye ayo mashure. Bikoreshwa gusa mu gukora imideri kandi rero urashobora kubikuraho canke ukabihindura izina niwabishaka.

Ikindi uzosanga umugwi wa CSS gridzyItem . Gridzy ishiraho iri shure ku bana bose b'ikintu nyamukuru c'ibikoresho. Rero, ushobora gukoresha iri shure kugira ngo ukore imiterere y'ibintu vyo mu nzu yawe.

Ubwenge Ibintu bihambaye

Ibiri muri ico kintu bikwiye kuba vyishuye neza. Zirikana ko ubunini bw’ikintu buzohinduka ata gukeka. Koresha agaciro k'ijanisha aho gukoresha agaciro ka pixel. Kandi urabe uburyo bwo guhingura Gridzy autoFontSize , bufatanya ubunini bw'inyuguti ku bunini bw'agasanduku k'ikintu.
Ico kintu cose gikwiye kuba gifise urugero rw’uburebure rwasobanuwe neza. Igipimo c'ikintu ntikizokwigera gihinduka kandi kirakenewe kugira ngo ubaze uruzitiro. Rero iyo ikintu kitagira igipimo c’uburebure gisobanuwe neza, gisobanure n’amaboko (nk’akarorero biciye kuri css).

Mu bihe bimwe bimwe, bishobora kworoha guhindura uburyo bw'ibirimwo imbere y'uko Gridzy atangura. Gusa gukuraho ikigo ca gridzy canke dosiye ya javascript ya Gridzy mu gihe gito kubera ivyo.

Ni vyo! Ivyo nivyo vyose ukeneye kugira ngo wubake urukoba rwawe bwite. Benshi mu mpuzu zasobanuwe mbere ntizikoresha vyinshi kuruta ibi.

Ariko hariho n'ibindi nimba ubishaka ...

Inkovu ziteye imbere

Gridzy ikoresha amashure menshi ya CSS kurusha gridzyItem gusa. Benshi muri bo bazokwitegura ubwabo kandi urashobora kubikoresha no mu gukora imideri.

Ivyigwa vy'ibikoresho nyamukuru

Izina ry'ishure	Imvugo
`gridzy` gushinga n'amaboko	Gridzy ihita ironka ibintu bifise iri shure maze akabitangura.
`gridzyAnimated`	Bizoshirwaho ubwavyo nimba amahitamwo `animate` ari `true` . Iyo iri shure ryashizweho n'amaboko, uburyo bwo `animate` buzoca bugira `true` (kiretse iyo bushizweho ku buryo butomoye ku `false` ).

Ivyigwa vy'ibintu

Izina ry'ishure	Imvugo
`gridzyItem`	Bizoshirwaho igihe ikintu kizotangura igikorwa co gutangura. Ntizokwigera ikurwaho.
`gridzyItemInitializing`	Bizoshirwaho igihe ikintu kizotangura igikorwa co gutangura. Izosubirizwa na `gridzyItemReady` igihe ikintu kizoba caratangujwe neza. Bisigura ko amashusho yuzuye (raba `gridzyItemLoading` ), ariko ikintu giteguye kugira ngo kiboneke.
`gridzyItemReady`	Izosubirira `gridzyItemInitializing` igihe ikintu kizoba caratangujwe neza. Ntizokwigera ikurwaho. Bisigura ko amashusho yuzuye (raba `gridzyItemComplete` ), ariko ikintu giteguye kugira ngo kiboneke.
`gridzyItemLoading`	Bizoshirwaho igihe ikintu kizotangura igikorwa co gutangura. Izosubirizwa na `gridzyItemComplete` igihe amashusho arimwo (kenshi imwe gusa) azoba yuzuye.
`gridzyItemComplete`	Izosubirira `gridzyItemLoading` igihe amashusho arimwo (kenshi imwe gusa) azoba yuzuye. Ntizokwigera ikurwaho.
`gridzyItemInitialToVisible`	Bizoshirwaho igihe ikintu kizotangura kugaragara ubwa mbere. Izokurwaho igihe nyene ico kintu kizoba kibonetse neza.
`gridzyItemVisible`	Bizoshirwaho igihe nyene ico kintu kizoba kibonetse neza. Izokurwaho igihe nyene ico kintu kizotangura kuzimangana.
`gridzyItemVisibleToHidden`	Bizoshirwaho igihe nyene ico kintu kizotangura kuzimangana. Izokurwaho igihe nyene ico kintu kizoba kinyegejwe rwose.
`gridzyItemHidden`	Bizoshirwaho igihe nyene ico kintu kizoba kinyegejwe rwose. Izokurwaho igihe nyene ico kintu kizotangura kugaragara.
`gridzyItemHiddenToVisible`	Bizoshirwaho igihe ikintu kizotangura kugaragara (kiretse kugaragara ubwa mbere – raba ikigo `gridzyItemInitialToVisible` ). Izokurwaho igihe nyene ico kintu kizoba kibonetse neza.
`gridzyItemVisibleToVisible`	Bizoshirwaho igihe ikintu kiri mu rutonde gihindutse, ariko ikintu ubwaco cariho kandi kiguma kiboneka. Izokurwaho igihe nyene ihinduka ry'ubuzima rizoba ryarangiye.

Ku mburabuzi ikimenyetso c'imigenderanire n'ibishushanyo vy'amashusho aboneka n'azimangana birasobanurwa mbere na dosiye ya CSS nyamukuru ya Gridzy.

N’ivyo bice vya CSS vyavuzwe haruguru urashobora gukora ikimenyetso cawe c’imigenderanire n’ibishushanyo. Raba muri dosiye ya CSS ya Gridzy, kugira ngo utahure ivyo woba ugomba guhindura. Nta bwoba, vyose vyanditswe neza ng’aho.

Gutunganya neza Ukwinjiza

Niwakoresha amashusho menshi, vyoshobora kuba vyiza ufashije Gridzy kwubaka uruzitiro vyihuta.

Buza gusimbuka amashusho

Gridzy arakeneye cane igipimo c’amashusho yose kugira ngo abare uruzitiro. Ivyo bituma haba ibintu bisimbuka iyo amashusho amwamwe yiteguye ayandi atateguwe. Uko amashusho arushiriza kuba menshi, ni ko iyo ngaruka ishobora kubabaza cane.

Kugira ngo ukingire iyo nyifato, ushireho width height bw'ibintu vyose img . Ni ngombwa gushinga agaciro kabereye ku ishusho imwe imwe, ahandi ho amashusho yoba yagoramye. Agaciro kabereye ni ubwaguke n'uburebure bw'ishusho:

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

Inyuma y’aho Gridzy arashobora guharura uruzitiro ubwo nyene ataco akeneye kumenya ubunini nyabwo bw’amashusho.

Ubunebwe bwo kwikorera

Kugira ngo ushiremwo amashusho gusa ari mu kibanza kiboneka, kurikiza izi ntambwe:

Injiza width height nk'uko vyavuzwe haruguru (urabe neza ko ukoresha agaciro kabereye)
Subiriza ibiranga vyose src data-gridzylazysrc nk'uko vyerekanwa aha hepfo (niba ufise ibiranga srcset navyo, bisubirize n'amakuru 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>

Inyuma y’izo ntambwe amashusho azokwinjira akimara kuba hafi canke imbere mu gicapo.

Ikimenyetso c'imigenderanire

Ikimenyetso c'urugendo ni akamenyetso gatoyi k'ibinyabuzima kagaragara igihe ishusho iriko irashirwako. Niwakoresha amajambo n'inkovu , ikimenyetso c'ingene bigenda kizokwerekanwa ubwo nyene. Ahandi ho urakeneye guhindura:

Shira buri kintu img mu kintu div
(canke mu kindi kintu cose – raba HTML y’insobanuro ku bindi)
Yongerako gridzyImage y'umugwi kuri buri kintu 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>

Inyuma y’ivyo ukwiye kubona ibimenyetso vy’ingene amashusho afata umwanya kugira ngo ashire.

Ayunguruzo

Ivyungura muri Gridzy ni vyiza cane ariko birakomeye. Utitaye ku bwoko bw’akayunguruzo ukeneye, birashoboka cane ko bushoboka. Ivyo ukeneye vyose ni, CSS n'ibintu bikeyi vya HTML ...

Aha niho akarorero gakora:

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

Reka tuvyubake intambwe ku yindi

1. Mbere dukeneye ubuhinga busanzwe bwa HTML bwa Gridzy maze tugashiraho amazina y’amashure ku bintu vyose vyo mu nzu kugira ngo dushobore kubiyungurura inyuma

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

Muri aka karorero dukoresha gusa umugwi umwe ku kintu cose. Ariko ushobora kandi gushinga amashure menshi ku kintu kimwe, nimba ico kintu gikwiye kuboneka biciye ku mayunguruzo menshi.

2. Hanyuma twongerako amabuto amwe amwe dushobora gukoresha mu guhindura amayunguruzo hanyuma .

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

Aho gukoresha amabuto, ushobora gukoresha ibindi bintu vy'ifomu nk'amasandugu y'ibara, amabuto y'iradiyo, guhitamwo ivyicaro n'ibindi.

Nk'uko ushobora kubibona, agaciro k'amabuto ni amahitamwo ya CSS asanzwe. Tumaze guheza, gufyonda kuri iyo buto bizokwerekana amashusho ahuye n’uwo muhitamwo wa CSS. Mu buryo bw'ubuhinga gusa bishiraho uburyo bwo filter kuri aka gaciro.

Ushobora kandi gukoresha amahitamwo akomeye cane. Nk'akarorero :not(.animals) navyo vyokora, nk'uko .animals.people n'ibikoko .animals, .people .

3. Ubwa nyuma, dushiramwo amabuto mu gitereko ca div maze tukayabohera ku nzu y’ibitabo ya Gridzy, mu gushinga amahitamwo 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>

Nk'uko ushobora kubibona, dukoresha kandi umuhitamwo wa CSS ku mahitamwo filterControls . Igikoresho div gifise akaranga id gikora gusa kugira ngo amabuto yorohe guhitamwo biciye kuri uwo muhitamwo wa CSS.

Ni vyo!

Niba ushaka umuti wa JavaScript, raba API .

API

Naho Gridzy ifise API yayo, ibintu vyinshi birashobora gukorwa ataco ikoresheje, mu gukoresha gusa DOM. Gridzy azobibona maze atunganye uruzitiro. Ariko kandi hariho API ikomeye cane ...

Gukoresha DOM

Ku bikoresho vyose vy'inyandiko (DOM) dukeneye ubwa mbere ikintu c'ibikoresho:

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

Kwongerako amashusho

Ni ngombwa kwubaka neza no kwuzuza ikintu gishasha c'umwana imbere y'uko ugishira ku kintu c'ibikoresho. Ahandi ho Gridzy ntashobora kumenya ingero zibereye.

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

Kuraho amashusho

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

Guhindura amahitamwo

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

Ibindi ku bijanye no gukoresha DOM ushobora kubisanga kuri MDN web docs . Hariho kandi Intangamarara ya DOM iriho.

API y'umunyagihugu

Kugira ngo ukoreshe API, dukeneye ubwa mbere urugero rwa Gridzy, rufatanye n'ikintu c'ibikoresho vya Gridzy:

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

Kuronka amahitamwo

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

Kuronka amahitamwo yose

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

Gushiraho amahitamwo

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

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

Shiraho akayunguruzo

Gukoresha akayunguruzo ni ugushinga filter k'amahitamwo gashobora kuba akayunguruzo k'ukuri ka CSS:

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

Kwongerako imikorere yo guhamagara

IVYASHIKIRIJWE kuva kuri verisiyo 2.4.0
Koresha Ivyabaye vy’ubu kandi bishobora guhinduka aho kubikora. Raba igice gikurikira kugira ngo umenye vyinshi.

~~Gridzy.js 2 ishigikira amahitamwo amwe amwe y'ibikorwa vyo guhamagara. Bishobora gushirwaho gusa biciye ku API y'umunyagihugu, ariko nk'ibindi bihitamwo:~~

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

	~~Imvugo~~
~~`onBeforeOptionsChanged`~~	~~Guhamagara igikorwa gikoreshwa ataco kivuze imbere yo gushinga amahitamwo.~~
~~`onOptionsChanged`~~	~~Callback igikorwa gihamagarwa ataco kivuze inyuma yo gushinga amahitamwo.~~
~~`onBeforeRender`~~	~~Callback igikorwa gihamagarwa ataco kivuze imbere yo guhindura.~~
~~`onRender`~~	~~Callback igikorwa gikoreshwa inyuma yo guhindura.~~

Koresha Ivyabaye

kuva kuri verisiyo 2.4.0

Ushobora gukoresha ibintu vya Gridzy nk'ibintu bisanzwe vya JavaScript:

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

Ibintu bimwe bimwe biraswa ku kintu c'ibikoresho vya Gridzy n'ibindi bitera ku bintu vy'ikintu kimwekimwe cose biri mu kintu c'ibikoresho.

Ivyabaye vyarashwe ku kintu ca Gridzy:

	Imvugo
`gridzyBeforeInit`	Umuriro imbere y’ugutangura kw’ibarabara.
`gridzyInit`	Umuriro inyuma y’ugutangura kw’ibarabara.
`gridzyBeforeOptionsChanged`	Umuriro imbere yo gushinga amahitamwo.
`gridzyOptionsChanged`	Umuriro inyuma yo gushinga amahitamwo.
`gridzyBeforeRender`	Umuriro imbere yo guhindura.
`gridzyRender`	Umuriro inyuma yo guhindura.

Niwaba ubuze ibirori vyose hano, usabwe kohereza ubusabe bwo kugufasha .

event.target itanga ikintu c'ibikoresho vya Gridzy.
event.detail.instance itanga urugero rwa Gridzy.

Ivyabaye vyarashwe ku bintu:

	Imvugo
`gridzyItemBeforeInit`	Umuriro imbere y’uko ikintu gitangura.
`gridzyItemInit`	Umuriro inyuma y’ugutangura kw’ikintu.
`gridzyItemLoading`	Itera umuriro iyo ikintu gitangura kwinjira.
`gridzyItemReady`	Itera umuriro iyo ikintu giteguye guharura uruzitiro. Rero igipimo c’uburebure kirazwi, ariko ishusho ishobora kuba ikiriko irafunguka.
`gridzyItemComplete`	Itera umuriro iyo ishusho y'ikintu yuzuye.

Niwaba ubuze ibirori vyose hano, usabwe kohereza ubusabe bwo kugufasha .

event.target itanga ikintu gihuye.
event.detail.instance itanga urugero rwa Gridzy.

API – Isi yose

Hariho ibikorwa bimwe bimwe vyigenga ku nkuru za Gridzy. Rero ntidukwiye kuronka instance imbere.

Kuronka amahitamwo mburabuzi

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

Kuronka amahitamwo yose mburabuzi

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

Gushiraho amahitamwo mburabuzi

Ibi ntibishinga amahitamwo y'inkuru zose za Gridzy zamaze gutangura, ariko bisobanura ishingiro ry'inkuru nshasha. Ariko rero, iyo amahitamwo y'inkuru iriho yosubirwamwo biciye ku gaciro null , yokoresha agaciro gashasha ka mbere.

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

Ushobora gukoresha ibi kugira ngo ushireho amahitamwo kw'isi yose, iyo ubihamagara imbere y'uko DOM itegurwa. Rero ntuzosubira gukenera gushinga amahitamwo nk'ibiranga.

Ukwikora

Igihe cose ubuhinga bwose bwa Gridzy.js 2 buzoba bukora, nta buryo buri aha hepfo bukenewe. Ariko ivyo bikoresho bishobora kuzimwa kugira ngo ukoreshe Gridzy mu buryo busanzwe:

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

Bimwe muri ivyo bihitamwo ntibishobora gushirwaho biciye ku bimenyetso data-gridzy- canke biciye ku setOptions() , kubera impamvu zijanye n'ubwenge:

	Agaciro mburabuzi	Imvugo
`autoInitOnDomReady`	`true`	Imenya ibintu bifise classy `gridzy` ku rupapuro rwo gushiramwo maze ikabitangura. Bishobora gushirwaho biciye kuri `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Umugenzuzi w'ihinduka	`true`	Imenya ibintu bishasha bifise class `gridzy` igihe nyene bibonetse muri DOM maze bikabitanguza. (nk'akarorero ku gukoresha amahinduka ya paji) Bishobora gushirwaho biciye kuri `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Umugenzuzi w'ihinduka	`true`	Imenya nimba ibintu vy'abana (amashusho) vyongewe canke vyakuweho, maze igahindura uruzitiro ubwavyo. Bishobora gushirwaho biciye ku `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Isobanura nimba ibiranga `data-gridzy-` bikoreshwa muri rusangi canke bitakoreshwa. Niba ari `false` amahitamwo ashobora gushirwaho gusa biciye ku API y'umunyagihugu. Ishobora gushirwaho biciye kuri `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Umugenzuzi w'ihinduka	`true`	Imenya amahinduka y'ibiranga `data-gridzy-` , kandi igahindura uruzitiro ubwayo. Kandi imenya nimba umugwi wa `gridzyAnimated` wongerewe canke ukuweho be n'uko habayeho amahinduka `style` . Niba `useOptionAttributes` ari `false` , ibona gusa amahinduka `style` . Ishobora gushirwaho biciye ku `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Umugenzuzi w'ihinduka	`true`	Imenya amahinduka y'ibiranga `class` vy'ibice vyose vy'abana (amashusho). Ivyerekeye amayunguruzo. Ishobora gushirwaho biciye ku `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Umugenzuzi w'ihinduka kuva kuri verisiyo 2.5.0	`true`	Imenya amahinduka y'ibiranga `src` vy'amashusho yose. Birakenewe iyo bikoreshejwe na React canke amasomero asa n'ayo. Ishobora gushirwaho biciye ku `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Guhindura Ingano y'Umwihweza kuva kuri verisiyo 2.6.0	`true`	Imenya amahinduka y'ubwaguke bw'ikintu. Bibereye ku bijanye n’uguhingura ivy’ugusubiza. (Imbere ya verisiyo 2.6.0 hakoreshwa umwumviriza w'ibintu bihindura ingano y'idirisha) Ishobora gushirwaho biciye ku `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Gutanguza n'amaboko

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

Gusambura urugero

Mu buryo busanzwe, ibihushanye n’ugutanguza Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Guhuza urutonde rw'abana n'amaboko

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

Guhuza ikintu c'umwana umwe n'amaboko

Kenshi na kenshi ntibikenewe, kiretse mu bihe bidasanzwe cane.

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

Guhuza ibirango n'amaboko

Iyumvire ko useOptionAttributes amahitamwo ategerezwa kuba true kuri ivyo.

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

Gutanga inguvu

Kenshi ntibikenewe, naho ubuhinga bwose bwo kwikora bwoba bwazimye

gridzyInstance.render();

Igikoresho ca WordPress

Ububiko bw'inyandiko za Java

Igikogwa