Bersyon 2.x – Gridzy.Gallery

Ang website awtomatiko nga ginbadbad. Kon may indi maathag, palihog tan-awa ang dokumentasyon sa Ingles.

Panguna nga Paggamit

I-upload ang mga file sang Gridzy sa imo server kag idugang ini sa imo website (sa masami sa head section):

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

Idugang ang HTML code (bisan diin sa seksyon sang lawas):

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

Amo na! Isa yadto ka bug-os nga nagapanghikot nga halimbawa. Wala sing dugang nga pag-umpisa ang kinahanglanon.

Pag-configure

Ang pinakamahapos nga paagi sa pag-configure sang Gridzy amo, ang paggamit lamang sang mga kinaiya sang HTML. Kinahanglan mo lang nga i-prefix ang mga ngalan sang opsyon nga may data-gridzy- . Gani, sa pagbutang sang spaceBetween nga opsyon, idugang lang ang attribute 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>

Panguna nga mga Opsyon

	Default nga Bili	Paglaragway
`animate`	`true`	Nagapat-od kon bala ang mga animasyon dapat gamiton kon ang grid nagabag-o (halimbawa, kon ginabag-o ang kadakuon sang bintana sang browser ukon kon nagabutang sang isa ka filter).
`layout`	`justified`	Naghatag kahulugan sa gigamit nga layout. Ang Gridzy.js 2 nagasuporta sang duha ka magkatuhay nga mga layout `justified` kag `waterfall` . Ang tagsa sa ila may kaugalingon nga dugang nga mga parameter sang opsyon, nga makita mo sa idalom sini nga lamesa.
`filter`	`*`	Nagapat-od kon ano nga mga laragway ang dapat ipakita. Ang bisan ano nga CSS-selector mahimo gamiton bilang bili diri. Sa masami ginabutang sing awtomatiko paagi sa `filterControls` (tan-awa ang masunod nga kapilian). Tan-awa ang mga Filter
`filterControls`		Nagapat-od kon ano nga mga elemento sang porma ang mahimo gamiton sa pagsala sang mga laragway. Ang bisan ano nga CSS selector, nga nagapili sang mga elemento sang HTML form, mahimo gamiton bilang balor diri. Tan-awa ang mga Filter
`autoConsiderScrollBars`	`true`	Sa pagtagna sang magamit nga kalaparon kon ang mga scroll bar makita ukon madula. Ginapanugyan gid nga ibilin ini sa `true` luwas kon ini nga automatism nagatuga sang mga problema.

Justified Mga Opsyon sa Layout

	Default nga Bili	Paglaragway
`autoFontSize`	`false`	Awtomatiko nga gina-update ang font-size nga propyedad sang tagsa ka kahon base sa orihinal nga kadakuon sang kahon. Sa default ang font-size nga propyedad wala ginbutang sing maathag.
`desiredHeight`	`190`	Naghatag kahulugan sa gitinguha nga gitas-on sa mga laray sa elemento. Ang aktwal nga kataason pagakwentahon depende sa magamit nga kalaparon kag ang mga elemento sa laray.
`hideOnMissingImage`	`true`	Ginatago ang mga kahon nga may mga laragway nga indi ma-load.
`spaceBetween`	`4`	Nagahatag kahulugan sang distansya sa tunga sang mga elemento sa mga piksel.
`lastRowAlign` halin sang bersyon 2.3.0	`justified`	Naghatag kahulugan sa pamatasan sa katapusan nga laray. Ang mga ginatugutan nga mga balor amo `left` , `center` , `right` kag `justified` .
`singleRowAlign` halin sang bersyon 2.3.0	`justified`	Nagahatag sang kahulugan sang pamatasan kon may isa lang ka laray. Ang mga ginatugutan nga mga balor amo `left` , `center` , `right` kag `justified` .
~~`fillLastRow`~~ ~~halin sang bersyon 2.1.0~~	~~`true`~~	GINKUHA sugod sang bersyon 2.4.0 (GIN-DEPRECATED halin sang bersyon 2.3.0 ) Ginaplastar ang mga laragway agud nga ang katapusan nga laray pirme mapuno sing bug-os. Kon nagaplano ka nga magdugang sang mga laragway sing dinamiko, mahimo nga maayo nga ideya nga i-deactivate ini. Wala sing epekto sa isa ka laray (tan-awa `fillSingleRow` ).
`fillSingleRow` halin sang bersyon 2.1.0	~~`true`~~	GINKUHA sugod sang bersyon 2.4.0 (GIN-DEPRECATED halin sang bersyon 2.3.0 ) Kon isa lang ang laray, gina-areglo sini ang mga laragway agud nga ang laray pirme mapuno sing bug-os. Kon mahimo nga matabo nga isa ukon duha lang ang imo mga laragway sa gallery, mahimo nga maayo nga ideya nga i-deactivate ini.

Waterfall Mga Opsyon sa Layout

	Default nga Bili	Paglaragway
`autoFontSize`	`false`	Awtomatiko nga gina-update ang font-size nga propyedad sang tagsa ka kahon base sa orihinal nga kadakuon sang kahon. Sa default ang font-size nga propyedad wala ginbutang sing maathag.
`desiredWidth`	`250`	Naghatag kahulugan sa gitinguha nga gilapdon sa mga haligi. Ang aktwal nga kalaparon pagakwentahon depende sa magamit nga kalaparon kag ang kadamuon sang mga haligi.
`hideOnMissingImage`	`true`	Ginatago ang mga kahon nga may mga laragway nga indi ma-load.
`horizontalOrder`	`false`	Nagahatag sang kahulugan nga ang mga elemento ginabutang sing estrikto nga isa ka elemento sa tagsa ka haligi halin sa wala pakadto sa tuo, dayon nagasugod liwat sa pinakawala nga haligi nga independiente sa diin nga haligi ang mas madamo nga lugar. Sa default ang mga elemento pirme ibutang sa kolum nga may pinakagamay nga kataason.
`spaceBetween`	`4`	Nagahatag kahulugan sang distansya sa tunga sang mga elemento sa mga piksel.
`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`.

Mas Advanced nga mga Opsyon

Para sa mas abanse nga mga kapilian, tan-awa ang API .

Semantic HTML

Ang pinakasimple nga HTML nga istruktura sang Gridzy amo ini:

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

Apang, ang Gridzy tuman ka flexible kag mahimo mo gamiton ang halos bisan ano nga iban pa nga istruktura sang HTML. May pila lamang ka mga punto nga dapat binagbinagon:

Ang tagsa ka bata sang elemento sang suludlan nagarepresentar sang isa ka butang sa grid.
Ang elemento sang suludlan kag ang mga anak sini mahimo nga bisan ano nga sahi sang tag, pareho sang ul kag li (binagbinaga lang nga i-reset ang mga default sang browser).
Kon ang isa ka elemento img indi isa ka direkta nga bata mismo, kinahanglan sini ang klase gridzyImage .

Gani ini man isa ka nagatrabaho nga istruktura sang HTML:

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

Ilabi na kon luyag mo magdugang sang mga kapsyon, kinahanglan mo ang isa ka abanse nga istruktura sang HTML. Para mahibaluan ang dugang pa parte sini, tan-awa ang Captions & Skins .

Mga Kapsyon kag mga Panit

Kon luyag mo magdugang sang mga kapsyon sa imo galeriya, kinahanglan mo nga ihatag ang kahulugan sang hitsura. Gani, ang pila ka mga predefined nga mga panit magamit. Ang tagsa ka panit ginabug-usan sang isa ka CSS file. Kinahanglan mo idugang ini nga file dugang sa panguna nga mga file sang Gridzy (sa masami sa seksyon sang ulo):

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

Dugang pa, kinahanglan mo ang isa ka abanse nga istruktura sang HTML:

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

Kon nagapalibog ka parte sa istruktura sang HTML, tan-awa ang Semantic HTML .

Para sa caption mahimo ka maggamit sang bisan ano nga sahi sang tag, siguraduhon lang nga may yara ini sang klase gridzyCaption . Ang img nga elemento nagakinahanglan sang klase gridzyImage .

Ang halimbawa sa ibabaw nagapakita sa imo sang panit gridzySkinClassic . Para makagamit sang lain, islan lang ang ngalan sang panit sang isa sini:

Nalakip nga mga Panit

	Magamit nga mga Klase
gridzySkinBlank isa ka maayo nga pagsugod para sa paghimo sang kaugalingon nga panit live preview	`gridzySkinBlank`
gridzySkinClassic live preview	`gridzySkinClassic` `gridzySkinClassicLight`(GIN-DEPRECATED halin sang bersyon 2.6.0)
gridzySkinFullOverlay live preview	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(GIN-DEPRECATED halin sang bersyon 2.6.0)
gridzySkinLift live preview	`gridzySkinLift` `gridzySkinLiftLight`(GIN-DEPRECATED halin sang bersyon 2.6.0)
gridzySkinMagnifier wala nalakip ang pag-obra sang zoom live preview	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(GIN-DEPRECATED halin sang bersyon 2.6.0)

Ang tanan nga mga panit sa ibabaw nagakinahanglan lamang sang CSS file, apang may dugang nga mga panit nga nagakinahanglan man sang JavaScript file:

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

	Magamit nga mga Klase
gridzySkinBlur wala nagatrabaho sa IE live preview	`gridzySkinBlur` `gridzySkinBlurLight`(GIN-DEPRECATED halin sang bersyon 2.6.0)
gridzySkinCard live preview	`gridzySkinCard` `gridzySkinCardLight`(GIN-DEPRECATED halin sang bersyon 2.6.0)

Mga Opsyon sa Panit

Sugod sang bersyon 2.6.0 may mga Opsyon sa pag-configure sang mga built-in nga mga panit. Depende sa partikular nga panit mahimo mo ibutang ang kolor sang background, kolor sang teksto kag landong sang teksto. Kinahanglan mo lang gamiton ang mga custom properties sang CSS pareho sang makita mo diri:

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

Tan-awa ang mga ginasuportahan nga mga variable kag mga default nga mga bili para sa tagsa ka panit diri:

gridzySkinClassic

Variable	Default nga Bili	Impormasyon
`--background`	`rgba(0, 0, 0, .7)`	nagatugot sang bisan ano nga bili sang background sang CSS
`--color`	`rgb(255, 255, 255)`	nagatugot sang bisan ano nga bili sang kolor sang CSS
`--text-shadow`	`none`	nagatugot sang bisan ano nga bili sang landong sang teksto sang CSS

gridzySkinFullOverlay

Variable	Default nga Bili	Impormasyon
`--background`	`rgba(0, 0, 0, .7)`	nagatugot sang bisan ano nga bili sang background sang CSS
`--color`	`rgb(255, 255, 255)`	nagatugot sang bisan ano nga bili sang kolor sang CSS
`--text-shadow`	`none`	nagatugot sang bisan ano nga bili sang landong sang teksto sang CSS

gridzySkinLift

Variable	Default nga Bili	Impormasyon
`--background`	`rgba(0, 0, 0, .7)`	nagatugot sang bisan ano nga bili sang background sang CSS
`--color`	`rgb(255, 255, 255)`	nagatugot sang bisan ano nga bili sang kolor sang CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	nagatugot sang bisan ano nga bili sang landong sang teksto sang CSS

gridzySkinMagnifier

Variable	Default nga Bili	Impormasyon
`--background`	`rgba(0, 0, 0, .7)`	nagatugot sang bisan ano nga bili sang background sang CSS
`--color`	`rgb(255, 255, 255)`	nagatugot sang bisan ano nga bili sang kolor sang CSS

Ini nga panit wala nagasuporta sa --text-shadow

gridzySkinBlur

Variable	Default nga Bili	Impormasyon
`--background`	`rgba(0, 0, 0, .7)`	nagatugot sang bisan ano nga bili sang background sang CSS
`--color`	`rgb(255, 255, 255)`	nagatugot sang bisan ano nga bili sang kolor sang CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	nagatugot sang bisan ano nga bili sang landong sang teksto sang CSS

gridzySkinCard

Variable	Default nga Bili	Impormasyon
`--background`	`rgba(0, 0, 0, 1)`	nagatugot sang bisan ano nga bili sang background sang CSS
`--color`	`rgb(255, 255, 255)`	nagatugot sang bisan ano nga bili sang kolor sang CSS
`--text-shadow`	`none`	nagatugot sang bisan ano nga bili sang landong sang teksto sang CSS

Ang tanan nga predefined skins nagasuporta lamang sang simple nga mga kapsyon sang teksto. Mahimo ka makahimo sang imo kaugalingon kag mas komplikado nga mga panit. Palihog tan-awa ang Style Gridzy .

Style Gridzy

Kon wala sing napat-od na nga panit nga nagakabagay sa imo mga kinahanglanon, mahimo ka mag-istilo sang imo kaugalingon.

Ang pinakamahapos nga paagi amo ang pagkopya anay sang nagaluntad nga panit kag ipasibu ini sa imo kaugalingon nga mga kinahanglanon. Ang predefined skin gridzySkinBlank masami nga nagahatag sang maayo nga pundasyon subong man sang maayo nga dokumentasyon sa CSS file:

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

Sa CSS file makita mo ang mga klase nga gridzySkinBlank , gridzyImage kag gridzyCaption . Ang Gridzy mismo wala nagakinahanglan sini nga mga klase. Ginagamit lang ini para sa pag-istilo kag gani mahimo mo sila kuhaon ukon bag-uhon ang ngalan kon luyag mo.

Dugang pa makita mo ang klase sang CSS gridzyItem . Ang Gridzy nagabutang sini nga klase sing awtomatiko sa tanan nga direkta nga mga kabataan sang panguna nga elemento sang suludlan. Gani, mahimo mo gamiton ini nga klase sa pag-istilo sang mga butang sa imo galeriya.

Hunahuna ang Importante nga mga Butang

Ang mga kaundan sang butang dapat bug-os nga nagasabat. Hunahunaa nga ang gidak-on sa elemento siguradong magbag-o. Gamita ang mga porsyento nga mga bili sa baylo sang mga bili sang pixel. Kag tan-awa ang Gridzy layout option autoFontSize , nga nagabugkos sang kadakuon sang font sa kadakuon sang kahon sang butang.
Ang tagsa ka butang dapat may yara sang maayo nga kahulugan nga aspect ratio. Ang aspect ratio sang butang indi gid magbag-o kag kinahanglanon ini sa pagkalkulo sang grid. Gani kon ang isa ka butang wala sing awtomatiko nga may maayo nga kahulugan nga aspect ratio, i-predefine ini sing mano-mano (halimbawa paagi sa css).

Sa pila ka mga kaso, mahimo nga mas mahapos ang pag-istilo sang kaundan sang mga butang antes mag-initialize ang Gridzy. Kuhaa lang ang klase gridzy ukon ang Gridzy javascript file para sa sini sing temporaryo.

Amo na! Amo lang ina ang kinahanglan mo para makahimo sang imo kaugalingon nga panit. Ang kalabanan sang mga predefined nga mga panit wala nagagamit sing kapin pa sa sini.

Pero mahimo nga may madamo pa kon luyag mo ...

Advanced Skins

Ang Gridzy nagagamit sang mas madamo nga mga klase sang CSS sangsa gridzyItem lamang. Ang kalabanan sa ila iga-set sing awtomatiko kag mahimo mo man ini gamiton para sa pag-istilo.

Mga Klase sang Panguna nga Sulanan

Ngalan sang Klase	Paglaragway
`gridzy` sa pag-set sing mano-mano	Ang Gridzy awtomatiko nga nagapangita sang mga elemento nga may sini nga klase kag gina-initialize ini.
`gridzyAnimated`	Awtomatiko nga ibutang kon ang opsyon nga `animate` `true` . Kon ini nga klase gin-set sing manu-mano, ang opsyon nga `animate` awtomatiko nga mangin `true` man (luwas kon ini maathag nga gin-set sa `false` ).

Mga Klase sang Butang

Ngalan sang Klase	Paglaragway
`gridzyItem`	Iga-set sa gilayon nga ang butang magsugod sa proseso sang pag-umpisa. Indi gid pagkuhaon.
`gridzyItemInitializing`	Iga-set sa gilayon nga ang butang magsugod sa proseso sang pag-umpisa. Iga-islan sang `gridzyItemReady` sa gilayon nga ang butang bug-os nga ma-initialize. Nagakahulugan nga indi nga ang mga laragway bug-os nga nakarga (tan-awa `gridzyItemLoading` ), apang ang butang handa na nga makita.
`gridzyItemReady`	Magabulos sa `gridzyItemInitializing` sa gilayon nga ang butang bug-os nga na-initialize. Indi gid pagkuhaon. Indi buot silingon nga ang mga laragway bug-os na nga nakarga (tan-awa `gridzyItemComplete` ), apang ang butang handa na nga makita.
`gridzyItemLoading`	Iga-set sa gilayon nga ang butang magsugod sa proseso sang pag-umpisa. Igabuslan sang `gridzyItemComplete` sa gilayon nga ang mga laragway nga yara sa sulod (sa masami isa lamang) bug-os na nga na-load.
`gridzyItemComplete`	Magabulos sa `gridzyItemLoading` sa gilayon nga ang mga unod nga mga laragway (sa masami isa lamang) bug-os nga na-load. Indi gid pagkuhaon.
`gridzyItemInitialToVisible`	I-set sa gilayon nga ang butang magsugod sa pagguwa sa una nga tion. Kuhaon sa gilayon nga ang butang makita na sing bug-os.
`gridzyItemVisible`	Ibutang sa gilayon nga ang butang makita na sing bug-os. Kuhaon sa gilayon nga ang butang magsugod sa pagkadula.
`gridzyItemVisibleToHidden`	Ibutang sa gilayon nga ang butang magsugod sa pagkawala. Kuhaon sa gilayon nga ang butang bug-os nga natago.
`gridzyItemHidden`	Ibutang sa gilayon nga ang butang bug-os nga natago. Kuhaon sa gilayon nga ang butang magsugod sa pagpakita.
`gridzyItemHiddenToVisible`	Iga-set sa gilayon nga ang butang magsugod sa pagguwa (luwas sa pagguwa sa una nga tion – tan-awa ang klase nga `gridzyItemInitialToVisible` ). Kuhaon sa gilayon nga ang butang makita na sing bug-os.
`gridzyItemVisibleToVisible`	Iga-set sa gilayon nga may nagbag-o sa grid, apang ang butang mismo amo kag nagapabilin nga makita. Kuhaon sa gilayon nga matapos ang pagbag-o sang animasyon.

Sa default ang process indicator kag ang mga animation para sa nagapakita kag nagakadula nga mga laragway gintalana na sang Gridzy main CSS file.

Paagi sa sini nga mga klase sang CSS nga nasambit sa ibabaw mahimo mo ma-istilo ang imo kaugalingon nga indicator sang proseso kag mga animasyon. Magpangahas sa pagtan-aw sa Gridzy main CSS file, agud mahangpan kon ano ang kinahanglan mo nga i-override. Wala sing kahadlok, ang tanan nadokumento sing maayo didto.

I-optimize ang Pag-load

Kon maggamit ka sang madamo nga mga laragway, mahimo nga isa ka maayo nga ideya nga buligan ang Gridzy sa pagtukod sang grid sing mas madasig.

Likayi ang Paglukso sang mga Larawan

Kinahanglan gid sang Gridzy ang aspect ratio sang tanan nga mga laragway sa pagkalkulo sang grid. Ini nga mga kamatuoran nagaresulta sa paglukso sang mga elemento kon ang pila ka mga laragway handa na kag ang iban indi. Kon mas madamo ang mga laragway, mas makahalalit ini nga epekto.

Agod malikawan ini nga pamatasan, ibutang lang ang mga kinaiya width kag height para sa tanan nga mga elemento img . Importante nga ibutang ang husto nga mga balor para sa tagsa ka indibidwal nga laragway, kay kon indi, ang mga laragway magatuhay. Ang husto nga mga balor amo ang orihinal nga kasangkaron kag kataason sang tagsa ka laragway:

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

Pagkatapos sini, makalkulo gilayon ni Gridzy ang grid nga indi na kinahanglan nga mahibaluan ang aktuwal nga kadakuon sang mga laragway.

Matamad nga Pag-load

Para ma-load lang ang mga laragway nga yara sa makita nga viewport, sunda lang ining mga tikang:

Isulod ang mga kinaiya width kag height subong sang ginlaragway sa ibabaw (siguraduhon nga gamiton ang husto nga mga balor)
Islan ang tanan nga mga kinaiya src sa data-gridzylazysrc subong sang ginapakita sa idalom (kon may yara ka man sang mga kinaiya srcset , islan ini sang 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>

Pagkatapos sini nga mga tikang ang mga laragway maga-load sa gilayon nga sila malapit ukon sa sulod sang viewport.

Indikasyon sang Proseso

Ang indicator sang proseso amo ang gamay nga animated icon nga makita samtang naga-load ang laragway. Kon maggamit ka sang mga kapsyon kag mga panit , ang timailhan sang proseso igapakita sing awtomatiko. Kon indi kinahanglan mo ang pila ka mga pagbag-o:

Ibutang ang tagsa ka elemento img sa isa ka elemento div
(ukon sa bisan ano nga elemento – tan-awa ang semantic HTML para sa dugang pa)
Idugang ang klase gridzyImage sa tagsa ka elemento 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>

Pagkatapos sini dapat mo makita ang mga indicator sang proseso kon ang mga laragway nagakinahanglan sang tion sa pag-load.

Mga Filter

Ang mga filter sa Gridzy simple lang pero gamhanan. Bisan ano man nga sahi sang filter ang kinahanglan mo, posible gid nga mahimo ini. Ang kinahanglan mo lang amo, ang gamay nga CSS kag pila ka mga elemento sang HTML form ...

Yari ang isa ka halimbawa:

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

Tukoron Naton Ini sing Tikang-tikang

1. Una kinahanglan naton ang kinaandan nga HTML nga istruktura sang Gridzy kag ibutang ang mga ngalan sang klase para sa tanan nga mga butang sa galeriya agud ma-filter naton sila pagkatapos

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

Sa sini nga halimbawa nagagamit lang kita sang isa ka klase para sa tagsa ka elemento. Apang mahimo ka man magbutang sang madamo nga mga klase para sa isa ka elemento, kon ina nga elemento dapat makita paagi sa madamo nga mga filter.

2. Dayon magdugang kita sang pila ka mga buton nga paagi sini mahimo naton mabag-o ang mga filter dayon

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

Sa baylo sang mga buton, mahimo ka man maggamit sang iban pa nga mga elemento sang pormas pareho sang mga checkbox, mga buton sa radyo, mga field nga pilia kag iban pa.

Subong sang makita mo, ang mga balor sang mga buton amo ang kinaandan nga mga CSS selector. Sa gilayon nga matapos namon, ang pag-klik sa amo nga buton magapakita sang mga laragway nga nagahisanto sa sina nga CSS selector. Sa teknikal ginabutang lamang sini ang kapilian filter sa sini nga bili.

Mahimo ka man maggamit sang mas komplikado nga mga selector. Halimbawa ang :not(.animals) magatrabaho man, subong man ang .animals.people kag .animals, .people .

3. Sa katapusan, gina-encapsulate namon ang mga buton sa isa ka div container kag gina-bind ini sa Gridzy gallery, paagi sa pag-set sang filterControls nga opsyon:

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

Subong sang makita mo, nagagamit man kami sang CSS selector para sa filterControls nga opsyon. Ang div container nga may id attribute nagaserbe lamang sa paghimo sang mga buton nga mas mahapos nga mapili paagi sa sina nga CSS selector.

Amo na!

Kon mas gusto mo ang isa ka solusyon sa JavaScript, tan-awa ang API .

API

Bisan pa ang Gridzy may kaugalingon nga API, ang kalabanan nga mga butang mahimo nga wala ini, paagi lamang sa pagmaniobra sang DOM. Matalupangdan ini ni Gridzy kag i-adjust ang grid. Pero may ara man sang isa ka gamhanan nga API ...

Pagmaniobra sang DOM

Para sa tanan nga mga manipulasyon sang Document Object Model (DOM) kinahanglan naton anay ang elemento sang suludlan:

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

Magdugang sang mga Larawan

Importante nga bug-os nga tukuron kag pun-on ang bag-o nga elemento sang bata antes mo ini idugang sa elemento sang suludlan. Kon indi, indi makita sang Gridzy ang husto nga mga sukol.

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

Kuhaa ang mga Larawan

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

Bag-uha ang mga Opsyon

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

Dugang pa parte sa pagmaniobra sang DOM nga makita mo sa MDN web docs . May yara man sang Introduksyon sa DOM nga magamit.

Proprietary API

Para magamit ang API, kinahanglan naton anay ang Gridzy instance, nga nagabugkos sa Gridzy container element:

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

Magkuha sang Opsyon

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

Kuhaa ang Tanan nga mga Opsyon

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

Ibutang ang mga Opsyon

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

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

I-apply ang Filter

Ang pag-apply sang filter amo ang pag-set sang option filter nga mahimo nga bisan ano nga balido nga CSS selector:

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

Magdugang sang mga Callback Functions

GINDULA halin sang bersyon 2.4.0
Gamita ang moderno kag mas madali nga mga Hitabo sa baylo. Tan-awa ang masunod nga seksyon para sa mga detalye.

~~Ang Gridzy.js 2 nagasuporta sang pila ka mga kapilian para sa mga callback function. Mahimo lamang ini i-set paagi sa proprietary API, pero pareho sang iban nga mga opsyon:~~

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

	~~Paglaragway~~
~~`onBeforeOptionsChanged`~~	~~Callback function nga gina-invoke direkta antes mag-set sang mga opsyon.~~
~~`onOptionsChanged`~~	~~Callback function nga ginatawag direkta pagkatapos sang pagbutang sang mga kapilian.~~
~~`onBeforeRender`~~	~~Callback function nga ginatawag direkta antes mag-render.~~
~~`onRender`~~	~~Callback function nga ginatawag direkta pagkatapos sang pag-render.~~

Gamita ang mga Hitabo

halin sang bersyon 2.4.0

Mahimo mo gamiton ang mga hitabo sa Gridzy pareho gid sa kinaandan nga mga hitabo sa 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.
});

Ang iban nga mga hitabo ginapalupok sa elemento sang suludlan sang Gridzy kag ang iban nga mga hitabo ginapalupok sa indibidwal nga mga elemento sang butang sa sulod sang elemento sang suludlan.

Mga hitabo nga ginpalupok sa elemento sang suludlan sang Gridzy:

	Paglaragway
`gridzyBeforeInit`	Mga sunog sa wala pa ang pagsugod sa gallery.
`gridzyInit`	Mga sunog pagkatapos sang pag-umpisa sang gallery.
`gridzyBeforeOptionsChanged`	Nagasunog antes magbutang sang mga kapilian.
`gridzyOptionsChanged`	Nagasunog pagkatapos sang pagbutang sang mga kapilian.
`gridzyBeforeRender`	Mga sunog antes mag-render.
`gridzyRender`	Mga sunog pagkatapos sang pag-render.

Kon may mga hitabo nga wala ka makatambong diri, palihog magpadala sang pangabay sa suporta .

event.target nagahatag sang elemento sang suludlan sang Gridzy.
event.detail.instance nagahatag sang Gridzy instance.

Mga hitabo nga ginpalupok sa mga elemento sang butang:

	Paglaragway
`gridzyItemBeforeInit`	Nagasunog antes ang pag-umpisa sang butang.
`gridzyItemInit`	Nagasunog pagkatapos sang pag-umpisa sang butang.
`gridzyItemLoading`	Nagasunog kon ang butang magsugod sa pag-load.
`gridzyItemReady`	Nagasunog kon ang butang handa na para sa kalkulasyon sang grid. Gani ang aspect ratio nahibaluan, apang ang laragway mahimo nga naga-load pa.
`gridzyItemComplete`	Nagasunog kon ang larawan sang butang bug-os nga nakarga.

Kon may mga hitabo nga wala ka makatambong diri, palihog magpadala sang pangabay sa suporta .

event.target nagahatag sang tagsa ka elemento sang butang.
event.detail.instance nagahatag sang Gridzy instance.

API – Global

May pila ka mga function nga independente sa mga instance sang Gridzy. Gani indi naton kinahanglan nga magkuha sang isa ka halimbawa antes.

Magkuha sang Default nga Opsyon

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

Kuhaa ang Tanan nga Default nga mga Opsyon

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

Ibutang ang Default nga mga Opsyon

Wala ini nagabutang sang mga kapilian sang tanan nga na-initialize na nga mga instance sang Gridzy, apang nagahatag sang kahulugan sang basehan para sa bag-o nga mga instance. Apang, kon ang isa ka opsyon sang nagaluntad nga instance i-reset paagi sa balor nga null , magagamit ini sang bag-o nga default nga balor.

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

Mahimo mo ini gamiton sa pagbutang sang mga opsyon sa bug-os nga kalibutan, kon tawgon mo ini antes mangin handa ang DOM. Gani indi mo na kinahanglan nga ibutang ang mga opsyon bilang mga kinaiya.

Mga automatismo

Samtang ang tanan nga mga automatism sang Gridzy.js 2 aktibo, indi na kinahanglan ang mga pamaagi sa idalom. Apang ang mga automatism mahimo nga mapatay sa paggamit sang Gridzy sa mas tradisyonal nga paagi:

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

Ang iban sini nga mga kapilian indi mahimo nga ibutang paagi sa data-gridzy- attributes ukon paagi sa setOptions() , bangod sang lohikal nga mga rason:

	Default nga Bili	Paglaragway
`autoInitOnDomReady`	`true`	Nakita ang mga elemento nga may klase `gridzy` sa pag-load sang pahina kag gina-initialize ini. Mahimo ibutang paagi sa `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	Nagatukib sang bag-o nga mga elemento nga may klase `gridzy` sa gilayon nga makita ini sa DOM kag gina-initialize ini. (halimbawa sa paggamit sang mga pagbalhin sang pahina) Mahimo ibutang paagi sa `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Nahibaluan kon bala ang mga elemento sang bata (mga laragway) gindugang ukon ginkuha, kag awtomatiko nga gina-update ang grid. Mahimo ibutang paagi sa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Nagahatag sang kahulugan kon bala ang mga kinaiya `data-gridzy-` kinaandan nga ginagamit ukon indi. Kon ini `false` ang mga kapilian mahimo lamang ibutang paagi sa proprietary API. Mahimo ibutang paagi sa `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	Nakita ang mga pagbag-o sang mga kinaiya `data-gridzy-` , kag gina-update ang grid sing awtomatiko. Nahibaluan man kon ang `gridzyAnimated` nga klase gindugang ukon ginkuha kag kon ang mga pagbag-o sa kinaiya `style` nagakatabo. Kon `useOptionAttributes` `false` , gina-detect lang sini ang mga pagbag-o `style` attribute. Mahimo ibutang paagi sa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Nakita ang mga pagbag-o sang mga kinaiya `class` sang tanan nga mga elemento sang bata (mga laragway). May kalabutan bahin sa mga filter. Mahimo ibutang paagi sa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver halin sang bersyon 2.5.0	`true`	Nakita ang mga pagbag-o sang mga kinaiya `src` sang tanan nga mga laragway. May kaangtanan kon gamiton upod sa React ukon kaanggid nga mga librarya. Mahimo ibutang paagi sa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver halin sang bersyon 2.6.0	`true`	Nakita ang mga pagbag-o sa gilapdon sa elemento. May kalabutan bahin sa responsive nga disenyo. (Antes sang bersyon 2.6.0 ang window resize event listener gingamit) Mahimo ibutang paagi sa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

I-initialize sing Manual

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

Gub-a ang Instance

Sa kinaandan nga pagsiling, ang kabaliskaran sang pag-initialize sang Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

I-sync ang Listahan sang Bata sing Manual

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

I-sync ang isa ka bata nga elemento sing mano-mano

Sa masami indi kinahanglanon, luwas sa talagsahon gid nga mga kaso.

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

I-sync ang mga Kinaiya sing Manual

Talupangda nga ang useOptionAttributes nga opsyon dapat true para sa sini.

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

Pwersa nga Paghatag

Sa masami indi kinahanglanon, bisan pa nga ang tanan nga mga automatism ginpatay

gridzyInstance.render();

WordPress Plugin

JavaScript Library

Serbisyo