Inyandiko 2.x - Gridzy.Gallery

Urubuga rwahinduwe mu buryo bwikora. Niba hari ikintu kidasobanutse, nyamuneka reba inyandiko zicyongereza.

Ikoreshwa ryibanze

Kuramo dosiye ya Gridzy kuri seriveri yawe hanyuma uyongere kurubuga rwawe (mubisanzwe mumutwe):

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

Ongeramo code ya HTML (ahantu hose mugice cyumubiri):

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

Nibyo! Urwo ni urugero rwuzuye. Nta ntangiriro yinyongera isabwa.

Iboneza

Inzira yoroshye yo gushiraho Gridzy ni, kugirango ukoreshe ibiranga HTML gusa. Ukeneye gusa kubanziriza amazina yamahitamo hamwe na data-gridzy- . Rero, kugirango ushireho spaceBetween yuburyo, kongeramo ikiranga 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>

Amahitamo nyamukuru

	Agaciro gasanzwe	Ibisobanuro
`animate`	`true`	Kumenya niba animasiyo igomba gukoreshwa mugihe gride ihindutse (kurugero, mugihe uhinduye idirishya rya mushakisha cyangwa mugihe ushizeho akayunguruzo).
`layout`	`justified`	Sobanura imiterere yakoreshejwe. Gridzy.js 2 ishyigikira imiterere ibiri itandukanye `justified` na `waterfall` . Buri kimwe muri byo gifite ibipimo byacyo byongeweho, ushobora gusanga munsi yiyi mbonerahamwe.
`filter`	`*`	Kugena amashusho agomba kwerekanwa. CSS-uwatoranije wese arashobora gukoreshwa nkigiciro hano. Mubisanzwe shyira mu buryo bwikora ukoresheje `filterControls` (reba inzira ikurikira). Reba muyunguruzi
`filterControls`		Kugena ibice bigize ibintu bishobora gukoreshwa mugushungura amashusho. Umuntu wese uhitamo CSS, uhitamo HTML yibintu, birashobora gukoreshwa nkigiciro hano. Reba muyunguruzi
`autoConsiderScrollBars`	`true`	Guhanura ubugari buhari niba imizingo izenguruka igaragara cyangwa ikabura. Burigihe birasabwa kubireka `true` keretse niba automatisme itera ibibazo.

Justified

	Agaciro gasanzwe	Ibisobanuro
`autoFontSize`	`false`	Mu buryo bwikora ivugurura imiterere-yimyandikire yumutungo wa buri gasanduku ukurikije ubunini bwumwimerere. Mburabuzi Imyandikire-ingano yumutungo ntabwo yashyizweho neza.
`desiredHeight`	`190`	Sobanura uburebure bwifuzwa bwibintu umurongo. Uburebure nyabwo buzabarwa bitewe n'ubugari buboneka nibintu biri kumurongo.
`hideOnMissingImage`	`true`	Hisha agasanduku karimo amashusho adashobora gutwarwa.
`spaceBetween`	`4`	Sobanura intera iri hagati yibintu muri pigiseli.
`lastRowAlign` kuva verisiyo 2.3.0	`justified`	Sobanura imyitwarire yumurongo wanyuma. Indangagaciro zemewe `left` , `center` , `right` na `justified` .
`singleRowAlign` kuva verisiyo 2.3.0	`justified`	Sobanura imyitwarire niba hari umurongo umwe gusa. Indangagaciro zemewe `left` , `center` , `right` na `justified` .
~~`fillLastRow`~~ ~~kuva verisiyo 2.1.0~~	~~`true`~~	Yakuweho kuva verisiyo 2.4.0 (YASOBANUWE kuva verisiyo 2.3.0 ) Tegura amashusho kugirango umurongo wanyuma uhore wuzuye. Niba uteganya gushira amashusho muburyo bukomeye, birashobora kuba igitekerezo cyiza cyo guhagarika ibi. Nta ngaruka bigira kumurongo umwe (reba `fillSingleRow` ).
`fillSingleRow` kuva verisiyo 2.1.0	~~`true`~~	Yakuweho kuva verisiyo 2.4.0 (YASOBANUWE kuva verisiyo 2.3.0 ) Niba hari umurongo umwe gusa, itunganya amashusho kuburyo umurongo uhora wuzuye. Niba bishoboka ko ufite ishusho imwe cyangwa ebyiri gusa murirusange, birashobora kuba igitekerezo cyiza cyo guhagarika ibi.

Waterfall Amahitamo yuburyo

	Agaciro gasanzwe	Ibisobanuro
`autoFontSize`	`false`	Mu buryo bwikora ivugurura imiterere-yimyandikire yumutungo wa buri gasanduku ukurikije ubunini bwumwimerere. Mburabuzi Imyandikire-ingano yumutungo ntabwo yashyizweho neza.
`desiredWidth`	`250`	Sobanura ubugari bwifuzwa bwinkingi. Ubugari nyabwo buzabarwa bitewe n'ubugari buboneka n'umubare w'inkingi.
`hideOnMissingImage`	`true`	Hisha agasanduku karimo amashusho adashobora gutwarwa.
`horizontalOrder`	`false`	Sobanura ko ibice byashyizwe mubintu bimwe muri buri nkingi kuva ibumoso ugana iburyo, hanyuma bigatangira nanone muburyo bwibumoso bwigenga aho inkingi iri ahantu henshi. Mburabuzi ibintu bizahora bishyirwa mu nkingi hamwe n'uburebure buto.
`spaceBetween`	`4`	Sobanura intera iri hagati yibintu muri pigiseli.
`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`.

Amahitamo Yambere

Kubindi bisobanuro byateye imbere, reba API .

HTML isobanura

Imiterere yoroshye ya HTML ya Gridzy niyi:

<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, Gridzy iroroshye cyane kandi urashobora gukoresha hafi iyindi miterere ya HTML. Hariho ingingo nke gusa zo gusuzuma:

Buri mwana wibikoresho bya kontineri yerekana ikintu kimwe muri gride.
Byombi kontineri hamwe nabana bayo barashobora kuba ubwoko bwikimenyetso icyo aricyo cyose, nka ul na li (tekereza gusa gusubiramo ibisanzwe mushakisha).
Niba img element itari umwana utaziguye ubwayo, ikeneye gridzyImage .

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

Cyane cyane niba ushaka kongeramo ibisobanuro, ukeneye imiterere ya HTML igezweho. Kugira ngo umenye byinshi kubyerekeye, reba ibisobanuro byanditseho .

Ibisobanuro & Uruhu

Niba ushaka kongeramo ibisobanuro mubitabo byawe, ugomba gusobanura isura. Kubwibyo, impu zimwe zateganijwe zirahari. Uruhu rwose rugizwe na dosiye ya CSS. Ugomba kongeramo iyi dosiye wongeyeho dosiye nkuru ya Gridzy (mubisanzwe mumutwe):

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

Byongeye, ukeneye imiterere ya HTML igezweho:

<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 urimo kwibaza kubyerekeye imiterere ya HTML, reba kuri Semantic HTML .

Kubisobanuro ushobora gukoresha ubwoko ubwo aribwo bwose, gusa menya ko bufite urwego gridzyCaption . Ikintu img gikeneye urwego gridzyImage .

Urugero ruvuzwe haruguru rurakwereka uruhu gridzySkinClassic . Kugira ngo ukoreshe irindi, gusa usimbuze izina ryuruhu numwe muribi:

Uruhu rurimo

	Amasomo aboneka
gridzySkinBlank intangiriro nziza yo kurema uruhu rwawe imbonankubone	`gridzySkinBlank`
gridzySkinClassic imbonankubone	`gridzySkinClassic` `gridzySkinClassicLight`(YASOBANUWE kuva verisiyo 2.6.0)
gridzySkinFullOverlay imbonankubone	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(YASOBANUWE kuva verisiyo 2.6.0)
gridzySkinLift imbonankubone	`gridzySkinLift` `gridzySkinLiftLight`(YASOBANUWE kuva verisiyo 2.6.0)
gridzySkinMagnifier zoom imikorere ntabwo irimo imbonankubone	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(YASOBANUWE kuva verisiyo 2.6.0)

Impu zose zavuzwe haruguru zikeneye gusa dosiye ya CSS, ariko hari uruhu rwinyongera rusaba na dosiye ya JavaScript:

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

	Amasomo aboneka
gridzySkinBlur ntabwo ikora muri IE imbonankubone	`gridzySkinBlur` `gridzySkinBlurLight`(YASOBANUWE kuva verisiyo 2.6.0)
gridzySkinCard imbonankubone	`gridzySkinCard` `gridzySkinCardLight`(YASOBANUWE kuva verisiyo 2.6.0)

Amahitamo y'uruhu

Kuva verisiyo 2.6.0 hariho Amahitamo yo gushiraho uruhu rwubatswe. Ukurikije uruhu rwihariye urashobora gushiraho ibara ryinyuma, ibara ryinyandiko nigicucu. Ugomba gukoresha imitungo yihariye ya CSS nkuko ubibona 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>

Reba impinduka zishyigikiwe nibiciro byagaciro kuri buri ruhu hano:

gridzySkinClassic

Birahinduka	Agaciro gasanzwe	Amakuru
`--background`	`rgba(0, 0, 0, .7)`	Emera CSS iyariyo yose agaciro
`--color`	`rgb(255, 255, 255)`	yemerera CSS iyariyo yose agaciro
`--text-shadow`	`none`	Emera CSS iyariyo yose igicucu

gridzySkinFullOverlay

Birahinduka	Agaciro gasanzwe	Amakuru
`--background`	`rgba(0, 0, 0, .7)`	Emera CSS iyariyo yose agaciro
`--color`	`rgb(255, 255, 255)`	yemerera CSS iyariyo yose agaciro
`--text-shadow`	`none`	Emera CSS iyariyo yose igicucu

gridzySkinLift

Birahinduka	Agaciro gasanzwe	Amakuru
`--background`	`rgba(0, 0, 0, .7)`	Emera CSS iyariyo yose agaciro
`--color`	`rgb(255, 255, 255)`	yemerera CSS iyariyo yose agaciro
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	Emera CSS iyariyo yose igicucu

gridzySkinMagnifier

Birahinduka	Agaciro gasanzwe	Amakuru
`--background`	`rgba(0, 0, 0, .7)`	Emera CSS iyariyo yose agaciro
`--color`	`rgb(255, 255, 255)`	yemerera CSS iyariyo yose agaciro

Uru ruhu ntirushigikira --text-shadow

gridzySkinBlur

Birahinduka	Agaciro gasanzwe	Amakuru
`--background`	`rgba(0, 0, 0, .7)`	Emera CSS iyariyo yose agaciro
`--color`	`rgb(255, 255, 255)`	yemerera CSS iyariyo yose agaciro
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	Emera CSS iyariyo yose igicucu

gridzySkinCard

Birahinduka	Agaciro gasanzwe	Amakuru
`--background`	`rgba(0, 0, 0, 1)`	Emera CSS iyariyo yose agaciro
`--color`	`rgb(255, 255, 255)`	yemerera CSS iyariyo yose agaciro
`--text-shadow`	`none`	Emera CSS iyariyo yose igicucu

Impu zose zateganijwe mbere zishyigikira gusa inyandiko zanditse. Urashobora gukora ibyanyu bwite kandi binini cyane. Nyamuneka reba kuri Style Gridzy .

Imiterere ya Gridzy

Niba nta ruhu rwateganijwe ruhuye nibyo ukeneye, urashobora gutunganya urwawe.

Inzira yoroshye ni ukubanza kwigana uruhu ruriho no kuyihuza nibyo ukeneye. Uruhu rwateganijwe mbere ya gridzySkinBlank mubisanzwe itanga umusingi mwiza kimwe ninyandiko 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 uzasangamo amasomo gridzySkinBlank , gridzyImage na gridzyCaption . Gridzy ubwayo ntabwo ikeneye aya masomo. Zikoreshwa gusa muburyo bwo gutunganya bityo urashobora gukuraho cyangwa guhindura izina niba ubishaka.

Byongeye, uzasangamo icyiciro cya CSS gridzyItem . Gridzy ishyiraho iri shuri mu buryo bwikora kubana bose bayobora ibintu byingenzi. Noneho, urashobora gukoresha iri somo kugirango ushushanye ibintu byububiko bwawe.

Tekereza Ibintu Byingenzi

Ibirimo bigomba kuba byuzuye. Tekereza ko ingano yibintu izahinduka rwose. Koresha ijanisha agaciro aho gukoresha pigiseli. Kandi reba uburyo bwa Gridzy imiterere autoFontSize , ihuza imyandikire-ingano yikintu kinini.
Buri kintu kigomba kugira igipimo gisobanuwe neza. Ikigereranyo cyibintu ntigishobora guhinduka kandi kirakenewe mukubara gride. Niba rero ikintu kidahita gifite igipimo cyasobanuwe neza, ganza ubigenzure intoki (urugero binyuze kuri css).

Rimwe na rimwe, birashobora koroha gutunganya ibikubiye mubintu mbere yuko Gridzy itangira. Kuraho gusa urwego gridzy cyangwa dosiye ya Gridzy javascript by'agateganyo kubwibi.

Nibyo! Ibyo aribyo byose ukeneye kubaka uruhu rwawe bwite. Uruhu rwinshi rwateganijwe ntirukoresha byinshi kuribi.

Ariko harashobora kuba byinshi niba ubishaka…

Uruhu ruteye imbere

Gridzy ikoresha amasomo menshi ya CSS kuruta gridzyItem gusa. Byinshi muribyo bizashyirwaho mu buryo bwikora kandi urashobora kubikoresha muburyo bwa stil.

Amasomo Yibanze

Izina ryishuri	Ibisobanuro
`gridzy` gushiraho intoki	Gridzy ihita ibona ibintu hamwe niri somo ikabitangiza.
`gridzyAnimated`	Bizashyirwaho mu buryo bwikora niba amahitamo `animate` ari `true` . Niba iri shuri ryarashyizweho intoki, ihitamo `animate` izahita iba `true` (usibye niba yashyizwe `false` ).

Amasomo y'Icyiciro

Izina ryishuri	Ibisobanuro
`gridzyItem`	Bizashyirwaho mugihe ikintu gitangiye inzira yo gutangira. Ntabwo izigera ikurwaho.
`gridzyItemInitializing`	Bizashyirwaho mugihe ikintu gitangiye inzira yo gutangira. Bizasimburwa na `gridzyItemReady` mugihe ikintu cyatangijwe neza. Ntabwo bivuze ko amashusho yuzuye (reba `gridzyItemLoading` ), ariko ikintu cyiteguye kuboneka.
`gridzyItemReady`	Uzasimbuza `gridzyItemInitializing` Gutangiza mugihe ikintu cyatangijwe neza. Ntabwo izigera ikurwaho. Ntabwo bivuze ko amashusho yuzuye (reba `gridzyItemComplete` ), ariko ikintu cyiteguye kuboneka.
`gridzyItemLoading`	Bizashyirwaho mugihe ikintu gitangiye inzira yo gutangira. Uzasimburwa na `gridzyItemComplete` mugihe amashusho arimo (mubisanzwe imwe gusa) yuzuye.
`gridzyItemComplete`	Uzasimbuza `gridzyItemLoading` mugihe amashusho arimo (mubisanzwe imwe gusa) yuzuye. Ntabwo izigera ikurwaho.
`gridzyItemInitialToVisible`	Bizashyirwaho mugihe ikintu gitangiye kugaragara bwa mbere. Bizakurwaho mugihe ikintu kigaragaye rwose.
`gridzyItemVisible`	Bizashyirwaho mugihe ikintu kigaragara neza. Bizakurwaho mugihe ikintu gitangiye kubura.
`gridzyItemVisibleToHidden`	Bizashyirwaho mugihe ikintu gitangiye kubura. Bizakurwaho mugihe ikintu cyihishe rwose.
`gridzyItemHidden`	Bizashyirwaho mugihe ikintu cyihishe rwose. Bizakurwaho mugihe ikintu gitangiye kugaragara.
`gridzyItemHiddenToVisible`	Bizashyirwaho mugihe ikintu gitangiye kugaragara (usibye kugaragara bwa mbere - reba urwego `gridzyItemInitialToVisible` ). Bizakurwaho mugihe ikintu kigaragaye rwose.
`gridzyItemVisibleToVisible`	Bizashyirwaho mugihe ikintu muri gride cyahindutse, ariko ikintu ubwacyo cyari kandi kiguma kigaragara. Bizakurwaho mugihe animasiyo ya animasiyo irangiye.

Mburabuzi ibyerekana inzira hamwe na animasiyo yo kugaragara no kubura amashusho byateganijwe na dosiye nkuru ya CSS ya Gridzy.

Hamwe naya masomo yavuzwe haruguru ya CSS urashobora gutunganya ibyerekezo byawe bwite hamwe na animasiyo. Tinyuka kureba muri dosiye nkuru ya CSS ya Gridzy, kugirango wumve icyo ugomba guhisha. Nta bwoba, ibintu byose byanditse neza.

Hindura imitwaro

Niba ukoresheje amashusho menshi, birashobora kuba igitekerezo cyiza cyo gufasha Gridzy kubaka gride byihuse.

Irinde Gusimbuka Amashusho

Gridzy ikeneye rwose igipimo cyerekana amashusho yose kugirango ibare gride. Ukuri kuvamo gusimbuka ibintu niba amashusho amwe yiteguye andi ntabwo. Amashusho menshi ahari, niko kurakara birashobora kuba izi ngaruka.

Kurinda iyi myitwarire, shiraho gusa width height ibiranga ibintu byose img . Ni ngombwa gushyiraho indangagaciro zikwiye kuri buri shusho kugiti cye, bitabaye ibyo amashusho yaba agoretse. Indangagaciro nyazo nubugari bwumwimerere nuburebure bwishusho bijyanye:

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

Nyuma yaho, Gridzy irashobora kubara gride ako kanya bitabaye ngombwa ko umenya ingano yishusho.

Ubunebwe

Kuremera gusa amashusho ari muburyo bugaragara, kurikiza izi ntambwe:

Shyiramo width height ibiranga nkuko byasobanuwe haruguru (menya neza gukoresha indangagaciro zikwiye)
Simbuza ibiranga src byose hamwe na data-gridzylazysrc nkuko bigaragara hano hepfo (niba ufite ibiranga srcset nayo, ubisimbuze na data-gridzylazysrcset ).

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

Nyuma yizi ntambwe amashusho azapakira mugihe ari hafi cyangwa imbere yo kureba.

Ibipimo byerekana inzira

Igipimo cyerekana nigishushanyo gito cya animasiyo igaragara mugihe ishusho irimo gupakira. Niba ukoresheje ibisobanuro & uruhu , ibipimo byerekana bizerekanwa mu buryo bwikora. Bitabaye ibyo, ukeneye guhinduka:

Shyira buri kintu img mubice bya div
(cyangwa mubindi bice byose - reba HTML ibisobanuro kuri byinshi)
Ongeraho urwego gridzyImage 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>

Nyuma yibyo, ugomba kubona ibipimo byerekana niba amashusho afata igihe cyo kwikorera.

Muyunguruzi

Akayunguruzo muri Gridzy biroroshye ariko birakomeye. Ntakibazo cyo gushungura ukeneye, birashoboka cyane ko bishoboka. Icyo ukeneye ni, CSS nkeya hamwe na HTML nkeya yibintu…

Dore urugero rukora:

<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 Twiyubake Intambwe ku yindi

1. Ubwa mbere dukeneye imiterere isanzwe ya HTML ya Gridzy hanyuma dushyireho amazina yicyiciro kubintu byose byerekana kugirango tubashe kuyungurura nyuma

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

Mururugero dukoresha icyiciro kimwe gusa kuri buri kintu. Ariko urashobora kandi gushiraho ibyiciro byinshi kubintu bimwe, niba icyo kintu kigomba kuboneka ukoresheje filteri nyinshi.

2. Noneho twongeyeho buto zimwe dushobora kunyuramo muyungurura noneho

<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 kugirango utubuto, urashobora kandi gukoresha ubundi buryo bwibintu nka agasanduku, agasanduku ka radio, hitamo imirima nibindi.

Nkuko mubibona, indangagaciro za buto nibisanzwe abatoranya CSS. Mugihe tumaze kurangiza, kanda kuri bouton izerekana amashusho ahuye nuwahisemo CSS. Mubuhanga irashiraho gusa iyungurura filter kuriyi gaciro.

Urashobora kandi gukoresha byinshi bigoye guhitamo. Kurugero :not(.animals) byakora nabyo, kimwe naba .animals.people na .animals, .people .

3. Ubwanyuma, dushyiramo utubuto mubikoresho div hanyuma tukabihuza na Gridzy gallery, mugushiraho uburyo 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>

Nkuko mubibona, dukoresha kandi CSS itoranya kumahitamo ya filterControls . Igikoresho div hamwe na id ikiranga ikora gusa kugirango buto yoroshye guhitamo ukoresheje uwo wahisemo CSS.

Nibyo!

Niba ukunda igisubizo cya JavaScript, reba API .

API

Nubwo Gridzy ifite API yayo, ibintu byinshi birashobora gukorwa bitabaye ibyo, mugukoresha DOM. Gridzy izabibona kandi ihindure gride. Ariko hariho na API ikomeye cyane…

Gukoresha DOM

Kubintu byose byerekana ibikoresho (DOM) manipulation dukeneye mbere na mbere ibintu bya kontineri:

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

Ongeraho Amashusho

Ni ngombwa kubaka byuzuye no kuzuza ibintu bishya byabana mbere yuko ubyongera kubintu bya kontineri. Ubundi Gridzy ntishobora kumenya ibipimo bikwiye.

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

Hindura Amahitamo

// 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 bijyanye no gukoresha DOM ushobora gusanga kurubuga rwa MDN . Hariho kandi Intangiriro kuri DOM irahari.

Umutungo API

Kugira ngo dukoreshe API, dukeneye mbere na mbere urugero rwa Gridzy, ruhuza na kontineri ya Gridzy:

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

Shaka Ihitamo

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

Kubona Amahitamo Yose

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

Shiraho Amahitamo

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

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

Koresha Akayunguruzo

Gushyira muyunguruzi ni ugushiraho gusa filter gashobora kuba CSS ihitamo:

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

Ongeraho Imikorere yo guhamagara

YATANZWE kuva verisiyo 2.4.0
Koresha ibyagezweho kandi byoroshye ibyabaye aho. Reba igice gikurikira kugirango ubone ibisobanuro.

~~Gridzy.js 2 ishyigikira amahitamo amwe mumikorere yo guhamagara. Bashobora gushyirwaho gusa binyuze muri API yihariye, ariko kimwe nubundi buryo:~~

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

	~~Ibisobanuro~~
~~`onBeforeOptionsChanged`~~	~~Igikorwa cyo guhamagarwa guhamagarwa mbere yo gushiraho amahitamo.~~
~~`onOptionsChanged`~~	~~Igikorwa cyo guhamagarwa guhamagarwa nyuma yo gushiraho amahitamo.~~
~~`onBeforeRender`~~	~~Igikorwa cyo guhamagarwa guhamagarwa mbere yo gutanga.~~
~~`onRender`~~	~~Igikorwa cyo guhamagarwa guhamagarwa nyuma yo gutanga.~~

Koresha Ibyabaye

kuva verisiyo 2.4.0

Urashobora gukoresha Gridzy ibyabaye nkibisanzwe JavaScript ibyabaye:

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 birasa kuri kontineri ya Gridzy nibindi bintu birasa kubintu byihariye mubintu bya kontineri.

Ibintu byarashwe kuri kontineri ya Gridzy:

	Ibisobanuro
`gridzyBeforeInit`	Umuriro mbere yo gutangiza ububiko.
`gridzyInit`	Umuriro nyuma yo gutangiza ububiko.
`gridzyBeforeOptionsChanged`	Umuriro mbere yo gushiraho amahitamo.
`gridzyOptionsChanged`	Umuriro nyuma yo gushiraho amahitamo.
`gridzyBeforeRender`	Umuriro mbere yo gutanga.
`gridzyRender`	Umuriro nyuma yo gutanga.

Niba ubuze ibyabaye hano, nyamuneka ohereza icyifuzo cyinkunga .

event.target itanga ibikoresho bya Gridzy.
event.detail.instance itanga urugero rwa Gridzy.

Ibintu byarashwe kubintu:

	Ibisobanuro
`gridzyItemBeforeInit`	Umuriro mbere yo gutangiza ikintu.
`gridzyItemInit`	Umuriro nyuma yikintu gitangizwa.
`gridzyItemLoading`	Umuriro iyo ikintu gitangiye gupakira.
`gridzyItemReady`	Umuriro iyo ikintu cyiteguye kubara grid. Ikigereranyo cya aspect rero kirazwi, ariko ishusho irashobora kuba irimo gupakira.
`gridzyItemComplete`	Umuriro iyo ikintu cyishusho cyuzuye.

Niba ubuze ibyabaye hano, nyamuneka ohereza icyifuzo cyinkunga .

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

API - Isi yose

Hariho imikorere imwe yigenga ya Gridzy ingero. Ntabwo rero dukeneye kubona urugero mbere.

Kubona Ihitamo

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

Kubona Byose Bisanzwe Amahitamo

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

Shiraho Amahitamo asanzwe

Ibi ntibishyiraho amahitamo ya byose bimaze gutangizwa Gridzy ingero, ariko isobanura ishingiro ryurugero rushya. Ariko, niba ihitamo ryurugero ruriho ryasubirwamo hifashishijwe agaciro null , ryakoresha agaciro gashya.

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

Urashobora gukoresha ibi kugirango ushireho amahitamo kwisi yose, niba uhamagaye mbere yuko DOM yitegura. Ntabwo rero wakenera gushiraho amahitamo nkibindi biranga.

Automatism

Mugihe cyose automatisme zose za Gridzy.js 2 zikora, ntabwo hakenewe uburyo bukurikira. Ariko automatisme irashobora kuzimya kugirango ukoreshe Gridzy muburyo gakondo:

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

Bumwe murubwo buryo ntibushobora gushyirwaho ukoresheje data-gridzy- ibiranga cyangwa ukoresheje setOptions() , kubera impamvu zumvikana:

	Agaciro gasanzwe	Ibisobanuro
`autoInitOnDomReady`	`true`	Kumenya ibintu hamwe na `gridzy` yo murwego kurupapuro rwipakurura hanyuma ubitangire. Bikemurwa binyuze kuri `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Guhindura	`true`	Menya ibintu bishya hamwe na `gridzy` yo murwego bakimara kugaragara muri DOM no kubitangiza. (urugero nko gukoresha urupapuro rwinzibacyuho) Bikemurwa binyuze kuri `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Guhindura	`true`	Kumenya niba ibintu byabana (amashusho) byongeweho cyangwa byavanyweho, kandi bigashya gride mu buryo bwikora. Gukemurwa ukoresheje `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Sobanura niba `data-gridzy-` ibiranga bikoreshwa cyangwa bidakoreshwa. Niba ibi ari amahitamo `false` arashobora gushirwaho gusa binyuze kuri API yihariye. Gukemurwa binyuze kuri `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Guhindura	`true`	Kumenya impinduka `data-gridzy-` ibiranga, no kuvugurura gride mu buryo bwikora. Kumenya kandi niba `gridzyAnimated` class yongeyeho cyangwa ikuweho kandi niba `style` yimiterere ihinduka. Niba `useOptionAttributes` ari `false` , irerekana gusa `style` yimiterere ihinduka. Gukemurwa ukoresheje `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Guhindura	`true`	Kumenya impinduka `class` biranga ibintu byose byabana (amashusho). Bifitanye isano na Muyunguruzi. Gukemurwa ukoresheje `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Guhindura kuva verisiyo 2.5.0	`true`	Kumenya impinduka za `src` ibiranga amashusho yose. Bifite akamaro iyo bikoreshejwe hamwe nibitabo cyangwa amasomero asa. Gukemurwa ukoresheje `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver kuva verisiyo 2.6.0	`true`	Kumenya impinduka zubugari bwibintu. Bifitanye isano nigishushanyo mbonera. (Mbere ya verisiyo 2.6.0 idirishya rihindura ibyabaye uwumva yakoreshejwe) Gukemurwa ukoresheje `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Tangira Intoki

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

Senya Urugero

Byakunze kuvugwa, ibinyuranye no gutangiza Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Gereranya Urutonde rwabana

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

Gereranya nintoki yumwana umwe

Mubisanzwe ntibikenewe, usibye mubihe bidasanzwe.

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

Guhuza Ibiranga Intoki

Menya ko useOptionAttributes ihitamo igomba kuba true kubwibi.

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

Gutanga imbaraga

Mubisanzwe ntabwo bikenewe, nubwo automatisme zose yazimye

gridzyInstance.render();

Amacomeka ya WordPress

Isomero rya JavaScript

Serivisi