Vakadewa 2.x – Gridzy.Gallery .

Na itukutuku sa vakadewataki vakataki koya. Kevaka e dua na ka e sega ni matata, yalovinaka mo raica mada na ivola vakavavalagi.

Yavu ni Vakayagataki

Vakauta na faile ni Gridzy ki na nomu dauveiqaravi ka vakacuruma ki na nomu itukutuku (dau ena tabana ni ulu):

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

Kuria na code ni HTML (ena dua na vanua ena tabana ni yago):

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

Sa ikoya oqori! Oqori e dua na ivakaraitaki taucoko ni cakacaka. E sega ni gadrevi e dua tale na itekitekivu.

Veivakarautaki

Na sala rawarawa duadua me vakarautaki kina na Gridzy sai koya, me vakayagataki ga na itovo ni HTML. E gadrevi ga mo vakacuruma na yaca ni digidigi ena data-gridzy- . O koya gona, me vakarautaki na spaceBetween ni digidigi, vakacuruma ga na 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>

Digidigi Levu

	Na isau taumada	Ivakamacala
`animate`	`true`	E vakadeitaka kevaka e dodonu me vakayagataki na veivakamarautaki ena gauna e veisau kina na grid (me kena ivakaraitaki, ena gauna e veisautaki kina na levu ni katubaleka ni barausa se ena gauna e vakarautaki kina e dua na filter).
`layout`	`justified`	Vakamacalataka na ituvatuva e vakayagataki. Gridzy.js 2 e tokona na rua na ituvatuva duidui `justified` kei na `waterfall` . E tiko vei ira yadua na kena ikuri ni digidigi ni paramita, ka rawa ni o kunea ena ruku ni teveli oqo.
`filter`	`*`	E vakadeitaka na iyaloyalo cava e dodonu me vakaraitaki. Na CSS-digitaki cava ga e rawa ni vakayagataki me vaka na kena yaga eke. E dau vakarautaki vakataki koya ena `filterControls` (raica na digidigi e tarava). Raica na veivakasavasavataki
`filterControls`		E vakadeitaka na fomu cava ni veika e rawa ni vakayagataki me vakasavasavataki kina na iyaloyalo. Na digidigi cava ga ni CSS, ka digitaka na veika e fomu ni HTML, e rawa ni vakayagataki me vaka na kena yaga eke. Raica na veivakasavasavataki
`autoConsiderScrollBars`	`true`	Me tukuni rawa na rabailevu e rawa kevaka e basika se yali na veitiki ni volavola. E dau vakatututaki me biu tu ena `true` vakavo ga ke vakavuna na leqa na automatism oqo.

Justified ni ituvatuva

	Na isau taumada	Ivakamacala
`autoFontSize`	`false`	E vakavoutaka vakataki koya na iyau ni font-size ni kato yadua e yavutaki ena levu ni kato taumada. Ena kena ivakarau na iyau ni font-levu e sega ni vakarautaki vakadodonu.
`desiredHeight`	`190`	Vakamacalataka na cecere e gadrevi ni laini ni elemeniti. Na cecere dina ena vakarautaki me vakatau ena rabailevu e tiko kei na veika e tiko ena laini.
`hideOnMissingImage`	`true`	Vunitaka na kato e tiko kina na iyaloyalo e sega ni rawa ni vakacurumi.
`spaceBetween`	`4`	Vakamacalataka na yawa ni maliwa ni veika ena pixels.
`lastRowAlign` mai na vakadewa 2.3.0	`justified`	Vakamacalataka na itovo ni iotioti ni laini. Na veika e vakatarai me baleta `left` , `center` , `right` kei na `justified` .
`singleRowAlign` mai na vakadewa 2.3.0	`justified`	Vakamacalataka na itovo kevaka e dua ga na laini duadua. Na veika e vakatarai me baleta `left` , `center` , `right` kei na `justified` .
~~`fillLastRow`~~ ~~mai na vakadewa 2.1.0~~	~~`true`~~	VAKATAWA mai na vakadewa 2.4.0 (SA VAKAYAGATAKI mai na vakadewa 2.3.0 ) Tuvanaka na iyaloyalo me dau vakasinaiti taucoko kina na iotioti ni laini. Kevaka o nanuma mo vakacuruma na iyaloyalo dina, e rawa ni dua na vakasama vinaka mo vakaotia oqo. E sega ni dua na kena revurevu ena laini duadua (raica `fillSingleRow` ).
`fillSingleRow` mai na vakadewa 2.1.0	~~`true`~~	VAKATAWA mai na vakadewa 2.4.0 (SA VAKAYAGATAKI mai na vakadewa 2.3.0 ) Kevaka e dua ga na laini, e tuvanaka na iyaloyalo me dau vakasinaiti taucoko na laini. Kevaka e rawa ni yaco ni sa dua ga se rua na iyaloyalo ena valeniyaloyalo, e rawa ni dua na vakasama vinaka me deactivate oqo.

Waterfall ni ituvatuva

	Na isau taumada	Ivakamacala
`autoFontSize`	`false`	E vakavoutaka vakataki koya na iyau ni font-size ni kato yadua e yavutaki ena levu ni kato taumada. Ena kena ivakarau na iyau ni font-levu e sega ni vakarautaki vakadodonu.
`desiredWidth`	`250`	Vakamacalataka na rabailevu ni duru e gadrevi. Na rabailevu dina ena vakarautaki me vakatau ena rabailevu e tiko kei na iwiliwili ni duru.
`hideOnMissingImage`	`true`	Vunitaka na kato e tiko kina na iyaloyalo e sega ni rawa ni vakacurumi.
`horizontalOrder`	`false`	Vakamacalataka ni veika e biu vakadodonu e dua na ka ena duru yadua mai na imawi ki na imatau, qai tekivu tale ena duru imawi duadua tu vakataki koya ena duru cava e levu cake kina na vanua. Ena kena ivakarau na veika ena dau biu ena duru kei na kena cecere duadua.
`spaceBetween`	`4`	Vakamacalataka na yawa ni maliwa ni veika ena pixels.
`singleRowAlign` since version 2.7.0	`justified`	Defines the behavior when not all columns can be filled due to too few images. Allowed values are `left`, `center`, `right` and `justified`.

Digidigi tale eso

Me baleta na digidigi toso cake, raica na API .

HTML vakaibalebale

Na ituvatuva rawarawa duadua ni HTML ni Gridzy sai koya oqo:

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

Ia, Gridzy e sa rui veisau ka rawa ni o vakayagataka voleka ni dua tale na ituvatuva ni HTML. E vica ga na ka me vakasamataki:

Na gone yadua ni elemeniti ni koniteina e vakaraitaka e dua na ka ena grid.
Rua na koniteina elemeniti kei na kena gone e rawa ni dua na mataqali tag, me vaka ul kei li (vakasamataka ga me vakavoutaki na barausa ni defaults).
Kevaka e dua na ka img e sega ni dua na gone vakadodonu vakataki koya, e gadreva na kalasi gridzyImage .

O koya gona oqo talega e dua na ituvatuva ni HTML cakacaka:

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

Vakabibi kevaka o vinakata mo vakuria na itukutuku, o gadreva e dua na ituvatuva ni HTML toso ki liu. Me vulica eso tale na ka me baleta na ka oqo, raica na iTukutuku & Kuli .

iTukutuku kei na Kuli

Kevaka o vinakata mo vakacuruma na itukutuku ki na nomu galeri, e dodonu mo vakamacalataka na kena irairai. O koya gona, eso na kuliniyago sa vakarautaki tu e sa tu rawa. Na kuli yadua e tiko kina e dua na faile ni CSS. E gadrevi mo vakuria na faile oqo me ikuri ni faile ni Gridzy levu (dau ena tabana ni ulu):

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

Kuria oya o gadreva e dua na ituvatuva ni HTML toso ki liu:

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

Kevaka o vakataroga tiko na ituvatuva ni HTML, raica mada na HTML ni vakasama .

Me baleta na itukutuku e rawa ni o vakayagataka e dua na mataqali ivakatakilakila, vakadeitaka ga ni sa tiko na kalasi gridzyCaption . Na iyaya img e gadreva na kalasi gridzyImage .

Na ivakaraitaki e cake e vakaraitaka vei iko na kuli ni gridzySkinClassic . Me vakayagataki e dua na kena duidui, sosomitaka ga na yaca ni kuli ena dua vei ira oqo:

E okati kina na kuli

	Kalasi e tiko
kuliniyago vulavula e dua na itekitekivu vinaka me baleta na kena buli e dua na kuli ni yago . vakaraitaki bula	`gridzySkinBlank`
gridzySkinClassic vakaraitaki bula	`gridzySkinClassic` `gridzySkinClassicLight`(SA VAKAYAGATAKI mai na vakadewa 2.6.0)
gridzySkinFullOverlay vakaraitaki bula	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(SA VAKAYAGATAKI mai na vakadewa 2.6.0)
gridzySkinLift vakaraitaki bula	`gridzySkinLift` `gridzySkinLiftLight`(SA VAKAYAGATAKI mai na vakadewa 2.6.0)
gridzySkinMagnifier sega ni okati kina na cakacaka ni zoom vakaraitaki bula	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(SA VAKAYAGATAKI mai na vakadewa 2.6.0)

Na kuli kece e cake e gadrevi ga kina e dua na faile ni CSS, ia e tiko eso tale na kuli ka gadrevi talega kina e dua na faile ni JavaScript:

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

	Kalasi e tiko
gridzySkinBlur no funciona en IE vakaraitaki bula	`gridzySkinBlur` `gridzySkinBlurLight`(SA VAKAYAGATAKI mai na vakadewa 2.6.0)
gridzySkinCard vakaraitaki bula	`gridzySkinCard` `gridzySkinCardLight`(SA VAKAYAGATAKI mai na vakadewa 2.6.0)

Digidigi ni kuli

Me tekivu mai na vakadewa 2.6.0 e tiko na Digidigi me vakarautaki kina na kuli ni tara-ena. Me vakatau ena kuli vakatabakidua e rawa ni o vakarautaka na roka ni taudaku, roka ni ivola kei na yaloyalo ni ivola. E dodonu ga mo vakayagataka na CSS na iyau vakaitaukei me vaka o rawa ni raica eke:

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

Raica na veisau veitokoni kei na ivakatagedegede ni default me baleta na kuli yadua eke:

gridzySkinClassic

Veisau	Na isau taumada	Itukutuku
`--background`	`rgba(0, 0, 0, .7)`	vakatara e dua na itukutuku ni CSS
`--color`	`rgb(255, 255, 255)`	vakatara e dua na CSS roka yaga
`--text-shadow`	`none`	vakatara e dua na CSS ivola-yaloyalo yaga

gridzySkinFullOverlay

Veisau	Na isau taumada	Itukutuku
`--background`	`rgba(0, 0, 0, .7)`	vakatara e dua na itukutuku ni CSS
`--color`	`rgb(255, 255, 255)`	vakatara e dua na CSS roka yaga
`--text-shadow`	`none`	vakatara e dua na CSS ivola-yaloyalo yaga

gridzySkinLift

Veisau	Na isau taumada	Itukutuku
`--background`	`rgba(0, 0, 0, .7)`	vakatara e dua na itukutuku ni CSS
`--color`	`rgb(255, 255, 255)`	vakatara e dua na CSS roka yaga
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	vakatara e dua na CSS ivola-yaloyalo yaga

gridzySkinMagnifier

Veisau	Na isau taumada	Itukutuku
`--background`	`rgba(0, 0, 0, .7)`	vakatara e dua na itukutuku ni CSS
`--color`	`rgb(255, 255, 255)`	vakatara e dua na CSS roka yaga

Na kuli oqo e sega ni tokona --text-shadow

gridzySkinBlur

Veisau	Na isau taumada	Itukutuku
`--background`	`rgba(0, 0, 0, .7)`	vakatara e dua na itukutuku ni CSS
`--color`	`rgb(255, 255, 255)`	vakatara e dua na CSS roka yaga
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	vakatara e dua na CSS ivola-yaloyalo yaga

gridzySkinCard

Veisau	Na isau taumada	Itukutuku
`--background`	`rgba(0, 0, 0, 1)`	vakatara e dua na itukutuku ni CSS
`--color`	`rgb(255, 255, 255)`	vakatara e dua na CSS roka yaga
`--text-shadow`	`none`	vakatara e dua na CSS ivola-yaloyalo yaga

Na kuli kece sa vakarautaki tu e tokona ga na itukutuku rawarawa ni ivola. E rawa ni o bulia na nomu kuli sara ga ka vereverea cake. Kerekere mo raica mada na ivakarau ni Gridzy .

iVakarau ni Gridzy

Kevaka e sega ni dua na kuli sa vakarautaki tu me veiganiti kei na nomu gagadre, e rawa ni o styletaka na nomu dua.

Na sala rawarawa duadua sai koya mo vakatotomuria taumada e dua na kuli sa tu rawa ka veisautaka ki na nomu gagadre. Na kuli gridzySkinBlank sa vakarautaki tu ena dau vakarautaka e dua na yavu vinaka ka vakakina e dua na ivola vinaka ena faile ni 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;
}

Ena faile ni CSS o na kunea na kalasi gridzySkinBlank , gridzyImage kei na gridzyCaption . Gridzy vakataki koya e sega ni gadreva na kalasi oqo. Era sa vakayagataki ga me baleta na styling ka rawa kina vei iko mo kauta laivi se vakayacana tale kevaka o vinakata.

Me kena ikuri o na kunea na kalasi ni CSS gridzyItem . Gridzy vakarautaka na kalasi oqo vakataki koya vei ira kece na gone vakadodonu ni elemeniti ni koniteina levu. O koya gona, e rawa ni o vakayagataka na kalasi oqo me style kina na iyaya ni nomu galeri.

Vakasamataka na Veika Bibi .

Na veika e tiko ena iyaya e dodonu me saumi taucoko. Vakasamataka ni na veisau vakaidina na levu ni elemeniti. Vakayagataka na iwiliwili ni pasede me isosomi ni iwiliwili ni pixel. Ka raica na digidigi ni ituvatuva ni Gridzy autoFontSize , ka vesuka na matanivola-levu ki na levu ni kato ni iyaya.
Na veika yadua e dodonu me tiko kina e dua na kena irairai e vakamacalataki vinaka. Na iyaya ni kena irairai ena sega vakadua ni veisau ka sa gadrevi me vakarautaki kina na grid. O koya gona kevaka e dua na ka e sega ni vakataki koya e dua na ivakarau ni yasana vakamacalataki vinaka, vakamacalataka taumada ena liga (me vaka ena css).

Ena so na gauna, ena rawarawa cake me style na veika e tiko ena veika ni bera ni tekivutaka tiko o Gridzy. Kauta laivi ga na gridzy ni kalasi se na faile ni volavola ni Gridzy vakalekaleka me baleta na ka oqo.

Sa ikoya oqori! Oqori na ka ga o gadreva mo tara kina na nomu kuli sara ga. E levu na kuli ni yago sa vakarautaki tu e sega ni vakayagataka vakalevu cake mai na ka oqo.

Ia e rawa ni levu tale kevaka o vinakata ...

Kuli Torocake

E vakayagataka o Gridzy e levu cake na kalasi ni CSS mai gridzyItem walega . E levu vei ira era na vakarautaki vakataki ira ka rawa ni o vakayagataka me baleta na styling talega.

Kalasi ni koniteina levu

Yaca ni Kalasi	Ivakamacala
`gridzy` me vakarautaki ena liga	Gridzy e kunea vakataki koya na veika e tiko ena kalasi oqo ka tekivutaka.
`gridzyAnimated`	Ena vakarautaki vakataki koya kevaka e `true` na digidigi `animate` . Kevaka e vakarautaki na kalasi oqo ena liga, na digidigi `animate` ena rawata vakataki koya `true` talega (vakavo ga kevaka e sa vakarautaki vakamatata ki `false` ).

Kalasi ni iyaya

Yaca ni Kalasi	Ivakamacala
`gridzyItem`	Ena vakarautaki ena gauna ga e tekivu kina na iyaya na iwalewale ni kena tekivutaki. Ena sega vakadua ni kau laivi.
`gridzyItemInitializing`	Ena vakarautaki ena gauna ga e tekivu kina na iyaya na iwalewale ni kena tekivutaki. Ena vakaisosomitaki ena `gridzyItemReady` ena gauna ga e sa tekivutaki taucoko kina na iyaya. Kena ibalebale e sega ni sa vakasinaiti taucoko na iyaloyalo (raica `gridzyItemLoading` ), Ia na iyaya sa vakarau tu me rawa ni laurai.
`gridzyItemReady`	Ena sosomitaka `gridzyItemInitializing` ena gauna ga e sa tekivutaki taucoko kina na iyaya. Ena sega vakadua ni kau laivi. Kena ibalebale e sega ni sa vakavodoki taucoko na iyaloyalo (raica `gridzyItemComplete` ), Ia na iyaya sa vakarau tu me rawa ni laurai.
`gridzyItemLoading`	Ena vakarautaki ena gauna ga e tekivu kina na iyaya na iwalewale ni kena tekivutaki. Ena vakaisosomitaki ena `gridzyItemComplete` ena gauna ga e sa vakavodoki taucoko kina na iyaloyalo e tiko kina (dau dua ga).
`gridzyItemComplete`	Ena sosomitaka `gridzyItemLoading` ena gauna ga e sa vakavodoki taucoko kina na iyaloyalo e tiko kina (dau dua ga). Ena sega vakadua ni kau laivi.
`gridzyItemInitialToVisible`	Ena vakarautaki ena gauna ga e tekivu me basika kina na iyaya ena imatai ni gauna. Ena kau laivi ena gauna ga e sa laurai taucoko kina na iyaya.
`gridzyItemVisible`	Ena vakarautaki ena gauna ga e sa laurai taucoko kina na iyaya. Ena kau laivi ena gauna ga e tekivu yali kina na iyaya.
`gridzyItemVisibleToHidden`	Ena vakarautaki ena gauna ga e tekivu yali kina na iyaya. Ena kau laivi ena gauna ga e sa vunitaki vakaoti kina na iyaya.
`gridzyItemHidden`	Ena vakarautaki ena gauna ga e sa vunitaki taucoko kina na iyaya. Ena kau laivi ena gauna ga e tekivu basika kina na iyaya.
`gridzyItemHiddenToVisible`	Ena vakarautaki ena gauna ga e tekivu me basika kina na iyaya (vakavo ga ke basika ena imatai ni gauna – raica na kalasi `gridzyItemInitialToVisible` ). Ena kau laivi ena gauna ga e sa laurai taucoko kina na iyaya.
`gridzyItemVisibleToVisible`	Ena vakarautaki ena gauna ga e veisau kina e dua na ka ena grid, Ia na iyaya vakataki koya e a ka tiko laurai. Ena kau laivi ena gauna ga e sa oti kina na veisau ni animation.

Ena kena ivakarau na ivakatakilakila ni iwalewale kei na veivakamarautaki me baleta na basika kei na yali ni iyaloyalo e sa vakamacalataki taumada mai na faile ni CSS levu ni Gridzy.

Ena kalasi ni CSS oqo e cake e rawa ni o style na nomu ivakatakilakila ni iwalewale kei na veivakamarautaki. Dare e dua na rai ki na faile ni CSS levu ni Gridzy, me kilai kina na cava o na gadreva mo vakasuka. Sega ni rere, na ka kece e volai vinaka tu e kea.

Vakavinakataka na vakavodoki

Kevaka o vakayagataka e vuqa na iyaloyalo, e rawa ni dua na vakasama vinaka me vukei Gridzy na tara ni grid totolo cake.

Tarova na cici ni iyaloyalo

Gridzy e gadreva sara ga na ivakarau ni iyaloyalo kece me vakarautaka na grid. Na dina oqo e rawa mai na veika e cici kevaka era sa vakarau tu eso na iyaloyalo ka so tale era sega. Na levu ga ni iyaloyalo e tiko, na levu tale ga ni veivakacudrui e rawa ni yaco oqo.

Me tarovi na itovo oqo, vakarautaka ga width kei height ni itovo me baleta na veika kece img . E bibi me vakarautaki na ivakatagedegede dodonu ni iyaloyalo yadua, ke sega ena vakatanitaki na iyaloyalo. Na ivakarau dodonu sai koya na rabailevu taumada kei na cecere ni iyaloyalo yadua:

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

Ni oti oya e rawa ni vakarautaka o Gridzy na grid ena gauna sara ga oqo ka sega ni gadrevi me kila na levu dina ni iyaloyalo.

Vakavodoki vakawelewele

Me vakavodoki ga na iyaloyalo ka tiko ena viewport e laurai, muria ga na veikalawa oqo:

Vakacuruma width kei height ni itovo me vaka e vakamacalataki e cake (vakadeitaka mo vakayagataka na isau dodonu)
Vakavoutaka na itovo kece src ena data-gridzylazysrc me vaka e vakaraitaki ena ruku (kevaka e tiko vei iko na itovo srcset vakakina, vakaisosomitaka ena 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>

Ni oti na veikalawa oqo na iyaloyalo ena vakavodoki ena gauna ga era sa voleka kina se ena loma ni viewport.

ivakatakilakila ni iwalewale

Na ivakatakilakila ni iwalewale ni ivakatakilakila lailai ni animated e basika ni sa vakavodoki tiko na iyaloyalo. Kevaka o vakayagataka na ulutaga & kuli , na ivakatakilakila ni iwalewale ena vakaraitaki vakataki koya. Ke sega o gadreva eso na veisau:

Biuta na veitiki yadua img ki na dua na veitiki div .
(se ki na dua tale na ka – raica na HTML vakaibalebale me baleta na levu cake)
Vakacuruma na kalasi gridzyImage ki na veitiki yadua 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>

Ni oti o ya e dodonu mo raica na ivakatakilakila ni iwalewale kevaka e taura na gauna na iyaloyalo me vakavodoki.

Veisau

Na veivakasavasavataki ena Gridzy e totoka rawarawa ia e kaukauwa. Se cava ga na mataqali filter o gadreva, e sa rui vaka me rawa ni vakayacori. Na ka ga o gadreva sai koya, e dua na CSS lailai kei na vica na HTML fomu ni veika ...

Oqo e dua na ivakaraitaki ni cakacaka:

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

Meda Tara Ena Veikalawa .

1. Taumada eda gadreva na ivakarau ni HTML e dau vakayagataki ni Gridzy ka vakarautaka na yaca ni kalasi me baleta na veika kece ni galeri me rawa ni da filter ira ni oti .

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

Ena ivakaraitaki oqo eda vakayagataka ga e dua na kalasi me baleta na veitiki yadua. Ia e rawa talega ni o vakarautaka e vuqa na kalasi me baleta e dua na ka, kevaka e dodonu me kunei na ka oqori ena vuqa na filter.

2. Sa qai da vakacuruma eso na ibulukau ena kena rawa ni da veisautaka na filters qai .

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

Me isosomi ni ibulukau, e rawa talega ni o vakayagataka eso tale na fomu me vaka na kato ni vakadidike, ibulukau ni retio, digitaka na vanua kei na so tale.

Me vaka o sa raica rawa, na isau ni ibulukau e dau CSS digitaki. Ena gauna ga eda sa oti kina, e dua na kiliki ena dua na ibulukau vakaoqo ena vakaraitaka na iyaloyalo e veiganiti kei na digidigi ni CSS oya. Tekinikali e vakarautaka walega na digidigi filter ki na isau oqo.

E rawa talega ni o vakayagataka e levu cake sara na digidigi vereverea. Me kena ivakaraitaki :not(.animals) ena cakacaka talega, vakakina .animals.people kei .animals, .people .

3. Kena itinitini, eda vakacuruma na ibulukau ena dua na koniteina div ka vesuki ira ki na valeniyaloyalo ni Gridzy, ena kena vakarautaki na digidigi 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>

Me vaka o sa raica rawa, Eda vakayagataka talega e dua na digidigi ni CSS me baleta na digidigi filterControls . Na koniteina div kei na itovo id e veiqaravi ga me rawarawa cake kina na ibulukau me digitaki ena sala ni CSS digitaki oya.

Sa ikoya oqori!

Kevaka o vinakata e dua na iwali ni Java, raica na API .

API

E dina ga ni sa tiko na kena API o Gridzy, e levu na ka e rawa ni caka ke sega, ena kena vakayagataki walega na DOM. Ena raica o Gridzy ka vakadodonutaka na grid. Ia e tiko talega e dua na API kaukauwa sara ...

Vakayagataka na DOM

Me baleta na veivakayarayarataki kece ni ivola (DOM) eda gadreva taumada na iyaya ni koniteina:

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

Kuria na iyaloyalo

E bibi me tara taucoko ka vakasinaita na elemeniti vou ni gone ni bera ni o vakacuruma ki na elemeniti ni koniteina. Ke sega, e sega ni rawa ni raica o Gridzy na veimama dodonu.

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

Kauta laivi na iyaloyalo

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

Veisautaka na digidigi

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

E levu cake me baleta na kena vakayagataki na DOM o rawa ni kunea ena MDN itukutuku ni ivola . E tiko talega e dua na iVakamacala Taumada ni DOM e rawa.

API ni taukena

Me vakayagataki na API, eda gadreva taumada na ivakaraitaki ni Gridzy, ka sa vauci ki na Gridzy koniteina elemeniti:

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

Digidigi

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

Raica na digidigi kece

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

Vakarautaka na digidigi

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

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

Vakayagataka na Filita

Na kena vakayagataki e dua na filter sa ikoya ga na kena vakarautaki na filter ni digidigi e rawa ni dua na digidigi ni CSS dodonu:

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

Kuria na Cakacaka ni Veikacivi

SA VAKATAWASEI mai na vakadewa 2.4.0
Vakayagataka na Events ni gauna oqo ka veisautaki vakalevu cake ena kena isosomi. Raica na iwasewase e tarava me baleta na kena matailalai.

~~Gridzy.js 2 e tokona eso na digidigi me baleta na cakacaka ni kacivi lesu. Era rawa ni vakarautaki ga ena API ni taukena, ia me vaka ga na digidigi tale eso:~~

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

	~~Ivakamacala~~
~~`onBeforeOptionsChanged`~~	~~Callback cakacaka e kacivi vakadodonu ni bera na ituvatuva ni digidigi.~~
~~`onOptionsChanged`~~	~~Callback cakacaka e kacivi vakadodonu ni oti na digidigi ni ituvatuva.~~
~~`onBeforeRender`~~	~~Callback cakacaka e kacivi vakadodonu ni bera ni vakadewataki.~~
~~`onRender`~~	~~Callback cakacaka e kacivi vakadodonu ni oti na kena vakadewataki.~~

Vakayagataka na veika e yaco

mai na vakadewa 2.4.0

E rawa ni o vakayagataka na veika e yaco ena Gridzy me vaka sara ga na veika e dau yaco ena 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.
});

Eso na ka e yaco e vakamai ena Gridzy koniteina elemeniti kei na so tale na ka e yaco e vakamai ena veitiki ni iyaya yadua ena loma ni koniteina elemeniti.

Na veika e yaco ena Gridzy koniteina elemeniti:

	Ivakamacala
`gridzyBeforeInit`	Bukawaqa ni bera na tekivutaki ni galeri.
`gridzyInit`	Bukawaqa ni oti na kena tekivutaki na galeri.
`gridzyBeforeOptionsChanged`	Fires ni bera ni vakarautaki na digidigi.
`gridzyOptionsChanged`	Fires ni oti na digidigi ni vakarautaki.
`gridzyBeforeRender`	Fires ni bera ni vakadewataki.
`gridzyRender`	Fires ni oti na veivakadewataki.

Kevaka o calata e dua na soqo eke, yalovinaka vakauta mai e dua na kerekere ni veitokoni .

event.target e vakarautaka na iyaya ni koniteina Gridzy.
event.detail.instance e vakarautaka na ivakaraitaki ni Gridzy.

Na veika e yaco ena veitiki ni iyaya:

	Ivakamacala
`gridzyItemBeforeInit`	Fires ni bera na kena tekivutaki na iyaya.
`gridzyItemInit`	Fires ni oti na kena tekivutaki na iyaya.
`gridzyItemLoading`	Fires ni sa tekivu me vakavodoki na iyaya.
`gridzyItemReady`	Fires ni sa vakarau tu na iyaya me baleta na vakarautaki ni grid. Sa kilai kina na kena irairai, ia e rawa ni se vakavodoki tikoga na iyaloyalo.
`gridzyItemComplete`	Fires ni sa vakavodoki taucoko na iyaloyalo ni iyaya.

Kevaka o calata e dua na soqo eke, yalovinaka vakauta mai e dua na kerekere ni veitokoni .

event.target e vakarautaka na veitiki ni iyaya yadua.
event.detail.instance e vakarautaka na ivakaraitaki ni Gridzy.

API – Raraba

E tiko eso na cakacaka e tu vakataki koya mai na ivakaraitaki ni Gridzy. O koya gona e sega ni gadrevi me da rawata e dua na ivakaraitaki ni bera.

Raica na digidigi taumada

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

Raica na digidigi kece sara

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

Semati na digidigi taumada

Oqo e sega ni vakarautaka na digidigi ni veivakatautauvatataki kece sa tekivutaki oti Gridzy, ia e vakamacalataka na yavu ni veivakatautauvatataki vou. Ia, kevaka e dua na digidigi ni dua na ivakaraitaki sa tu rawa ena vakavoutaki ena kena isau null , ena vakayagataka na isau vou ni default.

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

E rawa ni o vakayagataka oqo me vakarautaka na digidigi e vuravura raraba, kevaka o kaciva ni bera ni sa vakarau tu na DOM. O koya gona o na sega ni gadreva mo vakarautaka na digidigi me vaka na itovo tale.

Veika vakataki koya

Me vaka ga ni sa cakacaka tiko na veivakatorocaketaki kece ni Gridzy.js 2, e sega ni gadrevi na iwalewale e ra. Ia na veiqaravi vakataki koya e rawa ni vakasukai me vakayagataki kina o Gridzy ena dua na sala makawa cake:

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

Eso vei ira na digidigi oqo e sega ni rawa ni vakarautaki ena data-gridzy- itovo se ena setOptions() , baleta na vuna vakasama:

	Na isau taumada	Ivakamacala
`autoInitOnDomReady`	`true`	E raica na veika e tiko kina na kalasi `gridzy` ena vakavodoki ni tabana ka tekivutaki ira. E rawa ni vakarautaki ena `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Dauvakadidike ni Veisau	`true`	E raica na veika vou kei na kalasi `gridzy` ena gauna ga era basika kina ena DOM ka tekivutaki ira. (me vaka na kena vakayagataki na veisau ni draunipepa) E rawa ni vakarautaki ena `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Dauvakadidike ni Veisau	`true`	E raica kevaka era sa vakacurumi se kau tani na veika gone (iyaloyalo), ka vakavoutaka na grid vakataki koya. E rawa ni vakarautaki ena `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Vakamacalataka se na `data-gridzy-` itovo e vakayagataki raraba se sega. Kevaka oqo na digidigi `false` e rawa ni vakarautaki ga ena API ni taukena. E rawa ni vakarautaki ena `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Dauvakadidike ni Veisau	`true`	E raica na veisau ni `data-gridzy-` itovo, ka vakavoutaka na grid vakataki koya. E raica talega kevaka e vakacurumi se kau tani na kalasi `gridzyAnimated` ka kevaka e yaco na veisau ni itovo `style` . Kevaka e `false` `useOptionAttributes` , e raica ga na veisau ni itovo `style` . E rawa ni vakarautaki ena `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Dauvakadidike ni Veisau	`true`	E raica na veisau ni itovo `class` ni veika kece ni gone (iyaloyalo). Veiganiti me baleta na veivakasavasavataki. E rawa ni vakarautaki ena `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Dauvakadidike ni Veisau mai na vakadewa 2.5.0	`true`	E raica na veisau ni itovo `src` ni iyaloyalo kecega. E veiganiti ni vakayagataki vata kei na React se na valenivolavola tautauvata. E rawa ni vakarautaki ena `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Veisautaka na levu ni dauvakadidike mai na vakadewa 2.6.0	`true`	E raica na veisau ni rabailevu ni elemeniti. Veiganiti me baleta na ituvatuva ni saumitaro. (Ni bera na vakadewa 2.6.0 e dua na katubaleka ni veisautaki ni levu ni vakarorogo ni soqo e vakayagataki) E rawa ni vakarautaki ena `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Tekivutaka ena Liga

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

Vakarusa na ivakaraitaki

E tukuni vakatautauvata, na kena veibasai ni kena tekivutaki o Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Vakaduavatataka na lisi ni gone ena liga

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

Vakaduavatataka e dua na gone duadua ga na elemeniti ena liga

E dau sega ni gadrevi, vakavo ga ena so na gauna lailai sara.

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

Vakatautauvatataka na itovo ena liga

Raica ni dodonu me true na digidigi useOptionAttributes me baleta na ka oqo.

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

Vakasaurarataki ni Veisoliyaki

E dau sega ni gadrevi, kevaka mada ga era sa boko kece na automatisms .

gridzyInstance.render();