Gridzy.Gallery

webIgbo

Ụdị 2.x

Atụgharịrị asụsụ webụsaịtị ahụ na-akpaghị aka. Ọ bụrụ na ihe edoghị anya, biko lelee akwụkwọ Bekee.

Isi ojiji

Bulite faịlụ Gridzy na sava gị wee tinye ha na webụsaịtị gị (na-abụkarị na ngalaba isi):

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

Tinye koodu HTML (ebe ọ bụla na ngalaba ahụ):

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

Ọ bụ ya! Nke ahụ bụ ihe atụ na-arụ ọrụ nke ọma. Ọnweghị mmalite mmalite ọzọ achọrọ.

Nhazi

Ụzọ kachasị mfe isi hazie Gridzy bụ, iji naanị njirimara HTML. Naanị ịchọrọ iji data-gridzy- . Yabụ, ka ịtọọ ohere spaceBetween nhọrọ, tinye naanị njirimara 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>

Nhọrọ isi

Uru ndabaraNkọwa
animatetrueNa-ekpebi ma a ga-eji animation mgbe grid gbanwere (dịka ọmụmaatụ, mgbe ị na-emegharị windo ihe nchọgharị ma ọ bụ mgbe ị na-edozi nzacha).
layoutjustifiedNa-akọwapụta okirikiri nhọrọ ukwuu. Gridzy.js 2 na-akwado nhazi abụọ dị iche iche justified na waterfall . Onye ọ bụla n'ime ha nwere oke nhọrọ nhọrọ nke ya, nke ị nwere ike ịhụ n'okpuru tebụl a.
filter*Na-ekpebi ihe onyonyo kwesịrị igosi. Enwere ike iji onye na-ahọrọ CSS ọ bụla dị ka uru ebe a. A na-ahazikarị ya na-akpaghị aka site na filterControls (lee nhọrọ ọzọ).
Lelee ihe nzacha
filterControlsNa-ekpebi ụdị ụdị ihe enwere ike iji nzacha onyonyo. Nhọrọ CSS ọ bụla, nke na-ahọrọ ụdị ụdị HTML, enwere ike iji dị ka uru ebe a.
Lelee ihe nzacha
autoConsiderScrollBarstrueKa ịkọ obosara dị ma ọ bụrụ na ogwe mpịakọta egosiputara ma ọ bụ pụọ. A na-atụ aro ka ịhapụ ya na true ọ gwụla ma akpaaka a na-akpata nsogbu.

Nhọrọ nhazi Justified

Uru ndabaraNkọwa
autoFontSizefalseNa-emelite akụrụngwa nha font nke igbe ọ bụla na-akpaghị aka dabere na nha igbe mbụ. Site na ndabara anaghị edobe ihe nha nha font nke ọma.
desiredHeight190Na-akọwa ịdị elu achọrọ nke ahịrị mmewere. A ga-agbakọ elu n'ezie dabere na obosara dị na ihe ndị dị n'ahịrị.
hideOnMissingImagetrueNa-ezochi igbe nwere onyonyo na-enweghị ike ibunye.
spaceBetween4Na-akọwapụta anya n'etiti ihe na pikselụ.
lastRowAlign
site na ụdị 2.3.0		justifiedNa-akọwapụta omume nke ahịrị ikpeazụ. Ụkpụrụ anabatara aka left , center , right na justified .
singleRowAlign
site na ụdị 2.3.0		justifiedNa-akọwapụta omume ma ọ bụrụ na enwere naanị otu ahịrị. Ụkpụrụ anabatara aka left , center , right na justified .
fillLastRow
site na ụdị 2.1.0		trueEwezugara kemgbe ụdị 2.4.0 (EKWESỊRỊ kemgbe ụdị 2.3.0 )
Na-ahazi ihe oyiyi ka ahịrị ikpeazụ na-ejupụta mgbe niile. Ọ bụrụ na ị na-eme atụmatụ itinye onyonyo n'ike n'ike, ọ nwere ike ịbụ ezigbo echiche gbanyụọ nke a.
Ọ naghị enwe mmetụta na otu ahịrị (lee fillSingleRow ).
fillSingleRow
site na ụdị 2.1.0		trueEwezugara kemgbe ụdị 2.4.0 (EKWESỊRỊ kemgbe ụdị 2.3.0 )
Ọ bụrụ na e nwere naanị otu ahịrị, ọ na-ahazi ihe oyiyi nke mere na ahịrị ahụ na-ejupụta mgbe niile. Ọ bụrụ na ọ nwere ike ime na ị nwere naanị otu foto ma ọ bụ abụọ na gallery, ọ nwere ike ịbụ ezigbo echiche ịkwụsị nke a.

Waterfall Nhọrọ okirikiri nhọrọ ukwuu

Uru ndabaraNkọwa
autoFontSizefalseNa-emelite akụrụngwa nha font nke igbe ọ bụla na-akpaghị aka dabere na nha igbe mbụ. Site na ndabara anaghị edobe ihe nha nha font nke ọma.
desiredWidth250Na-akọwa obosara nke ogidi ndị achọrọ. A ga-agbakọ obosara n'ezie dabere na obosara dị na ọnụ ọgụgụ ogidi.
hideOnMissingImagetrueNa-ezochi igbe nwere onyonyo na-enweghị ike ibunye.
horizontalOrderfalseNa-akọwa na a na-edobe ihe ndị ahụ nke ọma n'otu akụkụ na kọlụm ọ bụla site n'aka ekpe gaa n'aka nri, wee malite ọzọ na kọlụm kachasị aka ekpe n'adabereghị na kọlụm dị karịa. Site na ndabara, a ga-edobe ihe ndị ahụ mgbe niile na kọlụm nwere obere ịdị elu.
spaceBetween4Na-akọwapụta anya n'etiti ihe na pikselụ.
singleRowAlign
since version 2.7.0		justifiedDefines the behavior when not all columns can be filled due to too few images. Allowed values are left, center, right and justified.

Nhọrọ dị elu karịa

Maka nhọrọ ndị ọzọ dị elu, lelee API .

HTML Semantic

Usoro HTML kachasị mfe nke Gridzy bụ nke a:

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

Otú ọ dị, Gridzy dị nnọọ mgbanwe ma ị nwere ike iji ihe ọ bụla HTML ọ bụla ọzọ. Enwere naanị isi ihe ole na ole ị ga-atụle:

  • Nwa ọ bụla nke ihe mejupụtara akpa na-anọchi anya otu ihe na grid.
  • Ma akpa mmewere na ụmụ ya nwere ike ịbụ ụdị mkpado ọ bụla, dị ka ul na li (dị nnọọ tụlee iji tọgharịa ihe nchọgharị ndabere).
  • Ọ bụrụ na ihe img abụghị nwa n'onwe ya, ọ chọrọ klas gridzyImage .

Yabụ na nke a bụkwa usoro HTML na-arụ ọrụ:

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

Karịsịa ma ọ bụrụ na ịchọrọ ịgbakwunye nkọwa okwu, ịchọrọ nhazi HTML dị elu. Iji mụtakwuo maka ya, lelee Okwu & Skins .

Isiokwu & Skins

Ọ bụrụ na ịchọrọ ịgbakwunye nkọwa okwu na gallery gị, ịkwesịrị ịkọwapụta ọdịdị ahụ. Ya mere, ụfọdụ skins akọpụtagoro dị. Akpụkpọ anụ ọ bụla nwere faịlụ CSS. Ịkwesịrị ịgbakwunye faịlụ a na mgbakwunye na faịlụ Gridzy bụ isi (na-emekarị na ngalaba isi):

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

Ọzọkwa, ịchọrọ nhazi HTML dị elu:

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

Ọ bụrụ na ị na-eche maka nhazi HTML, lelee HTML Semantic .

Maka nkọwa okwu ị nwere ike iji ụdị mkpado ọ bụla, naanị hụ na o nwere gridzyCaption klas. Ihe img chọrọ klas gridzyImage .

Ihe atụ dị n'elu na-egosi gị akpụkpọ ahụ gridzySkinClassic . Iji jiri nke dị iche, naanị dochie aha akpụkpọ ahụ na otu n'ime ndị a:

Akpụkpọ anụ gụnyere

Klas dị
gridzySkin Blank
ezigbo mmalite maka ịmepụta akpụkpọ anụ
nhụchalụ ndụ		gridzySkinBlank
gridzySkinClassic
nhụchalụ ndụ		gridzySkinClassic
gridzySkinClassicLight(DEPRECATED kemgbe ụdị 2.6.0)
gridzySkinFullOverlay
nlebanya ndụ		gridzySkinFullOverlay
gridzySkinFullOverlayLight(DEPRECATED kemgbe ụdị 2.6.0)
gridzySkinLift
nhụchalụ ndụ		gridzySkinLift
gridzySkinLiftLight(DEPRECATED kemgbe ụdị 2.6.0)
gridzySkinMagnifier
arụ ọrụ mbugharị etinyeghị
nhụchalụ ndụ		gridzySkinMagnifier
gridzySkinMagnifierLight(DEPRECATED kemgbe ụdị 2.6.0)

Akpụkpọ anụ niile dị n'elu chọrọ naanị faịlụ CSS, mana enwere skins ndị ọzọ chọrọ faịlụ Javascript:

<link rel="stylesheet" href="gridzy/skins/gridzySkinBlur/style.min.css" />
<script src="gridzy/skins/gridzySkinBlur/script.min.js"></script>
Klas dị
gridzySkinBlur
anaghị arụ ọrụ na IE
nhụchalụ ndụ		gridzySkinBlur
gridzySkinBlurLight(DEPRECATED kemgbe ụdị 2.6.0)
gridzySkinCard
nhụchalụ ndụ		gridzySkinCard
gridzySkinCardLight(DEPRECATED kemgbe ụdị 2.6.0)

Nhọrọ akpụkpọ

Kemgbe ụdị 2.6.0 enwere Nhọrọ iji hazie skins arụnyere n'ime ya. Dabere na akpụkpọ ahụ kpọmkwem ị nwere ike ịtọ agba ndabere, agba ederede na onyinyo ederede. Naanị ị ga-eji njirimara omenala CSS dịka ị na-ahụ ebe a:

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

Lelee mgbanwe ndị akwadoro na ụkpụrụ ndabara maka akpụkpọ ọ bụla ebe a:

gridzySkinClassic
Na-agbanwe agbanweUru ndabaraOzi
--backgroundrgba(0, 0, 0, .7)na-enye ohere uru ndabere CSS ọ bụla
--colorrgb(255, 255, 255)na-enye ohere uru agba CSS ọ bụla
--text-shadownonena-enye ohere uru ederede-oyi CSS ọ bụla
gridzySkinFullOverlay
Na-agbanwe agbanweUru ndabaraOzi
--backgroundrgba(0, 0, 0, .7)na-enye ohere uru ndabere CSS ọ bụla
--colorrgb(255, 255, 255)na-enye ohere uru agba CSS ọ bụla
--text-shadownonena-enye ohere uru ederede-oyi CSS ọ bụla
gridzySkinLift
Na-agbanwe agbanweUru ndabaraOzi
--backgroundrgba(0, 0, 0, .7)na-enye ohere uru ndabere CSS ọ bụla
--colorrgb(255, 255, 255)na-enye ohere uru agba CSS ọ bụla
--text-shadow0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)na-enye ohere uru ederede-oyi CSS ọ bụla
gridzySkinMagnifier
Na-agbanwe agbanweUru ndabaraOzi
--backgroundrgba(0, 0, 0, .7)na-enye ohere uru ndabere CSS ọ bụla
--colorrgb(255, 255, 255)na-enye ohere uru agba CSS ọ bụla

Akpụkpọ anụ a anaghị akwado --text-shadow

gridzySkinBlur
Na-agbanwe agbanweUru ndabaraOzi
--backgroundrgba(0, 0, 0, .7)na-enye ohere uru ndabere CSS ọ bụla
--colorrgb(255, 255, 255)na-enye ohere uru agba CSS ọ bụla
--text-shadow0 0 10px rgb(0, 0, 0)na-enye ohere uru ederede-oyi CSS ọ bụla
gridzySkinCard
Na-agbanwe agbanweUru ndabaraOzi
--backgroundrgba(0, 0, 0, 1)na-enye ohere uru ndabere CSS ọ bụla
--colorrgb(255, 255, 255)na-enye ohere uru agba CSS ọ bụla
--text-shadownonena-enye ohere uru ederede-oyi CSS ọ bụla

Akpụkpọ anụ niile eburu ụzọ na-akwado naanị edemede ederede dị mfe. Ị nwere ike ịmepụta akpụkpọ anụ nke gị yana mgbagwoju anya. Biko lee anya na Style Gridzy .

Ụdị Gridzy

Ọ bụrụ na ọnweghị akpụkpọ ahụ akọwapụtara nke ọma dabara na mkpa gị, ị nwere ike ịke nke gị.

Ụzọ kachasị mfe bụ ibu ụzọ detuo akpụkpọ ahụ dị adị ma mee ka ọ dabara na mkpa nke gị. Akpụkpọ ahụ gridzySkinBlank agbagoro agbagoro ga-enyekarị ezigbo ntọala yana ezigbo akwụkwọ na faịlụ CSS:

/** SKIN Blank **/

/* all gallery items (direct children of the main container element) */
.gridzySkinBlank > .gridzyItem {
  overflow: hidden;
}

/* all gallery images (predefined in Gridzy's main CSS file, but can be overridden) */
.gridzySkinBlank .gridzyImage {
}

/* all gallery captions (just create your very own style) */
.gridzySkinBlank .gridzyCaption {
  margin: 0;
  padding: .5em;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: opacity .5s;
  overflow: auto;
  background: rgba(0, 0, 0, .7);
  color: rgb(255, 255, 255);
}

.gridzySkinBlank > .gridzyItem:hover .gridzyCaption {
  opacity: 1;
}

Na faịlụ CSS ị ga-ahụ klaasị gridzySkinBlank , gridzyImage na gridzyCaption . Gridzy n'onwe ya achọghị klaasị ndị a. A na-eji ha naanị maka ịke, yabụ ị nwere ike wepu ma ọ bụ nyegharịa ha aha ma ọ bụrụ na-amasị gị.

Na mgbakwunye, ị ga-ahụ gridzyItem klas CSS. Gridzy na-edobe klaasị a na-akpaghị aka nye ụmụaka niile bụ isi ihe mejupụtara akpa. Ya mere, ị nwere ike iji klas a iji mee ihe ndị dị na gallery gị.

Uche ihe ndị dị mkpa

  1. Ihe dị n'ime ya kwesịrị ịzaghachi nke ọma. Tụlee na nha mmewere ga-agbanwe n'ezie. Jiri uru pasentị kama iji ụkpụrụ pikselụ. Ma lee anya na nhọrọ okirikiri nhọrọ ukwuu nke Gridzy autoFontSize , nke na-ejikọ nha font na nha igbe ihe.
  2. Ihe ọ bụla kwesịrị inwe oke akụkụ akọwapụtara nke ọma. Akụkụ akụkụ ihe ahụ agaghị agbanwe ma ọ dị mkpa iji gbakọọ grid. Yabụ ọ bụrụ na ihe anaghị enwe akụkụ akọwapụtara nke ọma ozugbo, jiri aka kọwaa ya (dịka site na css).

N'ọnọdụ ụfọdụ, ọ nwere ike ịdị mfe ịke ọdịnaya nke ihe ahụ tupu Gridzy amalite. Naanị wepu gridzy klas ma ọ bụ faịlụ javascript Gridzy nwa oge maka nke a.

Ọ bụ ya! Nke ahụ bụ naanị ihe ịchọrọ iji wuo akpụkpọ ahụ nke gị. Ọtụtụ n'ime akpụkpọ ahụ eburu ụzọ kọwaa anaghị eji nke a karịa.

Mana enwere ike ịnwe karịa ma ọ bụrụ na-amasị gị…

Skins dị elu

Gridzy na-eji klaasị CSS karịa naanị gridzyItem . A ga-edozi ọtụtụ n'ime ha na-akpaghị aka ma ị nwekwara ike iji ha maka styling.

klaasị isi akpa

Aha klasNkọwa
gridzy
iji aka gị tọọ		Gridzy na-achọta ihe na klaasị a na-akpaghị aka wee malite ha.
gridzyAnimatedA ga-edozi ozugbo ma ọ bụrụ na nhọrọ animate bụ true . Ọ bụrụ na ejiri aka hazie klaasị a, nhọrọ animate ga-abụkwa true ozugbo (belụsọ ma ọ bụrụ na edobere ya nke ọma ka ọ bụrụ false ).

Klas ihe

Aha klasNkọwa
gridzyItemA ga-edozi ozugbo ihe ahụ malitere usoro mmalite. Agaghị ewepụ ya.
gridzyItemInitializingA ga-edozi ozugbo ihe ahụ malitere usoro mmalite. A ga-eji gridzyItemReady dochie ya ozugbo ebidochara ihe ahụ. Pụtara na ọ bụghị na ebujuru onyonyo nke ọma (lee gridzyItemLoading ), mana ihe adịla njikere ịhụ ya.
gridzyItemReadyGa-anọchi gridzyItemInitializing ibido ozugbo ebidochara ihe ahụ. Agaghị ewepụ ya. Pụtara na ọ bụghị na ebujuru ihe onyonyo n'ụzọ zuru ezu (lee gridzyItemComplete ), mana ihe adịla njikere ịhụ ya.
gridzyItemLoadingA ga-edozi ozugbo ihe ahụ malitere usoro mmalite. A ga-eji gridzyItemComplete dochie anya ozugbo a na-ebujuru foto ndị dị n'ime (na-abụkarị naanị otu).
gridzyItemCompleteGa-edochi gridzyItemLoading ozugbo a na-ebujuru onyonyo ndị dị n'ime (na-abụkarị naanị otu). Agaghị ewepụ ya.
gridzyItemInitialToVisibleA ga-edozi ozugbo ihe malitere ịpụta oge mbụ. A ga-ewepụ ozugbo ihe ahụ pụtara kpamkpam.
gridzyItemVisibleA ga-edozi ozugbo ihe ahụ pụtara nke ọma. A ga-ewepụ ozugbo ihe malitere ịla n'iyi.
gridzyItemVisibleToHiddenA ga-edozi ozugbo ihe malitere ịla n'iyi. A ga-ewepụ ozugbo ihe zoro ezo kpamkpam.
gridzyItemHiddenA ga-edozi ozugbo ihe zoro ezo kpamkpam. A ga-ewepụ ozugbo ihe malitere ịpụta.
gridzyItemHiddenToVisibleA ga-edozi ozugbo ihe malitere ịpụta (ma e wezụga na-apụta oge mbụ - lee klas gridzyItemInitialToVisible ). A ga-ewepụ ozugbo ihe ahụ pụtara kpamkpam.
gridzyItemVisibleToVisibleA ga-edozi ozugbo ihe dị na grid gbanwere, mana ihe ahụ n'onwe ya dị ma nọrọ na-ahụ anya. A ga-ewepụ ozugbo ihe ngosi mgbanwe ahụ gwụchara.

Site na ndabara ihe ngosi usoro na ihe ngosi maka onyonyo na-apụta ma na-apụ n'anya bụ faịlụ Gridzy isi CSS kọwapụtara ya.

Site na klaasị CSS ndị a a kpọtụrụ aha n'elu ị nwere ike ịkepụta ihe ngosi na ihe ngosi nke gị. Gbalịa lelee Gridzy isi faịlụ CSS, ka ị ghọta ihe ị ga-emerịrị. Enweghị egwu, ihe niile edepụtara nke ọma ebe ahụ.

Kwalite nbudata

Ọ bụrụ na ị na-eji ọtụtụ onyonyo, ọ nwere ike ịbụ ezigbo echiche inyere Gridzy aka iwulite grid ngwa ngwa.

Gbochie onyonyo ịwụ elu

Gridzy chọrọ oke akụkụ nke onyonyo niile iji gbakọọ grid. Eziokwu ndị a na-ebute ihe ndị na-awụli elu ma ọ bụrụ na ụfọdụ ihe oyiyi dị njikere ma ndị ọzọ adịghị. Ka ihe oyiyi dị na ya, otú ahụ ka ihe na-akpasu iwe nwere ike ịbụ mmetụta a.

Iji gbochie omume a, naanị tọọ width na njirimara height maka ihe niile img . Ọ dị mkpa ịtọ ụkpụrụ ziri ezi maka ihe oyiyi nke ọ bụla, ma ọ bụghị na ihe oyiyi ahụ ga-agbagọ. Ụkpụrụ ziri ezi bụ obosara mbụ na ịdị elu nke onyonyo a:

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

Mgbe nke ahụ gasịrị, Gridzy nwere ike gbakọọ grid ozugbo na-achọghị ịma nha nke onyonyo a.

Nbudata dị umengwụ

Ka ibunye naanị onyonyo dị na nlegharị anya a na-ahụ anya, soro usoro ndị a:

  1. Fanye width na njirimara height dịka akọwara n'elu (jide n'aka na iji ụkpụrụ ziri ezi)
  2. Dochie àgwà src niile na data-gridzylazysrc dị ka egosiri n'okpuru (ọ bụrụ na ị nwekwara àgwà srcset , dochie ha na data-gridzylazysrcset ).
<div class="gridzy">
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img data-gridzylazysrc="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

Mgbe usoro ndị a gasịrị, onyonyo a ga-ebuba ozugbo ha nọ nso ma ọ bụ n'ime ebe nlele.

Ngosipụta usoro

Ihe ngosi usoro bụ obere akara ngosi na-egosi mgbe ihe onyonyo a na-ebunye. Ọ bụrụ na ị na-eji captions & skins , usoro egosi ga-akpaghị aka. Ma ọ bụghị ya, ịchọrọ mgbanwe ụfọdụ:

  1. Tinye ihe img ọ bụla n'ime elementrị div
    (ma ọ bụ n'ime ihe ọ bụla ọzọ - lee HTML semantic maka ihe ndị ọzọ)
  2. Tinye klas gridzyImage na ihe img ọ bụla
<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>

Mgbe nke ahụ gasịrị, ị ga-ahụ usoro ihe ngosi ma ọ bụrụ na ihe oyiyi na-ewe oge iji buru ibu.

Ihe nzacha

Ihe nzacha na Gridzy mara mma dị mfe mana dị ike. N'agbanyeghị ụdị nzacha ị chọrọ, o yikarịrị ka ọ ga-ekwe omume. Naanị ihe ị chọrọ bụ, ntakịrị CSS na ụdị HTML ole na ole…

Nke a bụ ọmụmaatụ na-arụ ọrụ:

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

Ka anyị wuo ya nzọụkwụ site nzọụkwụ

1. Nke mbụ, anyị chọrọ usoro HTML nke Gridzy na-emebu wee tọọ aha klas maka ihe gallery niile ka anyị wee nwee ike nyochaa ha ma emechaa.

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

N'ihe atụ a, anyị na-eji naanị otu klas maka mmewere ọ bụla. Mana ị nwekwara ike ịtọ ọtụtụ klaasị maka otu mmewere, ma ọ bụrụ na enwere ike ịchọta ihe ahụ site na ọtụtụ nzacha.

2. Mgbe ahụ, anyị na-agbakwunye ụfọdụ bọtịnụ nke anyị nwere ike ịgbanwe ihe nzacha ahụ

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

Kama bọtịnụ, ị nwekwara ike iji ụdị ihe ndị ọzọ dị ka igbe nlele, bọtịnụ redio, mpaghara họrọ na ihe ndị ọzọ.

Dị ka ị na-ahụ, ụkpụrụ nke bọtịnụ bụ ndị na-ahọrọ CSS. Ozugbo anyị mechara, ịpị bọtịnụ dị otú ahụ ga-egosipụta onyonyo dabara na onye na-ahọrọ CSS. Na teknụzụ ọ na-edobe nhọrọ filter na uru a.

Ị nwekwara ike iji ọtụtụ ndị na-ahọpụta ndị mgbagwoju anya. Dịka ọmụmaatụ :not(.animals) ga-arụkwa ọrụ, yana .animals.people na .animals, .people .

3. N'ikpeazụ, anyị na-ekpuchi bọtịnụ ndị ahụ n'ime akpa div ma kechie ha na gallery Gridzy, site na ịtọ nhọrọ 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>

Dịka ị na-ahụ, anyị na-ejikwa nhọrọ CSS maka nhọrọ filterControls . Akpa div nwere njirimara id na-arụ ọrụ naanị iji mee ka bọtịnụ dị mfe ịhọrọ site na onye na-ahọrọ CSS ahụ.

Ọ bụ ya!

Ọ bụrụ na ịchọrọ ngwọta Javascript, lelee API .

API

Agbanyeghị na Gridzy nwere API nke ya, enwere ike ịme ọtụtụ ihe na-enweghị ya, naanị site na ijikwa DOM. Gridzy ga-achọpụta ya wee mezie grid. Mana enwerekwa API dị ike nke ukwuu…

Na-emegharị DOM

Maka njikwa ihe nleba anya akwụkwọ ihe niile (DOM) anyị ga-ebu ụzọ chọọ mmewere akpa:

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

Tinye onyonyo

Ọ dị mkpa iwulite ma mejupụta ihe ụmụaka ọhụrụ tupu ị tinye ya na mmewere akpa. Ma ọ bụghị ya, Gridzy enweghị ike ịchọpụta akụkụ ziri ezi.

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

Wepu onyonyo

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

Gbanwee Nhọrọ

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

Ihe ndị ọzọ gbasara ijikwa DOM ị nwere ike ịhụ na docs webụ MDN . Enwekwara mmalite nke DOM dị.

API nwe ya

Iji jiri API, anyị ga-ebu ụzọ chọọ ihe atụ Gridzy, nke jikọtara ya na mmewere akpa Gridzy:

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

Nweta Nhọrọ

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

Nweta Nhọrọ niile

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

Tọọ Nhọrọ

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

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

Tinye nzacha

Itinye nzacha bụ naanị ịtọ filter nhọrọ nke nwere ike ịbụ nhọrọ CSS ọ bụla bara uru:

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

Tinye Ọrụ nlọghachite

EKWAPỤTARA kemgbe ụdị 2.4.0
Jiri ihe omume ọgbara ọhụrụ na nke na-agbanwe agbanwe kama. Lee ngalaba na-esote maka nkọwa.

Gridzy.js 2 na-akwado ụfọdụ nhọrọ maka ọrụ ịkpọghachi. Enwere ike ịtọ ha naanị site na API nke nwe ya, mana dịka nhọrọ ndị ọzọ:

// 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.
  }
});
Nkọwa
onBeforeOptionsChangedỌrụ ịkpọghachi azụ nke a na-akpọku ozugbo tupu ịtọ nhọrọ.
onOptionsChangedỌrụ nkwụghachi nke a na-akpọku ozugbo ka ịtọchara nhọrọ.
onBeforeRenderỌrụ nkwụghachi nke a na-akpọku ozugbo tupu emegharị ya.
onRenderỌrụ azụghachi nke a na-akpọ oku ozugbo emechara ya.

Jiri Mmemme

site na ụdị 2.4.0

Ị nwere ike iji mmemme Gridzy dịka mmemme Javascript na-emebu:

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

A na-achụpụ ihe omume ụfọdụ na mmewere akpa Gridzy na ihe omume ndị ọzọ na-agbapụ na ihe nke ọ bụla n'ime mmewere akpa ahụ.

Ihe omume agbagoro na mmewere akpa Gridzy:

Nkọwa
gridzyBeforeInitỌkụ tupu mmalite gallery.
gridzyInitỌkụ mgbe mmalite gallery.
gridzyBeforeOptionsChangedỌkụ tupu ịtọ nhọrọ.
gridzyOptionsChangedỌkụ ka emechara nhọrọ.
gridzyBeforeRenderỌkụ tupu enye.
gridzyRenderỌkụ mgbe emechara ya.
Ọ bụrụ na ị tụfuru mmemme ọ bụla ebe a, biko ziga arịrịọ nkwado .

event.target na-enye mmewere akpa Gridzy.
event.detail.instance na-enye ihe atụ Gridzy.

Ihe omume agbasara na ihe ndị a:

Nkọwa
gridzyItemBeforeInitỌkụ tupu mmalite ihe.
gridzyItemInitỌkụ mgbe mmalite ihe.
gridzyItemLoadingỌkụ mgbe ihe amalitere ibu.
gridzyItemReadyỌkụ mgbe ihe dị njikere maka mkpokọta grid. Yabụ na amaara oke akụkụ ahụ, mana onyonyo a ka nwere ike na-ebunye.
gridzyItemCompleteỌkụ mgbe eburu ihe oyiyi ihe ahụ nke ọma.
Ọ bụrụ na ị tụfuru mmemme ọ bụla ebe a, biko ziga arịrịọ nkwado .

event.target na-enye mmewere ihe dị iche iche.
event.detail.instance na-enye ihe atụ Gridzy.

API – Global

Enwere ụfọdụ ọrụ na-adabereghị na ọnọdụ Gridzy. Yabụ na anyị achọghị ịnweta ihe atụ mbụ.

Nweta Nhọrọ ndabara

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

Nweta Nhọrọ ndabara niile

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

Tọọ Nhọrọ ndabara

Nke a anaghị edobe nhọrọ nke ihe omume Gridzy ebidolarị, mana na-akọwa ntọala maka ọnọdụ ọhụrụ. Agbanyeghị, ọ bụrụ na a ga-emegharị nhọrọ nke ihe atụ dị site na uru null , ọ ga-eji uru ndabara ọhụrụ.

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

Ị nwere ike iji nke a ka ịtọ nhọrọ zuru ụwa ọnụ, ọ bụrụ na ị kpọọ ya tupu DOM adịla njikere. Yabụ na ị gaghị adị mkpa ịtọ nhọrọ dịka njirimara ọzọ.

Akpaaka

Ọ bụrụhaala na ihe niile automatisms nke Gridzy.js 2 na-arụ ọrụ, ọ dịghị mkpa maka n'okpuru ụzọ. Mana enwere ike gbanyụọ akpaaka ka iji Gridzy n'ụzọ ọdịnala karịa:

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

Enweghị ike ịtọ ụfọdụ nhọrọ ndị a site na njirimara data-gridzy- ma ọ bụ site na setOptions() , n'ihi ihe ezi uche dị na ya:

Uru ndabaraNkọwa
autoInitOnDomReadytrueNa-achọpụta ihe nwere gridzy klaasị na ntinye ibe wee malite ha.

Ntọala site na Gridzy.setDefaultOptions()
autoInitOnDomMutation
MutationObserver		trueNa-achọpụta ihe ọhụrụ na klas gridzy ozugbo ha pụtara na DOM wee malite ha. (dịka ọmụmaatụ na iji ntụgharị ibe)

Ntọala site na Gridzy.setDefaultOptions()
autoSyncChildListMutation
MutationObserver		trueNa-achọpụta ma agbakwunyere ma ọ bụ wepụ ihe ụmụaka (onyinyo) ma na-emelite grid na-akpaghị aka.

Ntọala site na data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
useOptionAttributestrueNa-akọwa ma a na-ejikarị njirimara data-gridzy- ma ọ bụ na ejighi ya. Ọ bụrụ na nke a bụ nhọrọ false enwere ike ịtọ naanị site na API nwe ya.

Ntọala site na new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncAttributesMutation
MutationObserver		trueNa-achọpụta mgbanwe nke njirimara data-gridzy- , ma na-emelite grid na-akpaghị aka. Na-achọpụtakwa ma agbakwunyere ma ọ bụ wepụ gridzyAnimated klas yana ọ bụrụ na mgbanwe ụdị style emee. Ọ bụrụ na useOptionAttributes bụ false , ọ na-achọpụta naanị mgbanwe ụdị style .

Ntọala site na data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncChildClassMutation
MutationObserver		trueNa-achọpụta mgbanwe nke njirimara class nke ihe ụmụaka niile (onyinyo). Dị mkpa gbasara nzacha.

Ntọala site na data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncImageMutation
MutationObserver

site na ụdị 2.5.0		trueNa-achọpụta mgbanwe nke njirimara src nke onyonyo niile. Dị mkpa mgbe ejiri ya na React ma ọ bụ ụlọ akwụkwọ ndị yiri ya.

Ntọala site na data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoRenderOnResize
ResizeObserver

site na ụdị 2.6.0		trueNa-achọpụta mgbanwe nke obosara mmewere. Dị mkpa gbasara imewe na-anabata. (Tupu mbipute 2.6.0 a na-eji onye na-ege ihe omume regharịa nha)

Ntọala site na data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()

Jiri aka bido

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

Bibie ihe atụ

O siri ike ikwu, ihe megidere ibido Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Iji aka mekọrịta ndepụta ụmụaka

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

Jikwa aka mekọrịta ihe otu nwatakịrị na-alụbeghị di

Ọ dịghị mkpa, ma e wezụga n'ọnọdụ ndị dị ụkọ.

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

Iji aka mekọrịta àgwà

Mara na nhọrọ useOptionAttributes ga-abụrịrị true maka nke a.

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

Na-amanye ntụgharị

Ọ naghị adị mkpa, ọbụlagodi na agbanyụrụ akpaaka niile

gridzyInstance.render();