Gridzy.Gallery

webKrio

Vɛshɔn 2.x

Dɛn dɔn translet di wɛbsayt ɔtomɛtik wan. If sɔntin nɔ klia, duya luk di Inglish dɔkyumɛnt dɛn.

Di Besik Yuz

Uplod di Gridzy fayl dɛn na yu sava ɛn ad dɛn to yu wɛbsayt (bɔku tɛm na di ed sɛkshɔn):

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

Ad di HTML kɔd (ɛnisay na di bɔdi sɛkshɔn):

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

Na dat na so! Dat na ɛgzampul we de wok ful wan. No ekstra initializeshɔn nɔ nid fɔ de.

Kɔnfigyushɔn fɔ di tin dɛn we dɛn dɔn mek

Di izi we fɔ kɔnfigyut Gridzy na, fɔ jɔs yuz HTML atribyut dɛn. Yu jɔs nid fɔ prɛfiks di opshɔn nem dɛn wit data-gridzy- . So, fɔ sɛt di spaceBetween opshɔn, jɔs ad di atribyut 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>

Men Opshɔn dɛn

Difɔlt ValyuTɔk bɔt
animatetrueDitarmin if animashɔn fɔ yuz we di grid chenj (fɔ ɛgzampul, we yu de chenj di sayz na di brawza winda ɔ we yu de sɛt filta).
layoutjustifiedDifayn di layout we dɛn yuz. Gridzy.js 2 sɔpɔt di tu difrɛn layout dɛn justified ɛn waterfall . Ɛni wan pan dɛn gɛt in yon ɔda opshɔn paramita dɛn, we yu kin fɛn dɔŋ dis tebul.
filter*I de disayd us pikchɔ dɛn fɔ sho. Eni CSS-selector kin yuz as valyu ya. Usually set automatically via filterControls (luk di nɛks opshɔn).
Chek ɔut Filta dɛn
filterControlsDitarmin us fɔm ɛlimɛnt dɛn we dɛn kin yuz fɔ filta di pikchɔ dɛn. Ɛni CSS sɛlɛktɔ, we de pik HTML fɔm ɛlimɛnt dɛn, yu kin yuz am as valyu ya.
Chek ɔut Filta dɛn
autoConsiderScrollBarstrueFɔ tɔk di waid we de if skrol bar dɛn apia ɔ disappear. I fayn ɔltɛm fɔ lɛf am pan true pas dis ɔtomatik kɔz prɔblɛm.

Justified Layout Opshɔn dɛn

Difɔlt ValyuTɔk bɔt
autoFontSizefalseƆtomatik ɔpdet di font-sayz prɔpati fɔ ɛni bɔks bay di ɔrijinal bɔks saiz. Bay difɔlt di font-sayz prɔpati nɔ sɛt klia wan.
desiredHeight190Difayn di ayt we yu want fɔ di ɛlimɛnt row dɛn. Di aktual ayt go kɔmpyutayt dipen pan di wit we de ɛn di ɛlimɛnt dɛn we de na di row.
hideOnMissingImagetrueI de ayd bɔks dɛn we gɛt pikchɔ dɛn we dɛn nɔ bin ebul fɔ lod.
spaceBetween4Difayn di distans bitwin ɛlimɛnt dɛn insay piksɛl.
lastRowAlign
sins di vɛshɔn 2.3.0		justifiedDifayn di bihayvya fɔ di las row. Valyu dɛn we dɛn alaw na left , center , right ɛn justified .
singleRowAlign
sins di vɛshɔn 2.3.0		justifiedDifayn di bihayvya if na wan singl row nɔmɔ de. Valyu dɛn we dɛn alaw na left , center , right ɛn justified .
fillLastRow
sins di vɛshɔn 2.1.0		trueRIMƆV am frɔm di vɛshɔn 2.4.0 (DƐN DEPRƐKƐT frɔm di vɛshɔn 2.3.0 )
Arenj di pikchɔ dɛn so dat di las rɔw go ful-ɔp ɔlsay ɔltɛm. If yu plan fɔ ad pikchɔ dɛn dinamik wan, i go fayn fɔ mek yu nɔ ebul fɔ du dis.
Tek no ifekt pan singl row (luk fillSingleRow ).
fillSingleRow
sins di vɛshɔn 2.1.0		trueRIMƆV am frɔm di vɛshɔn 2.4.0 (DƐN DEPRƐKƐT frɔm di vɛshɔn 2.3.0 )
If na wan row nɔmɔ de, i kin arenj di pikchɔ dɛn so dat di row go ful-ɔp ɔlsay ɔltɛm. If i kin apin se na wan ɔ tu pikchɔ dɛn nɔmɔ yu gɛt na di galari, i go fayn fɔ mek yu nɔ du dis.

Waterfall Layout Opshɔn dɛn

Difɔlt ValyuTɔk bɔt
autoFontSizefalseƆtomatik ɔpdet di font-sayz prɔpati fɔ ɛni bɔks bay di ɔrijinal bɔks saiz. Bay difɔlt di font-sayz prɔpati nɔ sɛt klia wan.
desiredWidth250Difayn di wit we yu want fɔ di kɔlɔn dɛn. Dɛn go kɔmpyutayt di aktual wit dipen pan di wit we de ɛn di nɔmba fɔ di kɔlɔn dɛn.
hideOnMissingImagetrueI de ayd bɔks dɛn we gɛt pikchɔ dɛn we dɛn nɔ bin ebul fɔ lod.
horizontalOrderfalseDifayn se di elemɛnt dɛn de put strikt wan ɛlimɛnt na ɛni kɔlɔm frɔm lɛft to rayt, dɔn i bigin bak na di mɔs lɛft kɔlɔn indipɛndɛnt insay us kɔlɔm de mɔ ples. Bay difɔlt di ɛlimɛnt dɛn go ɔltɛm de na di kɔlɔm we gɛt di ayt we smɔl pas ɔl.
spaceBetween4Difayn di distans bitwin ɛlimɛnt dɛn insay piksɛl.
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.

Mɔ Advans Opshɔn dɛn

Fɔ no mɔ advans opshɔn dɛn, chɛk di API .

HTML we gɛt sɛmantik

Di simpul HTML strɔkchɔ fɔ Gridzy na dis:

<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ɔt Gridzy rili fleksibul ɛn yu kin yuz ɔlmost ɛni ɔda HTML strɔkchɔ. Na wan wan tin dɛn nɔmɔ wi fɔ tink bɔt:

  • Ɛni pikin fɔ di kɔntena ɛlimɛnt de sho wan tin na di grid.
  • Ɔl tu di kɔntena ɛlimɛnt ɛn in pikin dɛn kin bi ɛni tag tayp, lɛk ul ɛn li (jɔs tink bɔt fɔ riset brawza difɔlt dɛn).
  • If img elemɛnt nɔto dairekt pikin insɛf, i nid di klas gridzyImage .

So dis na HTML strɔkchɔ we de wok bak:

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

Ɛspɛshali if yu want fɔ ad kapshɔn, yu nid fɔ gɛt advans HTML strɔkchɔ. Fɔ no mɔ bɔt am, luk na di say we se Captions & Skins .

Kapshɔn & Skin dɛn

If yu want fɔ ad kapshɔn to yu galari, yu nid fɔ difayn di we aw i tan. So, sɔm skin dɛn we dɛn dɔn difayn bifo tɛm de. Ɛni skin we gɛt wan CSS fayl. Yu nid fɔ ad dis fayl apat frɔm di men Gridzy fayl dɛn (bɔku tɛm na di ed sɛkshɔn):

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

Dɔn bak yu nid wan advans HTML strɔkchɔ:

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

If yu de wɔnda bɔt di HTML strɔkchɔ, tek wan luk pan Sɛmantik HTML .

Fɔ di kapshɔn yu kin yuz ɛni kayn tag, jɔs mek shɔ se i gɛt di klas gridzyCaption . Di img elemɛnt nid di klas gridzyImage .

Di ɛgzampul we de ɔp de sho yu di skin gridzySkinClassic . Fɔ yuz difrɛn wan, jɔs chenj di nem fɔ di skin wit wan pan dɛn tin ya:

Inklud Skins dɛn

Klas dɛn we De
gridzySkinBlank we de na di wɔl
wan gud say fɔ bigin fɔ mek yu yon skin
layv prɛviu		gridzySkinBlank
gridzySkinClassic
layv prɛviu		gridzySkinClassic
gridzySkinClassicLight(DƐPRƐKƐT frɔm di vɛshɔn 2.6.0)
gridzySkinFullOverlay
layv prɛviu		gridzySkinFullOverlay
gridzySkinFullOverlayLight(DƐPRƐKƐT frɔm di vɛshɔn 2.6.0)
gridzySkinLift
layv prɛviu		gridzySkinLift
gridzySkinLiftLight(DƐPRƐKƐT frɔm di vɛshɔn 2.6.0)
gridzySkinMagnifier
zoom funkshɔnaliti nɔ de insay
layv prɛviu		gridzySkinMagnifier
gridzySkinMagnifierLight(DƐPRƐKƐT frɔm di vɛshɔn 2.6.0)

Ɔl di skin dɛn we de ɔp jɔs nid CSS fayl, bɔt ɔda skin dɛn de we nid JavaSkript fayl bak:

<link rel="stylesheet" href="gridzy/skins/gridzySkinBlur/style.min.css" />
<script src="gridzy/skins/gridzySkinBlur/script.min.js"></script>
Klas dɛn we De
gridzySkinBlur
nɔ de wok na IE
layv prɛviu		gridzySkinBlur
gridzySkinBlurLight(DƐPRƐKƐT frɔm di vɛshɔn 2.6.0)
gridzySkinCard
layv prɛviu		gridzySkinCard
gridzySkinCardLight(DƐPRƐKƐT frɔm di vɛshɔn 2.6.0)

Di tin dɛn we yu kin pik fɔ mek yu skin

Sins vɛshɔn 2.6.0 Opshɔn dɛn de fɔ kɔnfigyut di bilt-in skin dɛn. Dipen pan di patikyula skin yu kin sɛt di bakgrɔn kɔlɔ, tɛks kɔlɔ ɛn tɛks shado. Yu jɔs gɛt fɔ yuz CSS kɔstɔm prɔpati dɛn lɛk aw yu kin si ya:

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

Chek di vayriɔbul dɛn we dɛn sɔpɔt ɛn di difɔlt valyu dɛn fɔ ɛni skin ya:

gridzySkinClassic
Variable we kin chenjDifɔlt ValyuTin dɛn
--backgroundrgba(0, 0, 0, .7)alaw ɛni CSS bakgrɔn valyu
--colorrgb(255, 255, 255)alaw ɛni CSS kɔlɔ valyu
--text-shadownonealaw ɛni CSS tɛks-shado valyu
gridzySkinFullOverlay
Variable we kin chenjDifɔlt ValyuTin dɛn
--backgroundrgba(0, 0, 0, .7)alaw ɛni CSS bakgrɔn valyu
--colorrgb(255, 255, 255)alaw ɛni CSS kɔlɔ valyu
--text-shadownonealaw ɛni CSS tɛks-shado valyu
gridzySkinLift
Variable we kin chenjDifɔlt ValyuTin dɛn
--backgroundrgba(0, 0, 0, .7)alaw ɛni CSS bakgrɔn valyu
--colorrgb(255, 255, 255)alaw ɛni CSS kɔlɔ valyu
--text-shadow0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)alaw ɛni CSS tɛks-shado valyu
gridzySkinMagnifier
Variable we kin chenjDifɔlt ValyuTin dɛn
--backgroundrgba(0, 0, 0, .7)alaw ɛni CSS bakgrɔn valyu
--colorrgb(255, 255, 255)alaw ɛni CSS kɔlɔ valyu

Dis skin nɔ de sɔpɔt --text-shadow

gridzySkinBlur
Variable we kin chenjDifɔlt ValyuTin dɛn
--backgroundrgba(0, 0, 0, .7)alaw ɛni CSS bakgrɔn valyu
--colorrgb(255, 255, 255)alaw ɛni CSS kɔlɔ valyu
--text-shadow0 0 10px rgb(0, 0, 0)alaw ɛni CSS tɛks-shado valyu
gridzySkinCard
Variable we kin chenjDifɔlt ValyuTin dɛn
--backgroundrgba(0, 0, 0, 1)alaw ɛni CSS bakgrɔn valyu
--colorrgb(255, 255, 255)alaw ɛni CSS kɔlɔ valyu
--text-shadownonealaw ɛni CSS tɛks-shado valyu

Ɔl di skin dɛn we dɛn dɔn difayn bifo tɛm, jɔs de sɔpɔt simpul tɛks kapshɔn dɛn. Yu kin mek yu yon ɛn mɔ kɔmpleks skin dɛn. Duya tek wan luk pan Style Gridzy .

Stayl Gridzy

If no skin we dɛn dɔn disayd fɔ yu nɔ fit wetin yu nid, yu kin stayl yu yon wan.

Di izi we na fɔ kɔpi fɔs wan skin we dɔn de ɛn adap am to yu yon nid. Di prɛdifayn skin gridzySkinBlank go ɔltɛm gi gud fawndeshɔn ɛn bak gud dɔkyumentri na di CSS fayl:

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

Insay di CSS fayl yu go si di klas dɛn gridzySkinBlank , gridzyImage ɛn gridzyCaption . Gridzy insɛf nɔ nid dɛn klas ya. Dɛn kin jɔs yuz dɛn fɔ stayl ɛn so yu kin pul ɔ chenj dɛn nem if yu want.

Apat frɔm dat yu go fɛn di CSS klas gridzyItem . Gridzy de set dis klas otomatik to ɔl di dairekt pikin dɛn fɔ di men kɔntena ɛlimɛnt. So, yu kin yuz dis klas fɔ stayl di tin dɛn we de na yu galari.

Mind Impɔtant Tin dɛn

  1. Di tin dɛn we de insay di tin fɔ rili ansa. Tink bɔt se di ɛlimɛnt saiz go rili chenj. Yuz pasɛnt valyu dɛn instead ɔf piksɛl valyu dɛn. Ɛn tek wan luk pan di Gridzy layout opshɔn autoFontSize , we de tay di font-sayz pan di aytem bɔks saiz.
  2. Ɛni tin fɔ gɛt wan aspek rishɔ we dɛn dɔn difayn fayn fayn wan. Di aytem in aspek ratio nɔ go ɛva chenj ɛn dɛn nid am fɔ kɔl di grid. So if wan aytem nɔ ɔtomɛtik gɛt wan aspek rɛsɛshɔn we dɛn dɔn difayn fayn fayn wan, prɛdifayn am wit yu an (ɛgz. via css).

Sɔntɛnde, i kin izi fɔ stayl di tin dɛn we de insay di tin dɛn bifo Gridzy de initialize. Simply tek di klas gridzy ɔ di Gridzy javascript fayl fɔ sɔm tɛm fɔ dis.

Na dat na so! Na dat nɔmɔ yu nid fɔ bil yu yon skin. כl di prεdifayn skin dεm nכ de yuz mכr pas dis.

Bɔt mɔ kin de if yu lɛk ...

Advans Skin dɛn

Gridzy de yuz mɔ CSS klas pas jɔs gridzyItem . Bɔku pan dɛn go sɛt ɔtomɛtik ɛn yu kin yuz dɛn fɔ stayl bak.

Men Kɔntinɛnt Klas dɛn

Klas NemTɔk bɔt
gridzy
fɔ sɛt wit yu an		Gridzy de fɛn ɛlimɛnt dɛn wit dis klas ɔtomɛtik wan ɛn initialize dɛn.
gridzyAnimatedI go sɛt ɔtomɛtik if opshɔn animate na true . If dɛn sɛt dis klas wit yu an, di opshɔn animate go ɔtomɛtiks gɛt true bak (eksept if dɛn sɛt am klia wan to false ).

Aytem Klas dɛn

Klas NemTɔk bɔt
gridzyItemGo set as soon as di aytem stat di initializing proses. Dɛn nɔ go ɛva pul am.
gridzyItemInitializingGo set as soon as di aytem stat di initializing proses. Go riples am wit gridzyItemReady as soon as di aytem ful initialize. I nɔ min se pikchɔ dɛn dɔn ful-ɔp (luk gridzyItemLoading ), bɔt di tin rɛdi fɔ mek pɔsin si am.
gridzyItemReadyGo riples gridzyItemInitializing as soon as di aytem ful initialize. Dɛn nɔ go ɛva pul am. I nɔ min se pikchɔ dɛn dɔn ful-ɔp (luk gridzyItemComplete ), bɔt di tin rɛdi fɔ mek pɔsin si am.
gridzyItemLoadingGo set as soon as di aytem stat di initializing proses. Dɛn go riples am wit gridzyItemComplete as soon as di pikchɔ dɛn we de insay (bɔku tɛm na wan nɔmɔ) dɔn ful-ɔp.
gridzyItemCompleteGo riples gridzyItemLoading as soon as di pikchɔ dɛn we de insay (bɔku tɛm na wan nɔmɔ) dɔn ful-ɔp. Dɛn nɔ go ɛva pul am.
gridzyItemInitialToVisibleDɛn go sɛt am jɔs lɛk aw di tin bigin fɔ apia di fɔs tɛm. Dɛn go pul am jɔs afta di tin dɔn klia wan.
gridzyItemVisibleDɛn go sɛt am jɔs afta di tin dɔn ful-ɔp fɔ si. Dɛn go pul am jɔs lɛk aw di tin bigin fɔ lɔs.
gridzyItemVisibleToHiddenDɛn go sɛt am jɔs lɛk aw di tin bigin fɔ lɔs. Dɛn go pul am jɔs afta we di tin ayd ɔltogɛda.
gridzyItemHiddenDɛn go sɛt am jɔs lɛk aw di tin ayd ɔl. Dɛn go pul am jɔs lɛk aw di tin bigin fɔ apia.
gridzyItemHiddenToVisibleDɛn go sɛt am jɔs lɛk aw di tin bigin fɔ apia (eksept fɔ apia di fɔs tɛm – si klas gridzyItemInitialToVisible ). Dɛn go pul am jɔs afta di tin dɔn klia wan.
gridzyItemVisibleToVisibleGo set as soon as somtin na di grid chenj, bot di item sef bin en stay visible. Dɛn go pul am jɔs afta di chenj animashɔn dɔn.

Bay difɔlt di prɔses indikɛtɔ ɛn di animashɔn fɔ di pikchɔ dɛn we de apia ɛn we de lɔs, na di Gridzy men CSS fayl dɔn prɛdifayn am.

Wit dɛn CSS klas ya we wi dɔn tɔk bɔt yu kin stayl yu yon prɔses indikɛtɔ ɛn animashɔn dɛn. Dare a luk insay di Gridzy men CSS fayl, fɔ ɔndastand wetin yu go gɛt fɔ ɔvalayz. No fred, evritin don dokument gud gud wan de.

Optimayz di Lod we yu de lod

If yu yuz bɔku pikchɔ dɛn, i go fayn fɔ ɛp Gridzy fɔ bil di grid fast fast.

Fɔ mek yu nɔ Jomp Imajin dɛn

Gridzy rili nid di aspek ratio fɔ ɔl di pikchɔ dɛn fɔ kɔl di grid. Dɛn tru tin ya kin mek dɛn jomp ɛlimɛnt dɛn if sɔm pikchɔ dɛn rɛdi ɛn ɔda wan dɛn nɔ rɛdi. Di mɔ pikchɔ dɛn de, na di mɔ dis ifɛkt kin mek pɔsin vɛks.

Fɔ mek dis biev nɔ apin, jɔs sɛt width ɛn height atribyut fɔ ɔl img ɛlimɛnt dɛn. I impɔtant fɔ sɛt di kɔrɛkt valyu fɔ ɛni wan pan di pikchɔ dɛn, if nɔto dat, di pikchɔ dɛn go chenj. Di kɔrɛkt valyu dɛn na di ɔrijinal wit ɛn ayt fɔ di rispektiv pikchɔ:

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

Afta dat Gridzy kin kɔl di grid wantɛm wantɛm we i nɔ nid fɔ no di rial saiz dɛn fɔ di pikchɔ dɛn.

Les Lod we de lod

Fɔ lod ɔl di pikchɔ dɛn we de na di visible viewport, jɔs fala dɛn step ya:

  1. Insayt width ɛn height atribyut dɛn lɛk aw dɛn tɔk bɔt am ɔp (mek shɔ se yu yuz di kɔrɛkt valyu dɛn)
  2. Riples ɔl src atribyut dɛn wit data-gridzylazysrc lɛk aw dɛn sho dɔŋ ya (if yu gɛt srcset atribyut dɛn bak, riples dɛn wit 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>

Afta dɛn step ya di pikchɔ dɛn go lod jɔs afta dɛn de nia ɔ insay di viewport.

Prɔses Indikɛtɔ

Di prɔses indikɛtɔ na di smɔl animated aykɔn we de apia we di pikchɔ de lod. If yu yuz kapshɔn & skin , di prɔses indikɛtɔ go sho ɔtomɛtik wan. If nɔto dat, yu nid fɔ ajɔst sɔm tin dɛn:

  1. Put ɛni img ɛlimɛnt insay wan div ɛlimɛnt
    (ɔ insay ɛni ɔda ɛlimɛnt – si sɛmantik HTML fɔ mɔ)
  2. Ad di klas gridzyImage to ɛni img ɛlimɛnt
<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>

Afta dat yu fɔ si di prɔses indikɛtɔ dɛn if di pikchɔ dɛn tek tɛm fɔ lod.

Filta dɛn

Filta dem na Gridzy na priti simpul bot pawaful. I nɔ mata us kayn filta yu nid, i go rili bi se i go rili bi. Ɔl wetin yu nid na, smɔl CSS ɛn sɔm HTML fɔm ɛlimɛnt dɛn ...

Na dis na wan ɛgzampul we de wok:

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

Mek Wi Bil Am Step by Step

1. Fɔs wi nid di usual HTML strɔkchɔ fɔ Gridzy ɛn sɛt klas nem fɔ ɔl di galari aytem dɛn so wi kin filta dɛn afta dat

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

Insay dis ɛgzampul wi de yuz wan klas nɔmɔ fɔ ɛni ɛlimɛnt. Bɔt yu kin sɛt bɔku klas dɛn bak fɔ wan ɛlimɛnt, if da ɛlimɛnt de fɔ bi tin we pɔsin kin fɛn tru bɔku filta dɛn.

2. Dɔn wi ad sɔm bɔtin dɛn we wi kin yuz fɔ chenj di filta dɛn da tɛm de

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

Insted of di bɔtin dɛn, yu kin yuz ɔda fɔm ɛlimɛnt dɛn bak lɛk chɛkbɔks, redio bɔtin dɛn, sɛlɛkɛt fil dɛn ɛn ɔda tin dɛn.

As yu si, di valyu dɛn fɔ di bɔtin dɛn na ɔspitul CSS sɛlɛktɔ dɛn. As wi dɔn, if yu klik da kayn bɔtin de, i go sho di pikchɔ dɛn we mach da CSS sɛlɛktɔ de. Teknikli i jɔs de sɛt di filter opshɔn to dis valyu.

Yu kin yuz bak bɔku mɔ kɔmpleks sɛlɛktɔ dɛn. Fɔ ɛgzampul :not(.animals) go wok bak, ɛn bak .animals.people ɛn .animals, .people .

3. Las wan, wi de kapsul di bɔtin dɛn insay wan div kɔntena ɛn tay dɛn to di Gridzy galari, bay we wi sɛt di filterControls opshɔn:

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

As yu si, wi de yuz bak wan CSS sɛlɛktɔ fɔ di filterControls opshɔn. Di div kɔntena wit di id atribyut nɔmɔ de sav fɔ mek di bɔtin dɛn izi fɔ pik via da CSS sɛlɛktɔ de.

Na dat na so!

If yu lɛk JavaSkript sɔlvishɔn, chɛk di API .

API

Pan ɔl we Gridzy gɛt in yon API, bɔku tin dɛn kin du witout am, jɔs bay we dɛn de manipul di DOM. Gridzy go notis am ɛn ajɔst di grid. Bɔt wan API we rili pawaful de bak ...

Manipul di DOM

Fɔ ɔl di Dokumɛnt Ɔbjɛkt Mɔdel (DOM) manipuleshɔn dɛn wi fɔs nid di kɔntena ɛlimɛnt:

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

Ad Pikchɔ dɛn

I impɔtant fɔ ful-ɔp fɔ bil ɛn ful-ɔp di nyu pikin ɛlimɛnt bifo yu ad am to di kɔntena ɛlimɛnt. If nɔto dat, Gridzy nɔ go ebul fɔ no di kɔrɛkt dimɛnshɔn dɛn.

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

Rimov Pikchɔ dɛn

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

Chenj di tin dɛn we yu kin pik

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

Mɔ bɔt fɔ manipul di DOM yu kin fɛn na MDN wɛb dɔks . I gɛt bak wan Introdyushɔn to di DOM we de.

API we gɛt prɔpati

Fɔ yuz di API, wi fɔs nid di Gridzy instans, we na bind to di Gridzy kɔntena ɛlimɛnt:

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

Gɛt Opshɔn

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

Gɛt Ɔl di Opshɔn dɛn

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

Sɛt di Opshɔn dɛn

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

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

Aplay Filta fɔ yuz am

Fɔ aplay filta na jɔs fɔ sɛt di opshɔn filter we kin bi ɛni valid CSS sɛlɛktɔ:

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

Add Kɔlbak Fɔnkshɔn dɛn

DƐPRƐKƐT frɔm di vɛshɔn 2.4.0
Yuz di mɔdan ɛn mɔ fleksibul Ivint dɛn insted. Si di nɛks pat fɔ no mɔ bɔt dis.

Gridzy.js 2 de sɔpɔt sɔm opshɔn dɛn fɔ kɔl bak fɛnshɔn dɛn. Dɛn kin sɛt dɛn nɔmɔ tru di prɔpriet API, bɔt jɔs lɛk ɔda opshɔn dɛn:

// 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.
  }
});
Tɔk bɔt
onBeforeOptionsChangedKɔlbak fɛnshɔn we dɛn kɔl dairekt bifo yu sɛt opshɔn dɛn.
onOptionsChangedKɔlbak fɛnshɔn we dɛn kin kɔl dairekt afta yu dɔn sɛt opshɔn dɛn.
onBeforeRenderKɔlbak fɛnshɔn we dɛn kin kɔl dairekt bifo dɛn rɛnd.
onRenderKɔlbak fɛnshɔn we dɛn kin kɔl dairekt afta dɛn dɔn rɛnd.

Yuz di Ivint dɛn

sins di vɛshɔn 2.4.0

Yu kin yuz Gridzy ivin dɛn jɔs lɛk aw yu kin yuz JavaSkript ivin dɛn:

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

Sɔm ivin dɛn de faya pan di Gridzy kɔntena ɛlimɛnt ɛn ɔda ivin dɛn de faya pan di wan wan aytem ɛlimɛnt dɛn insay di kɔntena ɛlimɛnt.

Ivent dɛn we dɛn faya pan di Gridzy kɔntena ɛlimɛnt:

Tɔk bɔt
gridzyBeforeInitFaya bifo galari initializayshɔn.
gridzyInitFaya afta galari initializayshɔn.
gridzyBeforeOptionsChangedFaya bifo yu sɛt opshɔn dɛn.
gridzyOptionsChangedFaya afta yu dɔn sɛt opshɔn dɛn.
gridzyBeforeRenderFaya bifo dɛn rɛnd.
gridzyRenderFaya dɛn afta dɛn dɔn rɛnd.
If yu mis ɛni ivent ya, duya sɛn sɔpɔt rikwest .

event.target de gi di Gridzy kɔntena ɛlimɛnt.
event.detail.instance de gi di Gridzy instans.

Ivent dɛn we dɛn faya pan aytem ɛlimɛnt dɛn:

Tɔk bɔt
gridzyItemBeforeInitFaya bifo aytem initializayshɔn.
gridzyItemInitFaya afta aytem initializayshɔn.
gridzyItemLoadingFaya we di tin bigin fɔ lod.
gridzyItemReadyFaya we di aytem rɛdi fɔ grid kɔlkyulɛshɔn. So dɛn no di aspek rishɔ, bɔt di pikchɔ kin stil de lod.
gridzyItemCompleteFaya we di aytem imej dɔn ful-ɔp.
If yu mis ɛni ivent ya, duya sɛn sɔpɔt rikwest .

event.target de gi di rispektiv aytem ɛlimɛnt.
event.detail.instance de gi di Gridzy instans.

API – Globɛl

Sɔm fɛnshɔn dɛn de we indipɛndɛnt frɔm Gridzy instans dɛn. So wi nɔ nid fɔ gɛt instans bifo.

Gɛt Difɔlt Opshɔn

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

Gɛt Ɔl di Difɔlt Opshɔn dɛn

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

Sɛt Difɔlt Opshɔn dɛn

Dis nɔ de sɛt di opshɔn dɛn fɔ ɔl di Gridzy instans dɛn we dɛn dɔn ɔlrɛdi initialize, bɔt i de difayn di bies fɔ nyu instans dɛn. Bɔt if wan opshɔn fɔ wan instans we dɔn de go riset tru di valyu null , i go yuz di nyu difɔlt valyu.

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

Yu kin yuz dis fɔ sɛt opshɔn dɛn ɔlsay na di wɔl, if yu kɔl am bifo DOM rɛdi. So yu nɔ go nid fɔ sɛt opshɔn dɛn as atribyut dɛn igen.

Ɔtomatism dɛn

As lɔng as ɔl di ɔtomatik dɛn na Gridzy.js 2 de aktif, nid nɔ de fɔ di we dɛn we de dɔŋ ya. Bɔt dɛn kin swich ɔf di ɔtomatik dɛn fɔ yuz Gridzy insay wan mɔ tradishɔnal we:

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

Sɔm pan dɛn opshɔn ya nɔ kin sɛt tru data-gridzy- atribyut ɔ tru setOptions() , bikɔs ɔf lɔjik rizin dɛn:

Difɔlt ValyuTɔk bɔt
autoInitOnDomReadytrueDetekt ɛlimɛnt dɛn wit klas gridzy pan pej lod ɛn initialize dɛn.

Setabl via Gridzy.setDefaultOptions()
autoInitOnDomMutation
MutationObserver we de wok fɔ di wɔl		trueDetekt nyu elemɛnt dɛn wit klas gridzy as soon as dɛn apia na di DOM ɛn initialize dɛn. (ɛgz. pan yuz pej transishɔn dɛn)

Setabl via Gridzy.setDefaultOptions()
autoSyncChildListMutation
MutationObserver we de wok fɔ di wɔl		trueI de no if dɛn ad ɔ pul di pikin ɛlimɛnt dɛn (imej dɛn), ɛn i de ɔpdet di grid ɔtomɛtik wan.

Setabl via data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
useOptionAttributestrueDifayn if di data-gridzy- atribyut dɛn jɔs de yuz ɔ nɔ de yuz am. If dis na false opshɔn dɛn kin sɛt ɔl tru di prɔpriet API.

Setabl via new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncAttributesMutation
MutationObserver we de wok fɔ di wɔl		trueDetekt chenj dɛm pan data-gridzy- atribyut dɛm, ɛn ɔpdet di grid ɔtomɛtik wan. Dɔn bak, i de no if dɛn ad ɔ pul di gridzyAnimated klas ɛn if style atribyut chenj dɛn apin. If useOptionAttributes na false , i detekt ɔl style atribyut chenj dɛn.

Setabl via data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncChildClassMutation
MutationObserver we de wok fɔ di wɔl		trueDetekt chenj dεm pan class atribyut dεm fכ כl di pikin εlimεnt dεm (imej dεm). Rilevɛns bɔt filta dɛn.

Setabl via data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncImageMutation
MutationObserver we de wok fɔ di wɔl

sins di vɛshɔn 2.5.0		trueDetekt chenj dɛm fɔ src atribyut dɛm fɔ ɔl di imej dɛm. I rili impɔtant we dɛn yuz am wit Riakt ɔ laybri dɛn we tan lɛk dat.

Setabl via data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoRenderOnResize
RisayzObsava

sins di vɛshɔn 2.6.0		trueDetekt chenj dɛn na di ɛlimɛnt wit. Rilevɛns bɔt rispɔnsiv dizayn. (Bifo vɛshɔn 2.6.0 dɛn bin de yuz wan winda risayz ivin lisin)

Setabl via data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()

Initialize wit yu an

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

Distrɔy di Instans

Roughly se, di opozit fɔ initialize Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sink Pikin List wit yu an

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

Sink wan Singl Pikin Ɛlimɛnt wit Manually

Bɔku tɛm, dɛn nɔ kin nid am, pas nɔmɔ if i nɔ kin apin so ɔltɛm.

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

Sink Atribyut dɛn wit yu an

Notis se useOptionAttributes opshɔn fɔ bi true fɔ dis.

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

Fɔs Rɛndarin

Bɔku tɛm, dɛn nɔ nid am, ilɛksɛf dɛn dɔn ɔf ɔl di ɔtomatik dɛn

gridzyInstance.render();