Bersyon 2.x – Gridzy.Gallery .

Awtomatiko nga ginhubad an website. Kun mayda diri klaro, alayon pagkita han dokumento ha Iningles.

Batakan nga Paggamit

Ikarga an mga file han Gridzy ha imo server ngan idugang ini ha imo websait (kasagaran ha ulohan nga seksyon):

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

Idugang an HTML nga kodigo (bisan diin ha seksyon han 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 adto! Usa ito nga bug-os nga nagios nga ehemplo. Waray kinahanglan nga dugang nga pagtikang.

Pag-andam

An pinakamasayon nga paagi ha pag-andam han Gridzy amo an, paggamit la hin mga kalidad han HTML. Kinahanglan mo la unahan an mga ngaran han kapilian hin data-gridzy- . Salit, ha pagbutang han kapilian spaceBetween , idugang la an kalidad nga 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 Kapilian

	Kasagaran nga Bili	Paghulagway
`animate`	`true`	Nagdeterminar kun an mga animasyon in kinahanglan gamiton kun an grid nagbabag-o (pananglitan, kun ginbabag-o an kadako han bintana han browser o kun ginbubutang an usa nga pagsala).
`layout`	`justified`	Naghahatag hin kahulogan han ginamit nga layout. Gridzy.js 2 nasuporta han duha nga magkalainlain nga layout `justified` ngan `waterfall` . An kada usa ha ira mayda kalugaringon nga kadugangan nga mga parameter han kapilian, nga makikita mo ha ubos hini nga lamesa.
`filter`	`*`	Nagdidesisyon kon ano nga mga imahen an sadang ipakita. Bisan ano nga CSS-pagpili in pwede gamiton komo kantidad dinhi. Kasagaran nga awtomatiko nga ginbutang pinaagi `filterControls` (kitaa an sunod nga kapilian). Kitaa an mga Pagsala .
`filterControls`		Nahibabaro kun ano nga mga elemento han porma an pwede gamiton ha pagsala han mga imahe. Bisan ano nga CSS nga parapili, nga nagpipili hin mga elemento han porma han HTML, in pwede gamiton komo kantidad dinhi. Kitaa an mga Pagsala .
`autoConsiderScrollBars`	`true`	Para matagna an makukuha nga kahaluag kun makita o mawawara an mga scroll bar. Pirme ginrerekomenda nga pabay-an ini ha `true` labot la kun ini nga awtomatismo in nagdudurot hin problema.

Mga Justified sa Layout

	Kasagaran nga Bili	Paghulagway
`autoFontSize`	`false`	Awtomatiko nga nagbabag-o han propyedad han kadako han letra han kada kahon basado ha orihinal nga kadako han kahon. Ha kasagaran an propyedad han kadako han letra diri ginbutang hin klaro.
`desiredHeight`	`190`	Naghahatag hin kahulogan han ginhihingyap nga kahitaas han mga laray han elemento. An aktuwal nga kahitaas in pagkukuwentahon depende han makukuha nga kahaluag ngan han mga elemento ha laray.
`hideOnMissingImage`	`true`	Nagtatago hin mga kahon nga mayda mga ladawan nga waray ma-load.
`spaceBetween`	`4`	Naghahatag hin kahulogan han distansya ha butnga han mga elemento ha mga piksel.
`lastRowAlign` tikang han bersyon 2.3.0.	`justified`	Naghahatag hin kahulogan han batasan han urhi nga laray. An mga gintutugutan nga mga kantidad amo an `left` , `center` , `right` ngan `justified` .
`singleRowAlign` tikang han bersyon 2.3.0.	`justified`	Naghahatag hin kahulogan han batasan kun usa la nga usa nga laray. An mga gintutugutan nga mga kantidad amo an `left` , `center` , `right` ngan `justified` .
~~`fillLastRow`~~ ~~tikang han bersyon 2.1.0.~~	~~`true`~~	GINTAnggal tikang han bersyon 2.4.0. (GIN-WARAY tikang han bersyon 2.3.0 ) Gin-aayos an mga ladawan basi an ultimo nga laray pirme bug-os nga mapuno. Kon nagplano ka pagdugang hin mga ladawan hin dinamiko, mahimo nga maopay nga ideya nga ig-deaktibo ini. Waray epekto ha mga uusa nga laray (kitaa `fillSingleRow` ).
`fillSingleRow` tikang han bersyon 2.1.0.	~~`true`~~	GINTAnggal tikang han bersyon 2.4.0. (GIN-WARAY tikang han bersyon 2.3.0 ) ~~Kon usa la an laray, gin-aayos hito an mga ladawan basi pirme bug-os nga mapuno an laray. Kun pwede mahitabo nga usa o duha la an imo imahe ha galeriya, pwede nga maupay nga ideya nga ig-deaktibo ini.~~

Mga Waterfall ha Paglarang

	Kasagaran nga Bili	Paghulagway
`autoFontSize`	`false`	Awtomatiko nga nagbabag-o han propyedad han kadako han letra han kada kahon basado ha orihinal nga kadako han kahon. Ha kasagaran an propyedad han kadako han letra diri ginbutang hin klaro.
`desiredWidth`	`250`	Naghahatag hin kahulogan han ginhihingyap nga kahaluag han mga kolum. An aktuwal nga kahaluag in pagkukuwentahon depende han makukuha nga kahaluag ngan kadamo han mga kolum.
`hideOnMissingImage`	`true`	Nagtatago hin mga kahon nga mayda mga ladawan nga waray ma-load.
`horizontalOrder`	`false`	Naghahatag hin kahulogan nga an mga elemento in ginbutang hin estrikto nga usa nga elemento ha kada kolum tikang ha wala ngadto ha tuo, katapos nagtitikang utro ha pinakawala nga kolum nga bulag diin an kolum mas damo an lugar. Ha default an mga elemento in pirme igbubutang ha kolum nga mayda pinakagutiay nga kahitaas.
`spaceBetween`	`4`	Naghahatag hin kahulogan han distansya ha butnga han mga elemento ha 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 Abanse nga mga Kapilian .

Para hin mas abanse nga mga kapilian, kitaa an API .

HTML nga kahulogan

An pinakasimple nga HTML nga istraktura han 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>

Bisan pa, an Gridzy in duro ka-mabag-o ngan pwede ka gumamit hin haros bisan ano nga iba nga HTML nga istraktura. May-ada la pipira nga punto nga sadang tagdon:

An kada bata han elemento han surudlan nagrirepresentar hin usa nga butang ha grid.
Parehas ang elemento sa surudlan ug ang mga anak niini puede bisan unsa nga klase sa tag, sugad sa ul ug li (hunahunaa lang sa pag-reset sa mga default sa browser).
Kun an usa nga elemento img diri direkta nga bata mismo, kinahanglan hini an klase gridzyImage .

Salit ini liwat in usa nga nagtatrabaho nga HTML nga istraktura:

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

Labi na kun karuyag mo magdugang hin mga kapsyon, kinahanglan mo hin abanse nga HTML nga istraktura. Para mahibaro hin dugang pa mahitungod hini, kitaa an Mga Kapsyon & Panit .

Mga Kapsyon & Panit

Kun karuyag mo magdugang hin mga kapsyon ha imo galeriya, kinahanglan mo ighatag an kahulogan han hitsura. Salit, may-ada pipira nga gin-unabi na nga mga panit. An kada panit nga ginkokomponer hin CSS nga file. Kinahanglan mo igdugang ini nga salin labot la han mga panguna nga mga salin han Gridzy (kasagaran ha seksyon han ulo):

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

Dugang pa kinahanglan mo hin abanse nga HTML nga istraktura:

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

Kun napapausa ka mahitungod han istraktura han HTML, kitaa an Semantiko nga HTML .

Para han kapsyon pwede mo gamiton an bisan ano nga klase hin tag, siguraduha la nga mayda ini klase gridzyCaption . An elemento img nagkikinahanglan han klase gridzyImage .

An ehemplo ha igbaw nagpapakita ha imo han gridzySkinClassic . Para makagamit hin iba, ilisan la an ngaran han panit hin usa hini:

Upod nga mga Panit

	Makukuha nga mga Klase
Blangko nga Panit maupay nga tinikangan para han paghimo hin kalugaringon nga panit . live nga pagkita	`gridzySkinBlank`
gridzySkinClassic live nga pagkita	`gridzySkinClassic` `gridzySkinClassicLight`(GIN-WARAY na tikang han bersyon 2.6.0)
gridzySkinFullOverlay live nga pagkita	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(GIN-WARAY na tikang han bersyon 2.6.0)
gridzySkinLift live nga pagkita	`gridzySkinLift` `gridzySkinLiftLight`(GIN-WARAY na tikang han bersyon 2.6.0)
gridzySkinMagnifier waray ig-upod an pag-andar han pag-zoom live nga pagkita	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(GIN-WARAY na tikang han bersyon 2.6.0)

An ngatanan nga mga panit ha igbaw nagkikinahanglan la hin CSS nga file, pero mayda mga dugang nga mga panit nga nagkikinahanglan gihapon hin JavaScript nga file:

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

	Makukuha nga mga Klase
gridzySkinBlur diri natrabaho ha IE . live nga pagkita	`gridzySkinBlur` `gridzySkinBlurLight`(GIN-WARAY na tikang han bersyon 2.6.0)
gridzySkinCard live nga pagkita	`gridzySkinCard` `gridzySkinCardLight`(GIN-WARAY na tikang han bersyon 2.6.0)

Mga Kapilian ha Panit

Tikang han bersyon 2.6.0 mayda mga Kapilian ha pag-configure han mga nakasulod nga mga panit. Depende han partikular nga panit mahimo mo ibutang an kolor han luyo, kolor han teksto ngan landong han teksto. Kinahanglan mo la gumamit hin mga pasadya nga propyedad han CSS sugad han imo makikita dinhi:

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

Kitaa an mga ginsusuportahan nga mga baryable ngan mga kasagaran nga kantidad para han kada panit dinhi:

gridzySkinClassic

Mabag-o-bag-o	Kasagaran nga Bili	Impormasyon
`--background`	`rgba(0, 0, 0, .7)`	nagtutugot hin bisan ano nga CSS nga kantidad ha luyo .
`--color`	`rgb(255, 255, 255)`	nagtutugot hin bisan ano nga kantidad han kolor han CSS .
`--text-shadow`	`none`	nagtutugot hin bisan ano nga CSS nga teksto-landong nga kantidad .

gridzySkinFullOverlay

Mabag-o-bag-o	Kasagaran nga Bili	Impormasyon
`--background`	`rgba(0, 0, 0, .7)`	nagtutugot hin bisan ano nga CSS nga kantidad ha luyo .
`--color`	`rgb(255, 255, 255)`	nagtutugot hin bisan ano nga kantidad han kolor han CSS .
`--text-shadow`	`none`	nagtutugot hin bisan ano nga CSS nga teksto-landong nga kantidad .

gridzySkinLift

Mabag-o-bag-o	Kasagaran nga Bili	Impormasyon
`--background`	`rgba(0, 0, 0, .7)`	nagtutugot hin bisan ano nga CSS nga kantidad ha luyo .
`--color`	`rgb(255, 255, 255)`	nagtutugot hin bisan ano nga kantidad han kolor han CSS .
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	nagtutugot hin bisan ano nga CSS nga teksto-landong nga kantidad .

gridzySkinMagnifier

Mabag-o-bag-o	Kasagaran nga Bili	Impormasyon
`--background`	`rgba(0, 0, 0, .7)`	nagtutugot hin bisan ano nga CSS nga kantidad ha luyo .
`--color`	`rgb(255, 255, 255)`	nagtutugot hin bisan ano nga kantidad han kolor han CSS .

Ini nga panit diri nasuporta --text-shadow

gridzySkinBlur

Mabag-o-bag-o	Kasagaran nga Bili	Impormasyon
`--background`	`rgba(0, 0, 0, .7)`	nagtutugot hin bisan ano nga CSS nga kantidad ha luyo .
`--color`	`rgb(255, 255, 255)`	nagtutugot hin bisan ano nga kantidad han kolor han CSS .
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	nagtutugot hin bisan ano nga CSS nga teksto-landong nga kantidad .

gridzySkinCard

Mabag-o-bag-o	Kasagaran nga Bili	Impormasyon
`--background`	`rgba(0, 0, 0, 1)`	nagtutugot hin bisan ano nga CSS nga kantidad ha luyo .
`--color`	`rgb(255, 255, 255)`	nagtutugot hin bisan ano nga kantidad han kolor han CSS .
`--text-shadow`	`none`	nagtutugot hin bisan ano nga CSS nga teksto-landong nga kantidad .

An ngatanan nga gin-unabi nga mga panit nasuporta la hin simple nga mga kapsyon han teksto. Mahimo ka maghimo hin imo kalugaringon ngan mas komplikado nga mga panit. Alayon kitaa an Estilo nga Gridzy .

Estilo nga Gridzy

Kon waray daan nga gintalaan nga panit nga angay ha imo mga panginahanglan, mahimo ka mag-istilo hin imo kalugaringon.

An pinakamasayon nga paagi amo an pagkopya anay hin naeksister na nga panit ngan pagpahiuyon hito ha imo kalugaringon nga mga panginahanglan. An daan nga gintudlok nga panit gridzySkinBlank kasagaran nga maghahatag hin maupay nga pundasyon sugad man hin maupay nga dokumentasyon ha CSS nga 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;
}

Ha CSS nga file makikita mo an mga klase gridzySkinBlank , gridzyImage ngan gridzyCaption . Hi Gridzy mismo diri kinahanglan hini nga mga klase. Ginagamit la ini para hin pag-istilo ngan salit pwede mo ini kuhaon o bag-uhon an ngaran kun karuyag mo.

Dugang pa makikita mo an CSS nga klase gridzyItem . Ginbutang ni Gridzy ini nga klase hin awtomatiko ha ngatanan nga direkta nga mga anak han panguna nga elemento han surudlan. So, pwede niyo gamiton ini nga klase pag-istilo han mga butang han iyo galeriya.

Hunahunaa an Importante nga mga Butang .

An mga sulod han butang kinahanglan bug-os nga nabaton. Hunahunaa nga sigurado nga magbabag-o an kadaku han elemento. Gamita an mga kantidad han porsyento imbes nga an mga kantidad han piksel. Ngan kitaa an kapilian han layout han Gridzy autoFontSize , nga nagbubugkos han kadako han letra ngadto han kadako han kahon han butang.
An tagsa nga butang sadang magkaada maopay nga kahulogan nga ratio han bahin. An ratio han aspeto han butang diri gud magbabag-o ngan ginkikinahanglan ito ha pagkuwenta han grid. Salit kun an usa nga butang diri awtomatiko nga mayda maupay nga kahulogan nga ratio han aspeto, mano-mano nga ighatag ini hin kahulogan (pananglitan pinaagi han css).

Ha pipira nga mga kaso, bangin mas masayon an pag-istilo han sulod han mga butang antes magtikang hi Gridzy. Kuhaa la hin madaliay an klase gridzy o an file han javascript nga Gridzy para hini.

Amo na adto! Amo la iton an imo kinahanglan para makahimo hin imo kalugaringon nga panit. Kadam-an han mga gin-unabi nga mga panit diri nagamit hin labaw pa hini.

Pero pwede pa kun karuyag niyo ...

Mga Abanse nga Panit

An Gridzy nagamit hin mas damo nga klase hin CSS kaysa han gridzyItem la . Kadam-an hini in awtomatiko nga ma-set ngan pwede mo ini gamiton para han pag-istilo liwat.

Mga Klase han Panguna nga Surudlan

Ngaran han Klase	Paghulagway
`gridzy` nga mano-mano nga ibutang .	Awtomatiko nga namimiling hi Gridzy hin mga elemento nga mayda hini nga klase ngan gin-iinisyal ini.
`gridzyAnimated`	Awtomatiko nga igbubutang kun `true` an kapilian `animate` . Kun ini nga klase in mano-mano nga ginbutang, an kapilian nga `animate` awtomatiko nga magigin `true` liwat (gawas kun ini in klaro nga ginbutang ha `false` ).

Mga Klase han Butang

Ngaran han Klase	Paghulagway
`gridzyItem`	Ig-ibutang ha gilayon nga pagtikang han butang han proseso han pagtikang. Diri gud kukuhaon.
`gridzyItemInitializing`	Ig-ibutang ha gilayon nga pagtikang han butang han proseso han pagtikang. Mababalyoan hin `gridzyItemReady` ha gilayon nga bug-os nga natikangan an butang. Karuyag sidngon diri nga an mga ladawan bug-os na nga kargado (kitaa `gridzyItemLoading` ), kundi an butang andam na nga makita.
`gridzyItemReady`	Magliliwan `gridzyItemInitializing` ha gilayon nga an butang bug-os nga natikangan. Diri gud kukuhaon. Karuyag sidngon diri nga an mga ladawan bug-os nga kargado (kitaa `gridzyItemComplete` ), kundi an butang andam na nga makita.
`gridzyItemLoading`	Ig-ibutang ha gilayon nga pagtikang han butang han proseso han pagtikang. Maliliwanan hin `gridzyItemComplete` ha gilayon nga an mga sulod nga mga ladawan (kasagaran usa la) in bug-os na nga kargado.
`gridzyItemComplete`	Magsasaliwan `gridzyItemLoading` ha gilayon nga an mga sulod nga imahe (kasagaran usa la) in hul-os na nga kargado. Diri gud kukuhaon.
`gridzyItemInitialToVisible`	Ig-set ha gilayon nga pagtikang han butang nga makita ha siyahan nga higayon. Kukuhaon ha oras nga hul-os na nga makita an butang.
`gridzyItemVisible`	Ig-set ha gilayon nga bug-os na nga makita an butang. Kukuhaon ha oras nga magtikang na mawara an butang.
`gridzyItemVisibleToHidden`	Ig-set ha gilayon nga magtikang na mawara an butang. Kukuhaon ha oras nga bug-os na nga natago an butang.
`gridzyItemHidden`	Ig-set ha gilayon nga bug-os na nga natago an butang. Kukuhaon ha oras nga magtikang na gumawas an butang.
`gridzyItemHiddenToVisible`	Igbubutang ha gilayon nga pagtikang han butang nga magpakita (gawas la han pagpakita ha syahan nga higayon – kitaa an klase `gridzyItemInitialToVisible` ). Kukuhaon ha oras nga hul-os na nga makita an butang.
`gridzyItemVisibleToVisible`	Ig-set ha gilayon nga may-ada ha grid nga nagbag-o, kondi an butang mismo amo ngan magpabilin nga nakikita. Tatanggalon ha oras nga matapos na an animasyon han pagbag-o.

Ha kasagaran nga tigaman han proseso ngan an mga animasyon para han nagpapakita ngan nawawara nga mga ladawan in gintagan hin daan han Gridzy nga panguna nga CSS nga file.

Pinaagi hini nga mga gin-unabi nga mga klase han CSS mahimo ka mag-istilo han imo kalugaringon nga proseso nga tigaman ngan mga animasyon. Maisog pagkita ha Gridzy nga panguna nga CSS nga file, basi masabtan kon ano an imo kinahanglan ig-over. Waray kahadlok, an ngatanan dokumentado hin maupay didto.

Pag-optimal han Pagkarga

Kun damo an imo gagamiton nga mga imahe, pwede nga maupay nga ideya nga buligan hi Gridzy nga mas madagmit an paghimo han grid.

Pugngi an Paglukso han mga Imahen .

Kinahanglan gud ni Gridzy an ratio han aspeto han ngatanan nga mga imahe basi makalkulo an grid. Ini nga kamatuoran nagriresulta hin paglukso nga mga elemento kon an iba nga mga imahen andam ngan an iba diri. Kon mas damu an mga ladawan, mas nakakaaringit ini nga epekto.

Para malikyan ini nga batasan, ibutang la an mga kalidad width ngan height para han ngatanan nga mga elemento img . Importante nga ibutang an tama nga mga kantidad para han kada tagsa nga ladawan, kay kun diri, mababaliko an mga ladawan. An tama nga mga kantidad amo an orihinal nga kahaluag ngan kahitaas han tagsa nga imahe:

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

Katapos hito hi Gridzy makakakuwenta dayon han grid nga diri na kinahanglan mahibaro han aktuwal nga mga kadaku han mga imahe.

Tamad nga Pagkarga

Para maka-load la hin mga ladawan nga aada ha nakikita nga viewport, sunda la ini nga mga pitad:

Isulod an mga kalidad width ngan height sugad han iginsaysay ha igbaw (siguraduha nga gamiton an tama nga mga kantidad)
Liwani an ngatanan nga mga kalidad src hin data-gridzylazysrc sugad han iginpapakita ha ubos (kun mayda ka mga kalidad srcset sugad man, liwani ini hin 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>

Kahuman hini nga mga pitad an mga imahe in mag-load ha oras nga harani na o ha sakob han viewport.

Timailhan han Proseso

An tigaman han proseso amo an gutiay nga animado nga icon nga nagpapakita samtang nagkakarga an imahe. Kon gagamiton mo an mga kapsyon & mga panit , an proseso nga tigaman magpapakita hin awtomatiko. Kay kon diri, kinahanglan mo hin pipira nga mga pagbag-o:

Ibutang an kada img nga elemento ngadto hin div nga elemento .
(o ngadto hin bisan ano nga lain nga elemento – kitaa an semantiko nga HTML para hin dugang)
Idugang an klase gridzyImage ha kada img nga elemento .

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

Kahuman hito sadang mo makita an mga tigaman han proseso kon an mga imahe nagkikinahanglan hin panahon ha pagkarga.

Mga pagsala

Medyo simple pero gamhanan an mga pagsala ha Gridzy. Bisan ano nga klase hin filter an imo kinahanglan, daku gud an posibilidad nga masasabtan ito. An imo la kinahanglan amo an, gutiay nga CSS ngan pipira nga mga elemento han porma han HTML ...

Adi an usa nga ehemplo nga nagios:

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

Tukuron naton Ini hin Lakang-lakang

1. Una kinahanglan naton an kasagaran nga HTML nga istraktura han Gridzy ngan ibutang an mga ngaran han klase para han ngatanan nga mga butang han galeriya basi masala naton ito katapos .

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

Hini nga ehemplo usa la nga klase an aton ginagamit para han kada elemento. Pero pwede ka liwat magbutang hin damo nga klase para hin usa nga elemento, kun iton nga elemento kinahanglan mabilngan pinaagi hin damo nga mga pagsala.

2. Katapos, nagdudugang kita hin pipira nga mga buton nga pinaagi hito mahimo naton bag-uhon an mga pagsala katapos .

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

Imbes han mga butones, pwede ka liwat gumamit hin iba nga mga elemento han porma sugad han mga kahon hin tsek, mga butones han radyo, mga pagpili hin mga uma ngan iba pa.

Sugad han imo makikita, an mga kantidad han mga buton amo an kasagaran nga mga parapili han CSS. Pagtapos namon, an pag-klik ha sugad nga buton magpapakita han mga ladawan nga katugbang hito nga CSS nga parapili. Ha teknikal nga paagi ini in nagbubutang la han kapilian filter hini nga kantidad.

Mahimo ka liwat gumamit hin mas komplikado nga mga parapili. Pananglitan :not(.animals) magtrabaho liwat, sugad man an .animals.people ngan .animals, .people .

3. Ha katapusan, gin-encapsulate naton an mga buton ha usa nga surudlan div ngan ginbubugkos ito ha galeriya han Gridzy, pinaagi han pagbutang han filterControls nga kapilian:

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

Sugad han iyo makikita, nagamit liwat kami hin CSS nga pinili para han filterControls nga kapilian. An div nga surudlan nga mayda id nga kalidad nagseserbi la nga magin mas masayon an pagpili han mga buton pinaagi hito nga CSS nga parapili.

Amo na adto!

Kun karuyag mo hin JavaScript nga solusyon, kitaa an API .

API

Bisan kun mayda kalugaringon nga API an Gridzy, kadam-an nga mga butang in mahihimo nga waray ini, pinaagi la hin pagmaniobra han DOM. Mapapapansin ini ni Gridzy ngan ig-aayos an grid. Pero mayda liwat gamhanan hinduro nga API ...

Pagmaniobra han DOM .

Para han ngatanan nga mga pagmaniobra han Modelo han Butang han Dokumento (DOM) kinahanglan anay naton an elemento han surudlan:

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

Dugangi hin mga ladawan

Importante nga bug-os nga tukuron ngan pun-on an bag-o nga bata nga elemento antes mo ini igdugang ha elemento han surudlan. Kun diri diri makikita ni Gridzy an tama 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 an mga Ladawan

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

Bag-oha an mga Kapilian

// 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 mahitungod han pagmaniobra han DOM makikita mo ha mga dokumento han web han MDN . Mayda liwat Pasiuna han DOM nga makukuha.

Tag-iya nga API

Para magamit an API, kinahanglan anay naton an pananglitan han Gridzy, nga nahigot ha elemento han surudlan han Gridzy:

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

Kuhaa an Kapilian

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

Kuhaa an Tanan nga Kapilian

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

Ibutang an mga Kapilian

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

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

Pagbutang hin Pagsala

An pag-aplay hin pagsala amo la an pagbutang han kapilian filter nga pwede magin bisan ano nga balido nga CSS nga magpili:

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

Dugangi hin mga Buhat han Pagtawag

WARAY na gamit tikang han bersyon 2.4.0.
Gamita lugod an moderno ngan mas mabag-o nga mga Panhitabo . Kitaa an sunod nga seksyon para han mga detalye.

~~An Gridzy.js 2 nasuporta hin pipira nga mga kapilian para han mga buruhaton han pagtawag. Pwede la ini igbutang pinaagi han tag-iya nga API, pero sugad la han iba nga mga kapilian:~~

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

	~~Paghulagway~~
~~`onBeforeOptionsChanged`~~	~~Pagtawag nga funksyon nga direkta nga gintatawag antes magbutang hin mga kapilian.~~
~~`onOptionsChanged`~~	~~Pagtawag nga funksyon nga gintatawag direkta katapos han pagbutang hin mga kapilian.~~
~~`onBeforeRender`~~	~~Pagtawag nga funksyon nga direkta nga gintatawag antes han paghubad.~~
~~`onRender`~~	~~Pagtawag nga funksyon nga direkta nga gintatawag katapos han paghubad.~~

Gamita an mga Panhitabo

tikang han bersyon 2.4.0.

Mahimo mo gamiton an mga panhitabo han Gridzy sugad gud han kasagaran nga mga panhitabo han 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.
});

An iba nga mga panhitabo in ginpapabuto ha elemento han surudlan han Gridzy ngan an iba nga mga panhitabo in ginpapabuto ha tagsa-tagsa nga mga elemento han butang ha sakob han elemento han surudlan.

Mga panhitabo nga ginpabuto ha Gridzy nga surudlan nga elemento:

	Paghulagway
`gridzyBeforeInit`	Mga kalayo antes han pagtikang han galeriya.
`gridzyInit`	Mga kalayo katapos han pagtikang han galeriya.
`gridzyBeforeOptionsChanged`	Mga kalayo antes magbutang hin mga kapilian.
`gridzyOptionsChanged`	Mga kalayo katapos han pagbutang han mga kapilian.
`gridzyBeforeRender`	Mga kalayo antes maghatag.
`gridzyRender`	Mga kalayo katapos han paghubad.

Kun mayda niyo mawara nga mga panhitabo dinhi, alayon pagpadara hin hangyo hin suporta .

event.target naghatag sa Gridzy surudlan nga elemento.
event.detail.instance naghahatag han Gridzy nga pananglitan.

Mga panhitabo nga ginpabuto ha mga elemento nga butang:

	Paghulagway
`gridzyItemBeforeInit`	Mga kalayo antes han pagtikang han butang.
`gridzyItemInit`	Mga kalayo katapos han pagtikang han butang.
`gridzyItemLoading`	Naglalaga kon magtikang na an pagkarga han butang.
`gridzyItemReady`	Naglalaga kun andam na an butang para han pagkalkulo han grid. Salit hinbabaroan an ratio han bahin, kondi bangin nagkakarga pa an ladawan.
`gridzyItemComplete`	Naglalaga kon an imahe han butang bug-os na nga kargado.

Kun mayda niyo mawara nga mga panhitabo dinhi, alayon pagpadara hin hangyo hin suporta .

event.target naghatag han tagsa-tagsa nga butang nga elemento.
event.detail.instance naghahatag han Gridzy nga pananglitan.

API – Pankalibutan

Mayda pipira nga mga buruhaton nga bulag ha mga instansya han Gridzy. Salit diri naton kinahanglan makakuha hin instansya antes.

Kuhaa an Kasagaran nga Kapilian

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

Kuhaa an Ngatanan nga Kapilian

// 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 an Kasagaran nga mga Kapilian .

Diri ini nagbubutang han mga kapilian han ngatanan nga mga gintikangan na nga mga panhitabo han Gridzy, kundi naghahatag hin kahulogan han basihanan para hin bag-o nga mga panhitabo. Bisan pa, kun an usa nga kapilian hin naeksister nga instansya in ig-reset pinaagi han kantidad null , gagamiton hini an bag-o nga kasagaran nga kantidad.

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

Mahimo mo ini gamiton ha pagbutang hin mga kapilian ha bug-os nga kalibutan, kun imo ini tawagon ugsa andam an DOM. Salit diri mo na unta kinahanglan magbutang hin mga opsyon sugad nga mga kalidad.

Mga awtomatismo

Basta nga aktibo an ngatanan nga mga awtomatismo han Gridzy.js 2, diri kinahanglan an mga pamaagi ha ubos. Pero an mga awtomatismo puyde maparong ha paggamit han Gridzy ha 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
});

An iba hini nga mga kapilian diri mahimo ibutang pinaagi han mga kalidad data-gridzy- o pinaagi han setOptions() , tungod han lohikal nga mga hinungdan:

	Kasagaran nga Bili	Paghulagway
`autoInitOnDomReady`	`true`	Nakikita an mga elemento nga mayda klase `gridzy` ha pagkarga han pakli ngan gintitikangan ini. Mahimo ibutang pinaagi `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Parabantay han Pagbag-o	`true`	Nakikita an mga bag-o nga elemento nga mayda klase `gridzy` ha gilayon nga ini in makita ha DOM ngan gintitikangan ini. (pananglitan ha paggamit hin mga pagbalhin han pakli) Mahimo ibutang pinaagi `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Parabantay han Pagbag-o	`true`	Nahibabaroan kun an mga bata nga elemento (mga ladawan) in gindugang o ginkuha, ngan awtomatiko nga nagbabag-o han grid. Mahimo ibutang pinaagi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Naghahatag hin kahulogan kun an mga kalidad `data-gridzy-` in kasagaran nga ginagamit o diri. Kun ini in `false` an mga kapilian in pwede la igbutang pinaagi han tag-iya nga API. Mahimo ibutang pinaagi sa `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Parabantay han Pagbag-o	`true`	Nakikita an mga pagbag-o han mga kinaiya `data-gridzy-` , ngan awtomatiko nga nagbabag-o han grid. Nakikita gihapon kon an klase `gridzyAnimated` igindugang o ginkuha ngan kon an mga pagbag-o han kalidad `style` nahitatabo. Kun `false` `useOptionAttributes` , nakikita la hini an mga pagbag-o han kalidad `style` . Mahimo ibutang pinaagi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Parabantay han Pagbag-o	`true`	Nakikita an mga pagbag-o han mga kalidad `class` han ngatanan nga mga elemento han bata (mga ladawan). May kalabutan mahitungod han mga pagsala. Mahimo ibutang pinaagi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Parabantay han Pagbag-o tikang han bersyon 2.5.0.	`true`	Nakikita an mga pagbag-o han `src` nga mga kinaiya han ngatanan nga mga imahe. May kalabutan kun ginagamit upod han React o kapareho nga mga librarya. Mahimo ibutang pinaagi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Pagbag-o han Kadako han Paraobserbar tikang han bersyon 2.6.0.	`true`	Nakikita an mga pagbag-o han kahaluag han elemento. May kalabutan mahitungod han mabinasulon nga disenyo. (Antes han bersyon 2.6.0 usa nga bintana nga pagbag-o han kadako han panhitabo nga mamarati an gin-gamit) Mahimo ibutang pinaagi `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Manwal nga Pagtikang .

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

Bungkaga an Pananglitan .

Gahi nga ginsiring, an kabaliktaran han pagtikang kan Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Manual nga ig-sync an Lista han Bata

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

Manu-mano nga mag-sync hin Usa nga Bata nga Elemento .

Kasagaran nga diri ginkikinahanglan, labot la ha talagsahon hinduro 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);

Manual nga Pag-sync han mga Kinaiya

Tigamni nga an paggamit han Opsyon useOptionAttributes kinahanglan true para hini.

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

Pwersa nga Paghubad

Kasagaran nga diri ginkikinahanglan, bisan kon an ngatanan nga awtomatismo ginpatay .

gridzyInstance.render();

Sakit han Word

Librarya han JavaScript

Serbisyo