Bersyon 2.x – Gridzy.Gallery

Ang website awtomatik nga gihubad. Kung adunay dili klaro, palihug tan-awa ang English nga dokumentasyon.

Batakang Paggamit

Pag-upload sa mga Gridzy nga mga file sa imong server ug idugang kini sa imong website (kasagaran sa ulohan nga seksyon):

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

Idugang ang HTML code (bisan asa sa seksyon sa 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>

Mao na! Kana usa ka fully functional nga pananglitan. Walay dugang nga pagsugod ang gikinahanglan.

Pag-configure

Ang pinakasayon nga paagi sa pag-configure sa Gridzy mao ang paggamit lang sa mga HTML attributes. Kinahanglan ra nimo nga i-prefix ang mga ngalan sa kapilian nga adunay data-gridzy- . Busa, aron itakda ang spaceBetween nga kapilian, 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	Deskripsyon
`animate`	`true`	Pagtino kung ang mga animation kinahanglan gamiton kung ang grid mausab (pananglitan, kung gibag-o ang gidak-on sa window sa browser o kung nagbutang usa ka filter).
`layout`	`justified`	Gihubit ang gigamit nga layout. Ang Gridzy.js 2 nagsuporta sa duha ka lain-laing mga layout `justified` ug `waterfall` . Ang matag usa kanila adunay kaugalingon nga dugang nga mga parameter nga kapilian, nga makit-an nimo sa ubos niini nga lamesa.
`filter`	`*`	Gitino kung unsang mga imahe ang kinahanglan ipakita. Ang bisan unsang CSS-selector mahimong gamiton isip bili dinhi. Kasagaran nga awtomatikong itakda pinaagi sa `filterControls` (tan-awa ang sunod nga kapilian). Tan-awa ang mga Filter
`filterControls`		Pagtino kung unsang mga elemento sa porma ang magamit sa pagsala sa mga imahe. Bisan unsa nga CSS selector, nga mopili sa HTML nga mga elemento sa porma, mahimong gamiton isip bili dinhi. Tan-awa ang mga Filter
`autoConsiderScrollBars`	`true`	Aron matagna ang magamit nga gilapdon kung ang mga scroll bar makita o mawala. Kanunay nga girekomenda nga ibilin kini nga `true` gawas kung kini nga automatismo hinungdan sa mga problema.

Justified Mga Opsyon sa Layout

	Default nga Bili	Deskripsyon
`autoFontSize`	`false`	Awtomatikong gi-update ang gidak-on sa font nga kabtangan sa matag kahon base sa orihinal nga gidak-on sa kahon. Pinaagi sa default ang gidak-on sa font nga kabtangan wala gitakda nga klaro.
`desiredHeight`	`190`	Gihubit ang gitinguha nga gitas-on sa mga laray sa elemento. Ang aktuwal nga gitas-on kwentahon depende sa magamit nga gilapdon ug sa mga elemento sa laray.
`hideOnMissingImage`	`true`	Gitago ang mga kahon nga adunay mga imahe nga dili makarga.
`spaceBetween`	`4`	Gihubit ang gilay-on tali sa mga elemento sa mga pixel.
`lastRowAlign` sukad sa bersyon 2.3.0	`justified`	Naghubit sa kinaiya sa kataposang laray. Ang gitugotan nga mga kantidad kay `left` , `center` , `right` ug `justified` .
`singleRowAlign` sukad sa bersyon 2.3.0	`justified`	Gihubit ang pamatasan kung adunay usa ra ka laray. Ang gitugotan nga mga kantidad kay `left` , `center` , `right` ug `justified` .
~~`fillLastRow`~~ ~~sukad sa bersyon 2.1.0~~	~~`true`~~	GITANGTANG sukad sa bersyon 2.4.0 (DEPRECATED sukad sa bersyon 2.3.0 ) Naghan-ay sa mga hulagway aron ang kataposang laray kanunay nga mapuno. Kung nagplano ka nga idugang ang mga imahe sa dinamikong paagi, mahimo’g maayo nga ideya nga i-deactivate kini. Wala’y epekto sa usa ka laray (tan-awa `fillSingleRow` ).
`fillSingleRow` sukad sa bersyon 2.1.0	~~`true`~~	GITANGTANG sukad sa bersyon 2.4.0 (DEPRECATED sukad sa bersyon 2.3.0 ) Kon adunay usa lamang ka laray, kini maghan-ay sa mga hulagway aron ang laray kanunay nga mapuno. Kung mahitabo nga adunay usa o duha ka mga imahe sa gallery, mahimo’g maayo nga ideya nga i-deactivate kini.

Waterfall Mga Opsyon sa Layout

	Default nga Bili	Deskripsyon
`autoFontSize`	`false`	Awtomatikong gi-update ang gidak-on sa font nga kabtangan sa matag kahon base sa orihinal nga gidak-on sa kahon. Pinaagi sa default ang gidak-on sa font nga kabtangan wala gitakda nga klaro.
`desiredWidth`	`250`	Gihubit ang gitinguha nga gilapdon sa mga kolum. Ang aktuwal nga gilapdon makalkula depende sa magamit nga gilapdon ug ang gidaghanon sa mga kolum.
`hideOnMissingImage`	`true`	Gitago ang mga kahon nga adunay mga imahe nga dili makarga.
`horizontalOrder`	`false`	Gihubit nga ang mga elemento gibutang sa estrikto nga usa ka elemento sa matag kolum gikan sa wala ngadto sa tuo, unya magsugod pag-usab sa labing wala nga kolum nga independente kung diin ang kolum mas daghang lugar. Sa kasagaran ang mga elemento kanunay ibutang sa kolum nga adunay pinakagamay nga gitas-on.
`spaceBetween`	`4`	Gihubit ang gilay-on tali sa mga elemento sa mga pixel.
`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`.

Dugang nga Advanced nga mga Opsyon

Alang sa mas abante nga mga kapilian, tan-awa ang API .

Semantiko nga HTML

Ang pinakasimple nga istruktura sa HTML sa Gridzy mao kini:

<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, ang Gridzy dali kaayo ug mahimo nimong gamiton ang hapit bisan unsang uban pang istruktura sa HTML. Adunay pipila lamang ka mga punto nga ikonsiderar:

Ang matag bata sa elemento sa sudlanan nagrepresentar sa usa ka butang sa grid.
Ang elemento sa sudlanan ug ang mga anak niini mahimong bisan unsang tipo sa tag, sama sa ul ug li (ikonsiderar lang ang pag-reset sa mga default sa browser).
Kung ang usa ka elemento img dili direkta nga bata mismo, kinahanglan niini ang klase gridzyImage .

Mao nga kini usa usab ka nagtrabaho nga istruktura sa 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 kung gusto nimong idugang ang mga kapsyon, kinahanglan nimo ang usa ka advanced nga istruktura sa HTML. Aron makakat-on pa bahin niini, tan-awa ang Captions & Skins .

Mga Caption ug Panit

Kung gusto nimong idugang ang mga kapsyon sa imong gallery, kinahanglan nimo nga ipasabut ang hitsura. Busa, ang pipila nga gitakda nang daan nga mga panit anaa. Ang matag panit naglangkob sa usa ka CSS file. Kinahanglan nimong idugang kini nga file dugang sa mga nag-unang Gridzy nga mga file (kasagaran sa seksyon sa ulo):

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

Dugang pa, kinahanglan nimo ang usa ka advanced nga istruktura sa 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>

Kung nahibulong ka bahin sa istruktura sa HTML, tan-awa ang Semantic HTML .

Alang sa kapsyon mahimo nimong gamiton ang bisan unsang klase sa tag, siguruha lang nga kini adunay klase nga gridzyCaption . Ang img elemento nagkinahanglan sa klase gridzyImage .

Ang pananglitan sa ibabaw nagpakita kanimo sa panit gridzySkinClassic . Aron makagamit ug lain, ilisan lang ang ngalan sa panit sa usa niini:

Apil nga mga Panit

	Anaa nga mga Klase
gridzySkinBlank usa ka maayo nga punto sa pagsugod sa paghimo og kaugalingong panit live nga preview	`gridzySkinBlank`
gridzySkinClassic live nga preview	`gridzySkinClassic` `gridzySkinClassicLight`(DEPRECATED sukad sa bersyon 2.6.0)
gridzySkinFullOverlay live nga preview	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(DEPRECATED sukad sa bersyon 2.6.0)
gridzySkinLift live nga preview	`gridzySkinLift` `gridzySkinLiftLight`(DEPRECATED sukad sa bersyon 2.6.0)
gridzySkinMagnifier Wala gilakip ang pag-andar sa pag-zoom live nga preview	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(DEPRECATED sukad sa bersyon 2.6.0)

Ang tanan nga mga panit sa ibabaw nagkinahanglan lamang ug CSS file, apan adunay dugang nga mga panit nga nagkinahanglan usab ug JavaScript file:

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

	Anaa nga mga Klase
gridzySkinBlur wala magtrabaho sa IE live nga preview	`gridzySkinBlur` `gridzySkinBlurLight`(DEPRECATED sukad sa bersyon 2.6.0)
gridzySkinCard live nga preview	`gridzySkinCard` `gridzySkinCardLight`(DEPRECATED sukad sa bersyon 2.6.0)

Mga Opsyon sa Panit

Sukad nga bersyon 2.6.0 adunay mga Opsyon aron ma-configure ang mga built-in nga panit. Depende sa piho nga panit mahimo nimong itakda ang kolor sa background, kolor sa teksto ug anino sa teksto. Kinahanglan lang nimo nga gamiton ang CSS custom properties sama sa imong makita 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>

Tan-awa ang gisuportahan nga mga variable ug default nga kantidad alang sa matag panit dinhi:

gridzySkinClassic

Variable	Default nga Bili	Impormasyon
`--background`	`rgba(0, 0, 0, .7)`	nagtugot sa bisan unsang CSS background value
`--color`	`rgb(255, 255, 255)`	nagtugot sa bisan unsang CSS color value
`--text-shadow`	`none`	nagtugot sa bisan unsang CSS text-shadow value

gridzySkinFullOverlay

Variable	Default nga Bili	Impormasyon
`--background`	`rgba(0, 0, 0, .7)`	nagtugot sa bisan unsang CSS background value
`--color`	`rgb(255, 255, 255)`	nagtugot sa bisan unsang CSS color value
`--text-shadow`	`none`	nagtugot sa bisan unsang CSS text-shadow value

gridzySkinLift

Variable	Default nga Bili	Impormasyon
`--background`	`rgba(0, 0, 0, .7)`	nagtugot sa bisan unsang CSS background value
`--color`	`rgb(255, 255, 255)`	nagtugot sa bisan unsang CSS color value
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	nagtugot sa bisan unsang CSS text-shadow value

gridzySkinMagnifier

Variable	Default nga Bili	Impormasyon
`--background`	`rgba(0, 0, 0, .7)`	nagtugot sa bisan unsang CSS background value
`--color`	`rgb(255, 255, 255)`	nagtugot sa bisan unsang CSS color value

Kini nga panit dili mosuporta --text-shadow

gridzySkinBlur

Variable	Default nga Bili	Impormasyon
`--background`	`rgba(0, 0, 0, .7)`	nagtugot sa bisan unsang CSS background value
`--color`	`rgb(255, 255, 255)`	nagtugot sa bisan unsang CSS color value
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	nagtugot sa bisan unsang CSS text-shadow value

gridzySkinCard

Variable	Default nga Bili	Impormasyon
`--background`	`rgba(0, 0, 0, 1)`	nagtugot sa bisan unsang CSS background value
`--color`	`rgb(255, 255, 255)`	nagtugot sa bisan unsang CSS color value
`--text-shadow`	`none`	nagtugot sa bisan unsang CSS text-shadow value

Ang tanan nga gitakda nang daan nga mga panit nagsuporta lamang sa yano nga mga kapsyon sa teksto. Makahimo ka sa imong kaugalingon ug labi ka komplikado nga mga panit. Palihug tan-awa ang Style Gridzy .

Estilo nga Gridzy

Kung walay predefined nga panit nga mohaum sa imong mga panginahanglan, mahimo nimong i-istilo ang imong kaugalingon.

Ang pinakasayon nga paagi mao ang una nga pagkopya sa usa ka kasamtangan nga panit ug ipahiangay kini sa imong kaugalingong mga panginahanglan. Ang predefined skin gridzySkinBlank kasagarang maghatag ug maayong pundasyon ingon man usa ka maayong 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 imong makita ang mga klase gridzySkinBlank , gridzyImage ug gridzyCaption . Si Gridzy mismo wala magkinahanglan niini nga mga klase. Gigamit ra sila sa pag-istilo ug aron mahimo nimong tangtangon o ilisan ang ngalan kung gusto nimo.

Dugang pa imong makita ang CSS class gridzyItem . Gitakda ni Gridzy kini nga klase nga awtomatiko sa tanan nga direktang mga bata sa nag-unang elemento sa sudlanan. Busa, mahimo nimong gamiton kini nga klase sa pag-istilo sa mga butang sa imong gallery.

Hunahuna ang Importante nga mga Butang

Ang sulod sa butang kinahanglan nga hingpit nga mosanong. Hunahunaa nga ang gidak-on sa elemento siguradong mausab. Gamita ang mga kantidad sa porsyento imbes nga mga kantidad sa pixel. Ug tan-awa ang Gridzy layout option autoFontSize , nga nagbugkos sa font-size ngadto sa item box size.
Ang matag aytem kinahanglan adunay usa ka maayo nga gipasabut nga aspeto nga ratio. Ang aspect ratio sa butang dili na mausab ug gikinahanglan aron makalkulo ang grid. Mao nga kung ang usa ka butang dili awtomatik nga adunay usa ka maayo nga gipasabut nga aspect ratio, i-predefine kini sa mano-mano (pananglitan pinaagi sa css).

Sa pipila ka mga kaso, mahimong mas sayon ang pag-istilo sa sulod sa mga butang sa dili pa magsugod ang Gridzy. Kuhaa lang ang klase gridzy o ang Gridzy javascript file temporaryo alang niini.

Mao na! Mao ra kana ang kinahanglan nimo aron matukod ang imong kaugalingon nga panit. Kadaghanan sa gitakda nang daan nga mga panit wala mogamit labi pa niini.

Apan mahimo nga daghan pa kung gusto nimo…

Advanced nga mga Panit

Gigamit ni Gridzy ang daghang mga klase sa CSS kaysa gridzyItem lamang. Kadaghanan niini awtomatiko nga itakda ug mahimo usab nimo kini gamiton alang sa pag-istilo.

Panguna nga mga Klase sa Kontainer

Ngalan sa Klase	Deskripsyon
`gridzy` sa pag-set sa mano-mano	Awtomatikong nakit-an ni Gridzy ang mga elemento nga adunay kini nga klase ug gisugdan kini.
`gridzyAnimated`	Awtomatikong i-set kung ang opsyon nga `animate` `true` . Kung kini nga klase gitakda nga mano-mano, ang kapilian nga `animate` awtomatik nga mahimong `true` usab (gawas kung kini klaro nga gibutang sa `false` ).

Mga Klase sa Item

Ngalan sa Klase	Deskripsyon
`gridzyItem`	Itakda sa diha nga ang butang magsugod sa proseso sa pagsugod. Dili gyud matangtang.
`gridzyItemInitializing`	Itakda sa diha nga ang butang magsugod sa proseso sa pagsugod. Mapulihan sa `gridzyItemReady` sa diha nga ang butang hingpit nga nasugdan. Dili nagpasabot nga ang mga hulagway bug-os nga gikarga (tan-awa `gridzyItemLoading` ), apan ang butang andam na nga makita.
`gridzyItemReady`	Ilisan `gridzyItemInitializing` sa diha nga ang butang hingpit nga nasugdan. Dili gyud matangtang. Dili nagpasabot nga ang mga hulagway bug-os nga gikarga (tan-awa `gridzyItemComplete` ), apan ang butang andam na nga makita.
`gridzyItemLoading`	Itakda sa diha nga ang butang magsugod sa proseso sa pagsugod. Mapulihan sa `gridzyItemComplete` sa diha nga ang mga sulud nga mga imahe (kasagaran usa ra) hingpit nga nakarga.
`gridzyItemComplete`	Ilisan `gridzyItemLoading` sa diha nga ang mga sulod nga mga hulagway (kasagaran usa ra) bug-os nga makarga. Dili gyud matangtang.
`gridzyItemInitialToVisible`	Itakda sa diha nga ang butang magsugod sa pagpakita sa unang higayon. Matangtang sa diha nga ang butang hingpit nga makita.
`gridzyItemVisible`	Itakda sa diha nga ang butang hingpit nga makita. Matangtang sa diha nga ang butang magsugod sa pagkahanaw.
`gridzyItemVisibleToHidden`	Itakda sa diha nga ang butang magsugod sa pagkahanaw. Matangtang sa diha nga ang butang hingpit nga natago.
`gridzyItemHidden`	Itakda sa diha nga ang butang hingpit nga natago. Matangtang sa diha nga ang butang magsugod sa pagpakita.
`gridzyItemHiddenToVisible`	Itakda sa diha nga ang butang magsugod sa pagpakita (gawas sa pagpakita sa unang higayon – tan-awa ang klase `gridzyItemInitialToVisible` ). Matangtang sa diha nga ang butang hingpit nga makita.
`gridzyItemVisibleToVisible`	Itakda sa diha nga adunay usa ka butang sa grid nga nausab, apan ang butang mismo mao ug magpabilin nga makita. Matangtang dayon kung mahuman ang pagbag-o nga animation.

Pinaagi sa default ang indikasyon sa proseso ug ang mga animation alang sa pagpakita ug pagkawala sa mga imahe gitakda nang daan sa Gridzy main CSS file.

Uban niining gihisgutan sa ibabaw nga mga klase sa CSS mahimo nimong i-istilo ang imong kaugalingon nga timailhan sa proseso ug mga animation. Pangahas sa pagtan-aw sa Gridzy main CSS file, aron masabtan kung unsa ang kinahanglan nimong i-override. Walay kahadlok, ang tanan maayo nga dokumentado didto.

I-optimize ang Pagkarga

Kung mogamit ka ug daghang mga imahe, mahimo’g maayo nga ideya nga tabangan si Gridzy sa paghimo sa grid nga mas paspas.

Paglikay sa Paglukso sa mga Imahen

Kinahanglan gyud ni Gridzy ang aspect ratio sa tanan nga mga imahe aron makalkulo ang grid. Kini nga kamatuoran moresulta sa paglukso sa mga elemento kung ang pipila ka mga imahe andam ug ang uban dili. Kon mas daghan ang mga hulagway, mas makahasol ang mahimong epekto niini.

Aron mapugngan kini nga kinaiya, ibutang lang width ug height nga mga hiyas alang sa tanang elemento img . Importante nga itakda ang husto nga mga bili alang sa matag indibidwal nga hulagway, kung dili ang mga hulagway mahimong matuis. Ang husto nga mga kantidad mao ang orihinal nga gilapdon ug gitas-on sa matag 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>

Pagkahuman mahimo’g makalkula ni Gridzy ang grid dayon nga dili kinahanglan mahibal-an ang tinuud nga gidak-on sa mga imahe.

Lay Loading

Aron ma-load lang ang mga imahe nga naa sa makita nga viewport, sunda lang kini nga mga lakang:

Isulod width ug height nga mga hiyas sama sa gihulagway sa ibabaw (siguruha nga gamiton ang husto nga mga kantidad)
Ilisan ang tanang src attributes sa data-gridzylazysrc sama sa gipakita sa ubos (kung aduna kay srcset attributes usab, ilisan kini ug 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>

Pagkahuman niini nga mga lakang ang mga imahe makarga sa diha nga kini duol o sa sulod sa viewport.

Timailhan sa Proseso

Ang timailhan sa proseso mao ang gamay nga animated nga icon nga makita samtang ang imahe nagkarga. Kung mogamit ka mga kapsyon ug mga panit , ang timailhan sa proseso awtomatikong ipakita. Kung dili kinahanglan nimo ang pipila nga mga pagbag-o:

Ibutang ang matag elemento img sa usa ka div nga elemento
(o sa bisan unsa nga elemento - tan-awa ang semantic HTML alang sa dugang)
Idugang ang klase gridzyImage sa matag 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>

Pagkahuman niana kinahanglan nimo nga makita ang mga indikasyon sa proseso kung ang mga imahe magdugay sa pagkarga.

Mga filter

Ang mga filter sa Gridzy medyo yano apan kusgan. Bisan unsa nga matang sa filter ang imong gikinahanglan, kini lagmit nga kini matuman. Ang imong gikinahanglan mao, usa ka gamay nga CSS ug pipila ka mga elemento sa porma sa HTML ...

Ania ang usa ka praktikal nga pananglitan:

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

Himoon Nato Kini sa Lakang sa Lakang

1. Una kinahanglan nato ang naandan nga HTML nga istruktura sa Gridzy ug itakda ang mga ngalan sa klase para sa tanang mga butang sa gallery aron masala nato kini pagkahuman.

<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 kini nga pananglitan naggamit ra kami usa ka klase alang sa matag elemento. Apan mahimo ka usab magbutang daghang mga klase alang sa usa ka elemento, kung kana nga elemento kinahanglan nga makit-an pinaagi sa daghang mga pagsala.

2. Unya kita makadugang sa pipila ka mga buton pinaagi sa nga kita sa pag-usab sa mga pagsala unya

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

Imbis sa mga buton, mahimo usab nimo gamiton ang ubang mga elemento sa porma sama sa mga checkbox, radio button, pagpili sa mga natad ug uban pa.

Sama sa imong nakita, ang mga kantidad sa mga buton sagad nga mga tigpili sa CSS. Sa diha nga kami mahuman, ang usa ka pag-klik sa ingon nga buton magpakita sa mga imahe nga mohaum sa CSS selector. Sa teknikal nga paagi kini yano nga nagtakda sa kapilian filter sa kini nga kantidad.

Mahimo usab nimo gamiton ang labi ka komplikado nga mga tigpili. Pananglitan :not(.animals) motrabaho usab, ingon man ang .animals.people ug .animals, .people .

3. Katapusan, among gi-encapsulate ang mga buton sa usa ka div container ug ihigot kini sa Gridzy gallery, pinaagi sa pag-set sa opsyon 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>

Sama sa imong nakita, naggamit usab kami usa ka tigpili sa CSS alang sa kapilian sa filterControls . Ang div nga sudlanan nga adunay id attribute nagsilbi lamang sa paghimo sa mga buton nga mas sayon sa pagpili pinaagi sa CSS selector.

Mao na!

Kung gusto nimo ang solusyon sa JavaScript, tan-awa ang API .

API

Bisan kung ang Gridzy adunay kaugalingon nga API, kadaghanan sa mga butang mahimo kung wala kini, pinaagi lamang sa pagmaniobra sa DOM. Makita kini ni Gridzy ug i-adjust ang grid. Apan adunay usab usa ka kusgan kaayo nga API…

Pagmaniobra sa DOM

Alang sa tanan nga mga manipulasyon sa Document Object Model (DOM) kinahanglan una namon ang sulud nga elemento:

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

Idugang ang mga Imahen

Importante nga hingpit nga matukod ug pun-on ang bag-ong elemento sa bata sa dili pa nimo kini idugang sa elemento sa sudlanan. Kung dili, dili makit-an ni Gridzy ang husto nga mga sukat.

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

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

Usba 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 bahin sa pagmaniobra sa DOM nga imong makit-an sa MDN web docs . Adunay usab usa ka Pasiuna sa DOM nga magamit.

Proprietary API

Aron magamit ang API, kinahanglan una namon ang pananglitan sa Gridzy, nga gihigot sa elemento sa sulud sa Gridzy:

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

Pagkuha og Opsyon

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

Kuhaa ang Tanan nga Opsyon

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

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

Ibutang ang Filter

Ang pag-apply sa usa ka filter mao lamang ang pagtakda sa opsyon filter nga mahimong bisan unsang 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'
});

Idugang ang Callback Function

GAWAS sukad sa bersyon 2.4.0
Gamita hinuon ang moderno ug mas flexible nga mga Hitabo . Tan-awa ang sunod nga seksyon para sa mga detalye.

~~Gridzy.js 2 nagsuporta sa pipila ka mga kapilian alang sa callback function. Mahimo lamang kini itakda pinaagi sa proprietary API, apan sama sa ubang 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.
  }
});

	~~Deskripsyon~~
~~`onBeforeOptionsChanged`~~	~~Callback function nga direkta nga gisangpit sa wala pa magbutang mga kapilian.~~
~~`onOptionsChanged`~~	~~Ang function sa callback nga direktang gisangpit pagkahuman sa mga kapilian sa pag-set.~~
~~`onBeforeRender`~~	~~Callback function nga direkta nga gisangpit sa wala pa i-render.~~
~~`onRender`~~	~~Ang function sa callback nga direktang gisangpit pagkahuman sa paghubad.~~

Gamita ang mga Hitabo

sukad sa bersyon 2.4.0

Mahimo nimong gamiton ang mga panghitabo sa Gridzy sama sa naandan nga mga panghitabo 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 ubang mga panghitabo gipabuto sa Gridzy nga sudlanan nga elemento ug ang uban nga mga panghitabo gipabuto sa indibidwal nga mga elemento sa butang sulod sa sudlanan nga elemento.

Mga panghitabo nga gipabuto sa Gridzy nga sulud nga elemento:

	Deskripsyon
`gridzyBeforeInit`	Mga sunog sa wala pa magsugod ang gallery.
`gridzyInit`	Mga sunog pagkahuman sa pagsugod sa gallery.
`gridzyBeforeOptionsChanged`	Pagdilaab sa dili pa magbutang mga kapilian.
`gridzyOptionsChanged`	Mga sunog pagkahuman sa mga kapilian sa pag-set.
`gridzyBeforeRender`	Sunog sa dili pa i-render.
`gridzyRender`	Mga sunog human sa rendering.

Kung gimingaw ka sa bisan unsang mga panghitabo dinhi, palihug ipadala ang usa ka hangyo sa suporta .

event.target naghatag sa Gridzy nga sudlanan nga elemento.
event.detail.instance naghatag sa Gridzy nga pananglitan.

Mga panghitabo nga gipabuto sa mga elemento sa item:

	Deskripsyon
`gridzyItemBeforeInit`	Nagdilaab sa wala pa magsugod ang butang.
`gridzyItemInit`	Mga sunog human sa pagsugod sa butang.
`gridzyItemLoading`	Nagdilaab kon ang butang magsugod sa pagkarga.
`gridzyItemReady`	Nagdilaab kung ang butang andam na alang sa pagkalkula sa grid. Mao nga nahibal-an ang aspeto nga ratio, apan ang imahe mahimo pa nga nag-load.
`gridzyItemComplete`	Nagdilaab kung ang imahe sa aytem puno na.

Kung gimingaw ka sa bisan unsang mga panghitabo dinhi, palihug ipadala ang usa ka hangyo sa suporta .

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

API - Tibuok kalibutan

Adunay pipila ka mga gimbuhaton nga independente sa mga higayon sa Gridzy. Mao nga dili na kita kinahanglan nga makakuha usa ka pananglitan kaniadto.

Kuhaa ang Default nga Opsyon

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

Kuhaa ang Tanan nga Default nga 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 kini magbutang sa mga kapilian sa tanan nga nasugdan na nga mga higayon sa Gridzy, apan gihubit ang sukaranan alang sa mga bag-ong higayon. Bisan pa, kung ang usa ka kapilian sa usa ka naglungtad nga higayon i-reset pinaagi sa kantidad nga null , kini mogamit sa bag-ong default nga kantidad.

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

Mahimo nimong gamiton kini aron magbutang mga kapilian sa tibuuk kalibutan, kung tawagan nimo kini sa wala pa andam ang DOM. Mao nga dili na nimo kinahanglan nga magbutang mga kapilian ingon mga hiyas.

Mga awtomatik

Hangtud nga ang tanan nga mga automatismo sa Gridzy.js 2 aktibo, wala’y kinahanglan alang sa mga pamaagi sa ubos. Apan ang mga automatismo mahimong i-off aron magamit ang 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 uban niini nga mga opsyon dili mabutang pinaagi sa data-gridzy- attributes o pinaagi sa setOptions() , tungod sa lohikal nga mga rason:

	Default nga Bili	Deskripsyon
`autoInitOnDomReady`	`true`	Nakita ang mga elemento nga adunay klase `gridzy` sa pagkarga sa panid ug gisugdan kini. Mabutang pinaagi sa `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	Namatikdan ang bag-ong mga elemento nga adunay klase `gridzy` sa diha nga kini makita sa DOM ug gisugdan kini. (pananglitan sa paggamit sa mga transisyon sa panid) Mabutang pinaagi sa `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Makita kung ang mga elemento sa bata (mga imahe) gidugang o gitangtang, ug awtomatiko nga gi-update ang grid. Mabutang pinaagi sa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Gihubit kung ang `data-gridzy-` attributes kasagarang gigamit o dili. Kung kini `false` nga mga kapilian mahimo ra itakda pinaagi sa proprietary API. Mapahimutang pinaagi sa `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	Nakamatikod sa mga pagbag-o sa `data-gridzy-` attributes, ug awtomatikong nag-update sa grid. Makita usab kung ang klase sa `gridzyAnimated` gidugang o gitangtang ug kung mahitabo ang mga pagbag-o sa kinaiya `style` . Kon `false` ang `useOptionAttributes` , kini makamatikod lamang sa mga kausaban sa hiyas `style` . Mabutang pinaagi sa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Nakita ang mga pagbag-o sa mga kinaiya `class` sa tanan nga mga elemento sa bata (mga imahe). May kalabotan sa mga pagsala. Mabutang pinaagi sa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver sukad sa bersyon 2.5.0	`true`	Namatikdan ang mga pagbag-o sa `src` nga mga hiyas sa tanan nga mga imahe. May kalabotan kung gigamit sa React o parehas nga mga librarya. Mabutang pinaagi sa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver sukad sa bersyon 2.6.0	`true`	Nakamatikod sa mga pagbag-o sa gilapdon sa elemento. Relevant bahin sa responsive nga disenyo. (Sa wala pa ang bersyon 2.6.0 usa ka window resize event listener gigamit) Mabutang pinaagi sa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Pagsugod sa Manwal

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

Gub-a ang Instance

Sa halos giingon, ang kaatbang sa pagsugod sa Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

I-sync ang Listahan sa Bata nga Manwal

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

I-sync ang usa ka Elemento sa Usa ka Bata nga Manwal

Kasagaran dili kinahanglan, gawas sa talagsaon 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 Katangian sa Manwal

Timan-i nga ang opsyon sa useOptionAttributes kinahanglan nga true alang niini.

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

Force Rendering

Kasagaran dili kinahanglan, bisan kung ang tanan nga mga automatismo gipalong

gridzyInstance.render();

WordPress Plugin

JavaScript Library

Serbisyo