Gridzy.Gallery

webNuer

Bärciɔn 2.x

Kä wɛbthaay ɛmɔ ca jɛ nyɔk kɛ loc kɛ thokdɛ kärɔa. Mi te kɛ mi ci jiäk, guic warɛgakni tin ca gɔ̱r kɛ thok Liŋli̱thni.

La̱tdɛ min thi̱a̱k

La̱tdɛ Gridzy files kä server du kä mat kɛ kä wɛbthay du (ni ciaŋ te rɛy gua̱th in te nhial):

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

Cuɛ HTML kɔɔd mat thi̱n (ɛni̱ gua̱a̱th rɛy pua̱a̱nydɛ):

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

Ɛ jɛn! Nɔmɔ ɛ cäät mi̱ lät kɛɛliw. /Thiɛlɛ ini̱ciali̱thɛciɔn mi̱ dɔ̱ŋ mi̱ görkɛ.

Kɔnpi̱e̱gi̱rɛciɔn

Kä duɔ̱ɔ̱p in thia̱k ɛlɔ̱ŋ kɛ riali̱ Gridzy i̱kä ɛ, kɛ läthdɛ lät kärɔa kɛ HTML attributeni̱. Ji̱n go̱o̱ri ɣöö bi̱ ciööt tin ca kuany kulɛ tok kɛ data-gridzy- . Bä, kɛ riali̱ spaceBetween kä min ca kuany, matdɛ ni̱ 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>

Kä tin di̱t tin ca kuany

Di̱puɔlt Ba̱li̱öLɛyni kä duɔ̱r
animatetrueLatdɛ mi̱ ba ani̱mëcini̱ la̱t mi̱ ci̱ gi̱ri̱d rɔ gɛr (cäät, mi̱ ca di̱tdɛ gɛr kä wär-nyiini̱ bröwthɛr kiɛ mi̱ ca pi̱li̱tɛr la̱th).
layoutjustifiedLatdɛ min ca la̱t kɛ layout. Griddhi̱.js 2 luäkɛ lät rɛw ti̱ gööl justified kɛnɛ waterfall . Kɛl kä kɛ tekɛ parami̱ti̱ri̱ ti̱ ca mat thi̱n ti̱ ca mat thi̱n, tin deri jek piny kä tɛbol ɛmɛ.
filter*Latdɛ thurɛ min ba nyoth. Ɛni̱ CSS-thɛlɛktɔr dɔ̱ŋ bɛ lät cie ba̱li̱ö ɛn wa̱nɛ. Ni̱ ciaaŋ la jɛ laa la̱thkɛ kärɔa kɛ rɛy filterControls (guic min dɔ̱ŋ).
Guic Pi̱li̱tɛri̱
filterControlsLatdɛ min la puɔm ɛlɛmɛni̱ tin dë la̱t kɛ pi̱li̱tɛr thurɛni̱. Ɛni̱ CSS thɛlɛktɔr, min kuany HTML puɔm ɛlɛmɛni̱, dɔ̱ŋ bɛ lät cie ba̱li̱ö ɛn wa̱nɛ.
Guic Pi̱li̱tɛri̱
autoConsiderScrollBarstrueMi̱ görkɛ ɣöö ba bäär in te thi̱n ŋa̱c mi̱ ci̱ i̱thkrɔl barni̱ jɔɔc kiɛ ci̱kɛ bath. Jɛn la la̱thkɛ lät ni̱ ciaaŋ ɛn ɣöö ba päl kä true ɛ ni̱ mi̱ ci̱ automatism ɛmɛ riɛk nööŋ.

Justified Layɔ̱t Ɣɔpcini̱

Di̱puɔlt Ba̱li̱öLɛyni kä duɔ̱r
autoFontSizefalseKä jɛn kärɔa bɛ font-size min tekä bok kɛl gɛr kɛ pek bok ëë nhiam. Kɛ di̱puɔlt kä font-thai̱dh pröpörti̱ /ka̱nɛ la̱th ɛ jɔc.
desiredHeight190Latdɛ bär in görkɛ kä elɛmɛni̱ röwni̱. Kä bäärädɛ min thuɔ̱k bɛ kulɛ tekä bäärädɛ min te thi̱n kɛnɛ ɛlɛmɛni̱ tin te rɛy röwä.
hideOnMissingImagetrueHides boxes tin tekɛ thurɛni ti /ca de luäŋ kɛ la̱th.
spaceBetween4Latdɛ kam ɛlɛmɛni̱ rɛy pi̱dhi̱li̱.
lastRowAlign
ni̱ mëë cua berciɔn 2.3.0		justifiedLatdɛ ciɛŋ tin te rɛy ro̱wä min jɔak. Ba̱liömmi̱ tin ca nhɔk kɛn kɛ left , center , right kɛnɛ justified .
singleRowAlign
ni̱ mëë cua berciɔn 2.3.0		justifiedLatdɛ ciɛŋ mi̱ tekɛ ro̱w kɛl kärɔa. Ba̱liömmi̱ tin ca nhɔk kɛn kɛ left , center , right kɛnɛ justified .
fillLastRow
ni̱ mëë cua berciɔn 2.1.0		trueCA WOC ni̱ mëë caa berciɔn 2.4.0 (Caa jɛ lo̱k ni̱ mëë caa berciɔn 2.3.0 )
Riali̱ thurɛni̱ i̱kä kɛ ɣöö bi̱ ro̱w in jɔak kulɛ thia̱a̱ŋ kɛɛliw. Mi̱ go̱o̱ri ɣöö bi thurɛni̱ mat thi̱n kɛ ta̱a̱ mi̱ gɛɛrɔ, jɛn derɛ la cär mi̱ gɔaa ɛn ɣöö deri̱ nɛmɛ woc.
/Cɛ tekɛ mi̱ cɛ gɛr kä röwni̱ kɛl(guic fillSingleRow ).
fillSingleRow
ni̱ mëë cua berciɔn 2.1.0		trueCA WOC ni̱ mëë caa berciɔn 2.4.0 (Caa jɛ lo̱k ni̱ mëë caa berciɔn 2.3.0 )
Mi tekɛ ri̱w kɛl kärɔa, jɛn bɛ thurɛni̱ riali̱kä kɛ ɣöö bi̱ ri̱w ɛmɔ thia̱a̱ŋ kɛɛliw ni ciaŋ. Mi derɛ tuɔk ɛn ɣöö te kɛ thurɛ kɛl kiɛ rɛw kärɔ̱ rɛy thurɛkä, derɛ gɔaa ɛn ɣöö deri nɛmɛ woc.

Waterfall Layɔ̱t Opcini̱

Di̱puɔlt Ba̱li̱öLɛyni kä duɔ̱r
autoFontSizefalseKä jɛn kärɔa bɛ font-size min tekä bok kɛl gɛr kɛ pek bok ëë nhiam. Kɛ di̱puɔlt kä font-thai̱dh pröpörti̱ /ka̱nɛ la̱th ɛ jɔc.
desiredWidth250Latdɛ bäär in görkɛ kä kɔlömni̱. Kä bäär in thuɔ̱k bɛ kulɛ tekä bäär in te thi̱n kɛnɛ nämbär kɔlömni̱.
hideOnMissingImagetrueHides boxes tin tekɛ thurɛni ti /ca de luäŋ kɛ la̱th.
horizontalOrderfalseLatdɛ i̱ kɛn ɛlɛmɛni̱ kɛn cua kɛ la̱th ɛ la ɛlɛmɛn kɛl rɛy kɔlömni̱ kɛl ɛ tokɛ kui̱c caam ɛ wä kä cuec, kɛ kɔrɛ bɛ cu tok ɛ nyɔk rɛy kɔlömni̱ tin te kui̱c caam ɛlɔ̱ŋ min cuŋ kärɔa min bi̱ kɔlömni̱ tekɛ gua̱a̱th mi̱ di̱i̱t. Kɛ ta̱a̱dɛ min ca la̱th thi̱n kɛn ɛlɛmɛni̱ ba kɛ la̱th ni̱ ciaaŋ rɛy kɔlömni̱ min kuiyni̱ jɛn kä bärɛ.
spaceBetween4Latdɛ kam ɛlɛmɛni̱ rɛy pi̱dhi̱li̱.
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.

Kä Adbanth Opcini̱ ti̱ ŋuan

Kɛ kui̱ kä ti̱ ŋuan ti̱ ci̱ räth, guic API .

Themantik HTML

Kä HTML i̱thtra̱kciɛr min thi̱a̱k kä Gridzy ɛ jɛn nɛmɛ:

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

Duŋdɛ ɣöö, Gridzy ɛ mi̱ la gɛɛrɛ rɔ ɛlɔ̱ŋ kä deri̱ lät kɛ HTML i̱thtra̱kciɛr mi̱ dɔ̱ŋ. Tëëkɛ ti̱ tɔt ti̱ dë car:

  • Gat kɛl kä ɛlɛmɛn in te rɛydɛ cuŋɛ la duɔ̱ɔ̱r kɛl rɛy gi̱ri̱dä.
  • Kɛn kɔntɛynɛr ɛlɛmɛn kɛnɛ gaatkɛ de kɛn ɛni̱ ta̱a̱ tag, ce̱tkɛ ul kɛnɛ li (carɛ kärɔa ɛn ɣöö ba bröwthɛr di̱puɔltni̱ nyɔk kɛ lätni̱).
  • Mi̱ ɛ img elɛmɛn /ciɛɛ gat mi̱ jɔc kärɔa, jɛn bɛ go̱ri̱ ki̱lɛth gridzyImage .

Bä nɛmɛ bä lätdɛ HTML i̱thtra̱kciɛ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>

Kä ɛlɔ̱ŋ mi̱ go̱o̱ri ɣöö biɛ mat thi̱n, go̱o̱ri HTML i̱thtra̱kciɛr mi̱ ci̱ rɔ rep. Mi go̱ri ŋäc mi thuɔ̱k kɛ kui̱dɛ, guic Captions & Skins .

Kapcini̱ & I̱thkini̱

Mi go̱ri ɣöö bi captions mat kä gallery du, biɛ dhil lat ɛn ɣöö biɛ nyoth. Kɛ kui̱c ɛmɔ, tha̱a̱ŋ guɔ̱pni̱ ti̱ ca kɔn riali̱kä kɛn tekɛ thi̱n. Kä skin kɛl tekɛ CSS file. Ji̱n biɛ dhil mat kä pai̱li̱ ti̱ti̱ rɛy matdä kä pai̱li̱ Gridzy tin di̱t (ni̱ ciaaŋ rɛy gua̱th in te wi̱i̱dɛ):

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

Ɛ wä nhiam go̱o̱ri HTML i̱thtra̱kciɛr mi̱ ci̱ räth:

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

Mi ji̱n diɛɛr kɛ kui̱ HTML i̱thtra̱kciɛrä, guic Semantic HTML .

Kɛ kui̱ kä min ca gɔ̱r piny deri̱ lät kɛ ɛni̱ ta̱a̱ tag, guic ɛ gɔaa ɛn ɣöö tekɛ ki̱lɛth gridzyCaption . Kä img elɛmɛn go̱o̱rɛ ki̱lɛth gridzyImage .

Kä cäät in te nhial nyothɛ ji̱ guɔ̱p gridzySkinClassic . Mi go̱ri ɣöö bi lät kɛ mi dɔ̱ŋ, gɛri ciöt gupä kɛ kɛl kä ti̱ti̱:

Cua Guɔ̱pni̱ mat thi̱n

Ki̱lɛthni̱ tin te thi̱n
gridhi̱ I̱thkinBlank
ɛ gua̱a̱th mi̱ gɔaa kɛ tuk kä ɣöö deri̱ puɔ̱nydu cak
layp prebiew		gridzySkinBlank
gridzySkinClassic
layp prebiew		gridzySkinClassic
gridzySkinClassicLight(Caa jɛ lo̱k ni̱ mëë caa berciɔn 2.6.0)
gridzySkinFullOverlay
tëk prebiew		gridzySkinFullOverlay
gridzySkinFullOverlayLight(Caa jɛ lo̱k ni̱ mëë caa berciɔn 2.6.0)
gridzySkinLift
layp prebiew		gridzySkinLift
gridzySkinLiftLight(Caa jɛ lo̱k ni̱ mëë caa berciɔn 2.6.0)
gridzySkinMagnifier
dhuum pa̱ŋcinali̱ti̱ /ka̱nɛ mat thi̱n
layp prebiew		gridzySkinMagnifier
gridzySkinMagnifierLight(Caa jɛ lo̱k ni̱ mëë caa berciɔn 2.6.0)

Kä i̱thkinni̱ diaal tin te nhial görkɛ ni̱ CSS pai̱l kärɔa, duŋni̱ ɣöö tekɛ i̱thkinni̱ kɔ̱kiɛn ti̱ görkɛ JavaScript pai̱l bä:

<link rel="stylesheet" href="gridzy/skins/gridzySkinBlur/style.min.css" />
<script src="gridzy/skins/gridzySkinBlur/script.min.js"></script>
Ki̱lɛthni̱ tin te thi̱n
gridzySkinBlur
/Cɛ lät rɛy IE
layp prebiew		gridzySkinBlur
gridzySkinBlurLight(Caa jɛ lo̱k ni̱ mëë caa berciɔn 2.6.0)
gridzySkinCard
tëk prebiew		gridzySkinCard
gridzySkinCardLight(Caa jɛ lo̱k ni̱ mëë caa berciɔn 2.6.0)

I̱thkin Öpcini̱

Ni̱ mëë ci̱ berciɔn 2.6.0 cuɛ tekɛ Opcini̱ ti̱ ba riali̱kä kɛ kui̱ kä tin ca la̱th rɛydɛ. Ɛ wä kɛ ta̱a̱ pua̱a̱ny in ca lɛy deri̱ biɛl bɛkgi̱rɔɔn, biɛl text kɛnɛ biɛl text shadow la̱th thi̱n. Ji̱n biɛ dhil la̱t kärɔa kɛ CSS min ca la̱th lät cie min guici jɛ ɛn wa̱nɛ:

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

Guic ba̱riabɔli̱ tin luäk kɛnɛ di̱puɔlt ba̱liömmi̱ kɛ kui̱ gupä kɛl ɛn wa̱nɛ:

gridzySkinClassic
Ba̱riabɔlDi̱puɔlt Ba̱li̱öLär
--backgroundrgba(0, 0, 0, .7)jakɛ ɛni̱ CSS bɛkgi̱rɔɔn ba̱li̱ö
--colorrgb(255, 255, 255)jakɛ ɛni̱ CSS biɛl ba̱li̱ö
--text-shadownonejakɛ ɛni̱ CSS text-ti̱e̱e̱p ba̱li̱ö
gridzySkinFullOverlay
Ba̱riabɔlDi̱puɔlt Ba̱li̱öLär
--backgroundrgba(0, 0, 0, .7)jakɛ ɛni̱ CSS bɛkgi̱rɔɔn ba̱li̱ö
--colorrgb(255, 255, 255)jakɛ ɛni̱ CSS biɛl ba̱li̱ö
--text-shadownonejakɛ ɛni̱ CSS text-ti̱e̱e̱p ba̱li̱ö
gridzySkinLift
Ba̱riabɔlDi̱puɔlt Ba̱li̱öLär
--backgroundrgba(0, 0, 0, .7)jakɛ ɛni̱ CSS bɛkgi̱rɔɔn ba̱li̱ö
--colorrgb(255, 255, 255)jakɛ ɛni̱ CSS biɛl ba̱li̱ö
--text-shadow0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)jakɛ ɛni̱ CSS text-ti̱e̱e̱p ba̱li̱ö
gridzySkinMagnifier
Ba̱riabɔlDi̱puɔlt Ba̱li̱öLär
--backgroundrgba(0, 0, 0, .7)jakɛ ɛni̱ CSS bɛkgi̱rɔɔn ba̱li̱ö
--colorrgb(255, 255, 255)jakɛ ɛni̱ CSS biɛl ba̱li̱ö

Guɔ̱p ɛmɛ /cɛ --text-shadow luäk

gridzySkinBlur
Ba̱riabɔlDi̱puɔlt Ba̱li̱öLär
--backgroundrgba(0, 0, 0, .7)jakɛ ɛni̱ CSS bɛkgi̱rɔɔn ba̱li̱ö
--colorrgb(255, 255, 255)jakɛ ɛni̱ CSS biɛl ba̱li̱ö
--text-shadow0 0 10px rgb(0, 0, 0)jakɛ ɛni̱ CSS text-ti̱e̱e̱p ba̱li̱ö
gridzySkinCard
Ba̱riabɔlDi̱puɔlt Ba̱li̱öLär
--backgroundrgba(0, 0, 0, 1)jakɛ ɛni̱ CSS bɛkgi̱rɔɔn ba̱li̱ö
--colorrgb(255, 255, 255)jakɛ ɛni̱ CSS biɛl ba̱li̱ö
--text-shadownonejakɛ ɛni̱ CSS text-ti̱e̱e̱p ba̱li̱ö

Kɛn i̱thkini̱ diaal tin ca lat ni̱ wal luäk kɛn ni̱ thi̱mpil tɛkth kapcini̱ kärɔ̱. Ji̱n deri ca̱pdu cak kärɔa kä deri ca̱pdu jakä bum. Ɣän thiëcä ji̱ i̱ guic I̱thtai̱l Gridzy .

I̱thta̱y Gri̱dhi̱

Mi thiɛlɛ guɔ̱p mi ca rialikä mi ro̱ŋ kɛ min go̱ri, deri ca̱pdu la̱th kärɔa.

Duɔ̱ɔ̱p in thia̱k ɛ ɣöö biɛ kɔp kɛ nhiam kɛ skin in te thi̱n kä biɛ la̱th kä min go̱o̱ri. Kä min ca lat ni̱ wän kä i̱thkin gridzySkinBlank bɛ cu nööŋni̱ puɔndɛciɔn mi̱ gɔa ɛ päär bä kɛ dɔkumɛntɛciɔn mi̱ gɔa rɛy CSS pai̱li̱:

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

Rɛy CSS pai̱li̱ bi̱ ji̱ ki̱lɛthni̱ gridzySkinBlank , gridzyImage kɛnɛ gridzyCaption jiek. Gridzy puɔ̱nydɛ /cɛ ki̱lɛthni̱ ti̱ti̱ go̱r. Kɛn la̱tkɛ kɛ kui̱ ca̱a̱pni̱ kärɔ̱ kä kɛ kui̱c ɛmɔ deri kɛ woc kiɛ deri ciötdiɛn nyɔk kɛ loc mi̱ go̱o̱ri jɛ.

Ɛ nyɔk bä bi̱ ji̱ CSS ki̱lɛth gridzyItem jiek. Gridzy cɛ ki̱lɛth ɛmɛ la̱th kärɔa ɛ la gaat diaal tin tä kä ɛlɛmɛn in tä rɛydɛ. Bä, deri lät kɛ ki̱lɛth ɛmɛ kɛ ca̱a̱p ŋɔaani̱ tin te rɛy ga̱lɛri̱du.

Mind Tin Di̱t

  1. Kä min te rɛydɛ bɛ yi̱k tekɛ luɔt kɛɛliw. Guicɛ jɛ ɛn ɣöö di̱t elɛmɛnä bɛ rɔ gɛr ɛ jɔc. La̱tdɛ perthäntig ba̱liömmi̱ ni̱ ɣöö bi̱ kɛnɛ pi̱dhɛl ba̱liömmi̱. Kä guic kä Gridzy layout opciɔn autoFontSize , min mat font-thai̱dh kä di̱tdɛ kä item bok.
  2. Kä duɔ̱ɔ̱r kɛl bɛ yi̱k tekɛ athpɛkt rɛci̱ö mi̱ ca lat ɛ gɔaa. Kä athpɛkt rɛci̱ö duŋ ŋɔaani̱ /cɛ bi̱ met rɔ gɛr kä go̱o̱rɛ ɣöö ba gi̱ri̱d kuɛn. Bä mi̱ ci̱ duɔ̱ɔ̱r /thiɛlɛ mi̱ ca lat ɛ gɔaa kä athpɛkt rɛci̱ö, riali̱dɛ i̱kä kɛ tet (c.d. via css).

Rɛy tha̱a̱ŋ gua̱thni̱, jɛn dɔ̱ŋ bɛ thia̱k kɛ ca̱a̱p ŋɔaani̱ tin te rɛydɛ ɛ ŋot /ken Gridzy ni̱ tok. Kämni jɛ raar kä ki̱lɛth gridzy kiɛ Gridzy jabascript pai̱l kɛ gua̱a̱th mi̱ tɔt kɛ kui̱ kä nɛmɛ.

Ɛ jɛn! Ɛ jɛn min go̱o̱ri ɣöö bi puɔ̱nydu kulɛ täth. Ri̱w kä tin ca kɔn lat ni̱ wal /ci̱kɛ lät ɛlɔ̱ŋ mi̱ läny nɛmɛ.

Duŋni̱ ɣöö dɔ̱ŋ bɛ tekɛ ti̱ ŋuan mi̱ go̱o̱ri jɛ ...

Adbanth I̱thkini̱

Gridzy lätdɛ kɛɛ CSS ki̱lɛthni̱ ti̱ ŋuan mi̱ läny gridzyItem kärɔa. Kä ti̱ ŋuan kä kɛ ba kɛ la̱th kärɔ̱ kä deri kɛ la̱th lät kɛ kui̱ ca̱a̱pni̱ bä.

Kilathni̱ Kɔntɛynɛrä tin Di̱t

Ciöt KilathäLɛyni kä duɔ̱r
gridzy
kɛ läthdɛ lät kɛ tet		Gridzy bɛ ɛlɛmɛni̱ jiek kärɔa kɛ ki̱lɛth ɛmɛ kɛnɛ ɣöö bɛ kɛ tok.
gridzyAnimatedBɛ rɔ yiath piny kärɔa mi̱ ci̱ opciɔn animate ɛ true . Mi̱ ca ki̱lɛth ɛmɛ la̱th kɛ tet, ɛn opciɔn animate bɛ cu ben true bä (ɛ ni̱ mi̱ ca la̱th ɛ jɔc i̱ false ).

Ai̱tɛm Kila̱thni̱

Ciöt KilathäLɛyni kä duɔ̱r
gridzyItemBɛ yiath piny kɛ gua̱a̱th mi̱ tɔt mi̱ ci̱ ŋɔak tok kɛ tuk la̱tdɛ. /Cɛ bi met woc.
gridzyItemInitializingBɛ yiath piny kɛ gua̱a̱th mi̱ tɔt mi̱ ci̱ ŋɔak tok kɛ tuk la̱tdɛ. Kä ba gɛr ɛ gridzyItemReady kɛ gua̱a̱th mi̱ tɔt mi̱ ci̱ ŋɔak thuɔ̱k kɛɛliw. Lotdɛ ni̱ ɣöö /ciɛ thurɛni̱ tin ca thiäŋ kɛɛliw (guic gridzyItemLoading ), duŋni̱ ɣöö ɛn duɔ̱ɔ̱r cɛ rɔ riali̱kä kɛ ɣöö bɛ kulɛ jɔɔc.
gridzyItemReadyBɛ gridzyItemInitializing gɛr kɛ gua̱a̱th mi̱ tɔt mi̱ ci̱ ŋɔak kulɛ tok kɛɛliw. /Cɛ bi met woc. Lotdɛ ni̱ ɣöö /ciɛ thurɛni̱ tin ca thiäŋ kɛɛliw (guic gridzyItemComplete ), duŋni̱ ɣöö ɛn duɔ̱ɔ̱r cɛ rɔ riali̱kä kɛ ɣöö bɛ kulɛ jɔɔc.
gridzyItemLoadingBɛ yiath piny kɛ gua̱a̱th mi̱ tɔt mi̱ ci̱ ŋɔak tok kɛ tuk la̱tdɛ. Bɛ gɛr ɛ gridzyItemComplete kɛ pɛ̈th mi̱ ci̱ thurɛni̱ tin te rɛydɛ (ni̱ ciaaŋ kɛl kärɔa) ci̱kɛ thuɔ̱k kɛɛliw.
gridzyItemCompleteBɛ gridzyItemLoading gɛr kɛ pɛ̈th mi̱ ci̱ thurɛni̱ tin te rɛydɛ (ni̱ ciaaŋ ɛ kɛl kärɔa) ci̱kɛ thuɔ̱k kɛɛliw. /Cɛ bi met woc.
gridzyItemInitialToVisibleBɛ jɛ la̱th lät kɛ gua̱a̱th in ci̱ duɔ̱ɔ̱r ku thuŋ jɔɔc kɛ nhiam. Kä ba woc kɛ gua̱a̱th mi̱ tɔt mi̱ ci̱ duɔ̱ɔ̱r jɔɔc kɛɛliw.
gridzyItemVisibleKä ba la̱th lät kɛ gua̱a̱th mi̱ tɔt mi̱ ci̱ duɔ̱ɔ̱r jɔɔc kɛɛliw. Kä ba woc kɛ gua̱a̱th in ci̱ duɔ̱ɔ̱r ku thuŋ jiɛɛn.
gridzyItemVisibleToHiddenKä ba jɛ la̱th gua̱a̱thdɛ min ci̱ duɔ̱ɔ̱r tok kɛ bath. Kä ba jɛ woc kɛ gua̱a̱th mi̱ tɔt mi̱ ci̱ duɔ̱ɔ̱r ɛmɔ rɔ tɛ̱̈ɛ̱̈ kɛɛliw.
gridzyItemHiddenKä ba jɛ la̱th gua̱a̱th mi̱ tɔt mi̱ ci̱ duɔ̱ɔ̱r ɛ tɛ̱̈ɛ̱̈ kɛɛliw. Ba jɛ woc kɛ gua̱a̱th in ci̱ duɔ̱ɔ̱r ku thuŋ jɔɔc.
gridzyItemHiddenToVisibleBɛ yiath piny kɛ pɛ̈th mi̱ ci̱ duɔ̱ɔ̱r tok kɛ jɔc (ɛ ni̱ mi̱ cɛ jɔɔc kɛ nhiam – guic ki̱lɛth gridzyItemInitialToVisible ). Kä ba woc kɛ gua̱a̱th mi̱ tɔt mi̱ ci̱ duɔ̱ɔ̱r jɔɔc kɛɛliw.
gridzyItemVisibleToVisibleKä ba cu la̱th kɛ pɛ̈th mi̱ ci̱ duɔ̱ɔ̱r rɛy gi̱ri̱dä rɔ gɛr, duŋni̱ ɣöö ɛn duɔ̱ɔ̱r puɔ̱nydɛ cuɛ te thi̱n kä bɛ cu te thi̱n ɛ jɔc. Kä ba woc kɛ gua̱a̱th mi̱ tɔt mi̱ ci̱ ani̱mëciɔn min ca gɛr thuɔ̱k.

Kɛ ta̱a̱dɛ min ca la̱th thi̱n ɛn ta̱a̱ la̱tdɛ indi̱kɛtɔr kɛnɛ animëcini̱ kɛ kui̱ thurɛni̱ tin jɔc kɛnɛ tin bath kɛn cua kɛ kɔn lat ɛ Gridzy main CSS pai̱l.

Kɛn CSS ki̱lɛthni̱ ti̱ti̱ tin ca lat nhial deri̱ ca̱p in nyooth la̱tdu kɛnɛ animëcini̱ la̱t. Dare ɛ guic rɛy Gridzy main CSS pai̱l, kɛ ŋäc kä min deri̱ la̱th lät. /Thiɛlɛ dual, ŋɔak diaal ca kɛ gɔ̱r piny a gɔaa ɛn wi̱ni.

Ɣɔpti̱mai̱dhe Lödiŋ

Mi lätdi kɛ thurɛni ti ŋuan, derɛ la cär mi gɔaa ɛn ɣöö deri Gridzy luäk kɛ lätni grid kɛ pɛ̈th.

Gaŋ thurɛni̱ tin bi̱ rɔ̱ yuɔr piny

Gridzy go̱o̱rɛ ni̱ ɣöö bɛ tekɛ athpɛkt rɛci̱ö duŋ thurɛni̱ diaal kɛ kui̱ kä ɣöö bɛ grid kuɛn. Ti̱ti̱ kɛ thuɔ̱ɔ̱k la bëë raar ɛ la ti̱ ci̱ rɔ̱ yuɔr piny mi̱ ci̱ tha̱a̱ŋ thurɛni̱ rɔ̱ riali̱kä kä tha̱a̱ŋkiɛn /ka̱nɛ riali̱kä. Kä min ci̱ thurɛni̱ ŋuan thi̱n, ɛ jɛn min bi̱ naath jakä jiäk lɔcdiɛn.

Mi̱ görkɛ ɣöö ba ciɛŋ ɛmɛ gaŋ, la̱thni̱ width kɛnɛ height attributes kɛ kui̱ img elɛmɛni̱ diaal. Jɛn ɛ mi̱ gɔa ɛn ɣöö ba ba̱liö ni̱ tin lot rɔ̱ kɛ kui̱ thurɛkä kɛ̈l kɛ̈ɛ̈li̱ la̱th, mi̱ /ciɛɛ jɛn bi̱ thurɛni̱ rɔ̱ gɛr. Kä ba̱liömmi̱ tin lot rɔ̱ kɛn kɛ bär kɛnɛ bär thurɛkä min nhiam:

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

Kɛ kɔrɛ Gridzy bɛ grid kulɛ kuɛn kɛ pɛ̈th ɛ /thiɛlɛ mi̱ go̱o̱rɛ ɣöö bɛ ŋa̱c ni̱ pek thurɛkä min thuɔ̱k.

Ladhi̱ Lödiŋ

Mi̱ görkɛ ɣöö ba thurɛni̱ kulɛ la̱th kärɔ̱ tin te rɛy viewport in jɔc, guɔ̱ɔ̱r ni̱ ka̱a̱th ti̱ti̱:

  1. Cuɔ̱ŋ kɛ width kɛnɛ height ciɛŋni̱ cie min ca lat nhial(guic ɛ gɔaa ɛn ɣöö bi̱ lät kɛ ba̱liömmi̱ tin lot rɔ̱)
  2. Gua̱th src attributeni̱ diaal kɛ data-gridzylazysrc cie min ca nyoth piny (mi̱ tekɛ srcset attributeni̱ bä, riali̱ kɛ i̱kä kɛ 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>

Kɛ kɔr kä ti̱ti̱ bi̱ thurɛni̱ kulɛ ben raar kɛ pɛ̈th mi̱ ci̱kɛ thia̱k kiɛ rɛy viewport.

Prötheth Indi̱kɛtɔr

Kä prötheth indi̱kɛtɔr ɛ ani̱mëted i̱kɔn mi̱ tɔt min jɔc gua̱a̱th in te thurɛ thi̱n. Mi lätdi kɛ captions & skins , bi min nyoth ɣöö lätdi jɛ nyoth kärɔa. Kä mi̱ /ciɛ jɛn, go̱o̱ri ɣöö biɛ riali̱kä:

  1. La̱tdɛ img ɛlɛmɛn kärɔa rɛy div ɛlɛmɛn
    (kiɛ rɛy ɛni̱ ɛlɛmɛn mi̱ dɔ̱ŋ-guic themantik HTML kɛ kui̱ kä ti̱ ŋuan)
  2. Matdɛ ki̱lɛth gridzyImage kä img elɛmɛn kärɔa
<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>

Kɛ kɔrɛ biɛ dhil nɛn ɛn ɣöö tekɛ nyuuthni tin lät kɛ naath mi ci thurɛni gua̱a̱th naŋ kɛ ɣöö ba kulɛ la̱th lät.

Pi̱li̱tɛri̱

Filters rɛy Gridzy kɛ ti̱ gɔw ti̱ thi̱a̱k duŋni̱ ɣöö bumkɛ. Ɛ cäŋ ɛ pi̱li̱tɛr mi̱ di̱i̱t mi̱ go̱o̱ri, jɛn bɛ cu jɔɔc ɛlɔ̱ŋ ɛn ɣöö bɛ kulɛ ben raar. Min go̱o̱ri kärɔa ɛ, ɛ CSS mi̱ tɔt kɛnɛ HTML mi̱ tɔt mi̱ la puɔm ɛlɛmɛni̱ ...

Ɛn wa̱nɛ mɛ ɛ cäät mi̱ lät:

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

Kuanɛ jɛ Ta̱th Ka̱a̱th kɛ Ka̱a̱th

1. Kɛ nhiam banɛ jɛ go̱r ni̱ ciaaŋ HTML i̱thtra̱kciɛr duŋ Gridzy kɛnɛ thɛt ki̱lɛthni̱ kɛ kui̱ ŋɔaani̱ diaal tin te rɛy gallery kɛ ɣöö banɛ kɛ kulɛ pi̱ltɛr kɛ kɔrɛ

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

Rɛy cäätdä nɛmɛ kɔn la̱tnɛ ni̱ ki̱lɛth kɛl kärɔa kɛ kui̱ ɛlɛmɛnä kɛl. Duŋni̱ ɣöö ji̱n bä deri̱ ki̱lɛthni̱ ti̱ ŋuan la̱th kä ɛlɛmɛn kɛl, mi̱ ɛn ɛlɛmɛn ɛmɔ bɛ yi̱k jiek kɛ rɛy pi̱li̱tɛri̱ ti̱ ŋuan.

2. Kɛ kɔrɛ banɛ tha̱a̱ŋ buttonni̱ mat thi̱n min banɛ filterni̱ gɛr kɛ kɔrɛ

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

Kä min tekä buttonni̱, deri̱ lät kɛ puɔm ɛlɛmɛni̱ kɔ̱kiɛn ce̱tkɛ checkboxni̱, buttonni̱ radiö, pi̱e̱li̱ tin ca kuany kɛnɛ tin kɔ̱kiɛn.

Cätkɛ min guici jɛ, kɛn ba̱liö ni̱ tin tekä buttonni̱ kɛn ni̱ ciaaŋ CSS thɛlɛktɔri̱. Kä niɛ gua̱a̱th in ci̱ kɔn thuɔ̱k, mi̱ ci̱ kɔnɛ la̱th kä button mi̱ ce̱tkɛ nɔ bɛ thurɛni̱ tin cäät kɛ CSS selector ɛmɔ nyoth. Tekni̱kali̱ jɛn thi̱a̱k thi̱a̱k thɛtni̱ filter opciɔn kä ba̱li̱ö ɛmɛ.

Ji̱n bä deri̱ lät kɛ thɛlɛktɔri̱ ti̱ ŋuan ti̱ gööl. Cie cäätdɛ :not(.animals) bɛ lät bä, cie mi̱ cie .animals.people kɛnɛ .animals, .people .

3. Kɛ jɔakdɛ, banɛ buttonni̱ kuëŋ rɛy div kɔntɛynɛrä kä banɛ kɛ yian kä Gridzy gallery, kɛ läthdɛ kɛɛ filterControls opciɔ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>

Cätkɛ min guici jɛ, kɔn bä la̱tnɛ CSS thɛlɛktɔr kɛ kui̱ filterControls min ca kuany. Kä div kɔntɛynɛr kɛ id attribute lätdɛ kärɔa kɛ jak buttonni̱ kä thia̱k kɛ kuëny kɛ rɛy CSS thɛlɛktɛrä ɛmɔ.

Ɛ jɛn!

Mi̱ go̱o̱ri ɣöö ba JavaScript luäk, guic API .

API

Cieŋni̱ min Gridzy tëkɛ APIdɛ kärɔa, ŋɔak ti̱ ŋuan dëë kɛ la̱t ɛ /thiɛlɛ jɛ, ɛ thia̱k kɛ lätni̱ DOM. Gridzy bɛ jɛ ŋa̱c kä bɛ grid riali̱kä. Duŋni̱ ɣöö tëëkɛ API mi̱ bum ɛlɔ̱ŋ bä ...

Mani̱pulɛtiŋ kä DOM

Kɛ kui̱ Dokumɛn Öbjɛk Mödɛl (DOM) manipulɛciɔni̱ diaal kɔn kɔntɛynɛr ɛlɛmɛn go̱r kɛ nhiam:

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

Mat thurɛni̱

Ɛ mi̱ gɔaa ɛn ɣöö biɛ la̱t kɛɛliw kä biɛ thiäŋ kɛ ɛlɛmɛn gat in pay ben ɛ ŋot käni jɛ ni mat kä ɛlɛmɛn in tä rɛydɛ. Mi̱ /ciɛɛ jɛn, Gridzy /cɛ di̱mencini̱ tin lot rɔ̱ kɛ kui̱dɛ dee ŋa̱c.

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

Kämni thurɛni raar

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

Gɛri Opcini̱

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

Ri̱w ti̱ ŋuan kɛ kui̱ kä ɣöö ba DOM riali̱kä deri̱ kɛ jiek kä MDN wɛb dɔkni̱ . Kä tekɛ Introduction kɛ kui̱ DOM min te thi̱n bä.

Pröpröri̱tɛri̱ API

Mi̱ görkɛ ɣöö ba API la̱t, kɔn banɛ Gridzy inthtan go̱r kɛ nhiam, min ba yian kä Gridzy kɔntɛynɛr elɛmɛn:

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

Gör Opciɔn

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

Gör tin de kuany diaal

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

Set Opcini̱

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

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

Apply Pi̱li̱tɛr

La̱t pi̱li̱tɛrä ɛ mi̱ la la̱thkɛ ni̱ opciɔn filter min dɔ̱ŋ bɛ tekɛ ɛni̱ CSS thɛlɛktɔr mi̱ lät:

// 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ɔllbɛk Pa̱ŋcini̱

CA THƆ̱Ɔ̱L ni̱ mëë caa berciɔn 2.4.0
La̱tdɛ Eventni̱ tin pay ben kɛnɛ tin dëë lätni̱kɛ. Guic gua̱a̱th in dɔ̱ŋ kɛ kui̱ ruac ɛmɔ.

Gridzy.js 2 luäkɛ tha̱a̱ŋ ca̱pni̱ kɛ kui̱ lätni̱ kɔllbɛk. Kɛn dëë kɛ kuëŋ kärɔ̱ kɛ rɛy API in tä kɛ kuak, duŋdɛ ɣöö ciee kɛ tin kɔ̱kiɛn tin dëë kuany:

// 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.
  }
});
Lɛyni kä duɔ̱r
onBeforeOptionsChangedCallback pa̱ŋciɔn min la cɔalkɛ ɛ jɔc ɛ ŋot /ka̱nɛ ni̱ la̱th kä opcini̱.
onOptionsChangedCallback pa̱ŋciɔn min la cɔalkɛ ɛ jɔc kɛ kɔr kä mëë ca opcini̱ la̱th thi̱n.
onBeforeRenderCallback pa̱ŋciɔn min la cɔalkɛ ɛ jɔc ɛ ŋot /ka̱nɛ ni̱ la̱th lät.
onRenderCallback pa̱ŋciɔn min la cɔalkɛ ɛ jɔc kɛ kɔr kä mëë ca la̱th lät.

La̱tdɛ Ibɛni̱

ni̱ mëë cua berciɔn 2.4.0

Ji̱n deri̱ lät kɛ Gridzy i̱bɛni̱ ce̱tkɛ mi̱ cie JavaScript i̱bɛni̱ ni̱ ciaaŋ:

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

Tha̱a̱ŋ ŋɔaani̱ ti̱ ci̱ tuɔɔk cua kɛ mac kä Gridzy kɔntɛiner elɛmɛn kɛnɛ ɣöö kɔ̱kiɛn cua kɛ mac kä ɛlɛmɛni̱ nyin kɛ̈l kɛ̈ɛ̈li̱ rɛydɛ ɛn kɔntɛynɛr elɛmɛn.

Kä tëë ci̱ tuɔɔk cua kɛ mac kä Gridzy kɔntɛynɛr elɛmɛn:

Lɛyni kä duɔ̱r
gridzyBeforeInitMaac ɛ ŋot /ka̱n gallery ni̱ tok.
gridzyInitMaac kɛ kɔr kä mëë ca gallery tok.
gridzyBeforeOptionsChangedFires ɛ ŋot kän opcini̱ la̱th.
gridzyOptionsChangedFires kɛ kɔr kä mëë ca opcini̱ la̱th.
gridzyBeforeRenderMaac ɛ ŋot /ka̱nɛ ni̱ la̱th lät.
gridzyRenderMaac kɛ kɔr kä mëë ca la̱th lät.
Mi ci duɔ̱ɔ̱r bath ɛn wa̱nɛ, jäkni warɛgak luäk .

event.target cuɛ Gridzy kɔntɛynɛr ɛlɛmɛn ŋun.
event.detail.instance ŋunɛ Griddhi̱ inthtan.

Ɛbɛni̱ ti̱ ca mac kä ai̱tɛm ɛlɛmɛni̱:

Lɛyni kä duɔ̱r
gridzyItemBeforeInitMaac ɛ ŋot /ka̱n ŋɔak ni tok.
gridzyItemInitMaac kɛ kɔr kä mëë ca ŋɔak tok.
gridzyItemLoadingFires mi̱ ci̱ duɔ̱ɔ̱r tok kɛ pɛ̈th.
gridzyItemReadyFires mi̱ ci̱ ŋɔak rɔ̱ riali̱kä kɛ kui̱ grid kalkulɛciɔn. Bä ɛn athpɛkt rɛci̱ö ɛ mi̱ ŋa̱ckɛ, duŋni̱ ɣöö ɛn thurɛ dɔ̱ŋ bɛ ŋot kɛ mi̱ thi̱ääŋɛ.
gridzyItemCompleteFires mi̱ ci̱ thurɛ duŋ ŋɔaani̱ thuɔ̱k.
Mi ci duɔ̱ɔ̱r bath ɛn wa̱nɛ, jäkni warɛgak luäk .

event.target la ŋunɛ ŋɔak tin caa la̱th lät.
event.detail.instance ŋunɛ Griddhi̱ inthtan.

API - Glöbal

Tëëkɛ tha̱a̱ŋ pa̱ŋcini̱ ti̱ cuŋ kärɔ̱ kä Griddhi̱ inthtanthi̱ni̱. Bä /ci̱ kɔn ɛ go̱r ɛn ɣöö banɛ instance ka̱n kɛ nhiam.

Gör Di̱puɔlt Ɣɔpciɔn

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

Gör Depuɔlt Opcini̱ Diaal

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

Set Depuɔlt Ɣɔpcini̱

Nɛmɛ /cɛ opcini̱ la̱th kä kɛndiaal tin ca tok ni̱ wal kä Gridzy inthtanthi̱ni̱, duŋni̱ ɣöö cuɛ lat i̱ bɛthik kɛ kui̱ inthtanthi̱ni̱ tin ji̱di̱tni̱. Cieŋni̱ min, mi̱ ɛ opciɔn duŋ inthtan in te thi̱n bɛ cu nyɔk kɛ lätni̱ kɛ rɛy ba̱li̱ö null , jɛn bɛ lät kɛ ba̱li̱ö di̱puɔlt mi̱ ji̱di̱t.

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

Ji̱n deri̱ nɛmɛ la̱t kɛ riali̱ opcini̱ i̱kä wi̱i̱muɔ̱ɔ̱n kɛɛliw, mi̱ ci̱ ji̱n ɛ cɔl ɛ ŋot DOM /kenɛ ni̱ cop. Bä ji̱n /ci̱ bi̱ lɛ go̱r i̱ bi̱ opcini̱ la̱th cie attributes ɛ nyɔk.

Autömati̱dhi̱ömni̱

Cie min ci̱ autömathi̱mni̱ diaal nyin Gridzy.js 2 lät, thiɛlɛ mi̱ go̱o̱r ɣöö ba ca̱a̱p tin te piny ɛmɛ go̱r. Duŋni̱ ɣöö kɛn autömathi̱mni̱ dɔ̱ŋ ba kɛ woc kɛ la̱tdɛ kɛɛ Gridzy rɛy duɔ̱p ëë wal:

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

Tha̱a̱ŋ kä ti̱ti̱ /ca kɛ de la̱th kɛ rɛy data-gridzy- attributethni̱ kiɛ kɛ rɛy setOptions() , kɛ kui̱ löji̱kal ri̱dhɔni̱:

Di̱puɔlt Ba̱li̱öLɛyni kä duɔ̱r
autoInitOnDomReadytrueDetɛkni̱ ɛlɛmɛni̱ kɛ ki̱lɛth gridzy kä pec löading kɛnɛ ɣöö bɛ kɛ tok.

Thɛtɛbuɔl kɛ rɛy Gridzy.setDefaultOptions()
autoInitOnDomMutation
MutɛciɔnÖbdherbɛr		trueDetɛkni̱ ɛlɛmɛni̱ ti̱ ji̱di̱tni̱ kɛ ki̱lɛth gridzy kɛ pɛ̈th mi̱ ci̱kɛ jɔɔc rɛy DOM kɛnɛ ɣöö bɛ kɛ tok. (c.d. kɛ la̱tdɛ kɛɛ pec tra̱ni̱thi̱cini̱)

Thɛtɛbuɔl kɛ rɛy Gridzy.setDefaultOptions()
autoSyncChildListMutation
MutɛciɔnÖbdherbɛr		trueJɛn bɛ ŋa̱c mi̱ ca ɛlɛmɛni̱ gaatni̱ (thurɛni̱) mat thi̱n kiɛ ca kɛ woc, kä bɛ grid nyɔk kɛ lätni̱ kärɔa.

Thɛtɛbuɔl kɛ rɛy data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
useOptionAttributestrueLatdɛ mi̱ ɛn data-gridzy- attributeni̱ kɛn diaal lätkɛ kiɛ /ci̱kɛ lät. Mi̱ nɛmɛ ɛ false opcini̱ dɔ̱ŋ ba yiath piny kärɔa kɛ rɛy pröpöri̱tɛri̱ API.

Thɛtɛbuɔl kɛ rɛy new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncAttributesMutation
MutɛciɔnÖbdherbɛr		trueLa jiɛcɛ min ci̱ rɔ gɛr kä data-gridzy- attributes, kɛnɛ ɣöö bɛ grid nyɔk kɛ lätni̱ kärɔa. Kä bɛ ŋa̱c bä mi̱ ca gridzyAnimated ki̱lɛth mat thi̱n kiɛ ca woc kɛnɛ ɣöö mi̱ ci̱ style attribute rɔ gɛr. Mi̱ useOptionAttributes ɛ false , jɛn bɛ cu ŋa̱c ni̱ style atri̱bi̱ti̱ min ci̱ rɔ gɛr kärɔa.

Thɛtɛbuɔl kɛ rɛy data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncChildClassMutation
MutɛciɔnÖbdherbɛr		trueLa jiɛcɛ min ci̱ rɔ gɛr kä class attributeni̱ kä ɛlɛmɛni̱ gaatni̱ diaal (thurɛni̱). Relevant kɛ kui̱ pi̱li̱tɛri̱.

Thɛtɛbuɔl kɛ rɛy data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncImageMutation
MutɛciɔnÖbdherbɛr

ni̱ mëë cua berciɔn 2.5.0		trueDetɛkni̱ min ci̱ rɔ gɛr kä src attributeni̱ nyin thurɛni̱ diaal. Ɛ mi̱ lot rɔ mi̱ ca la̱t kɛɛ React kiɛ libraries ti̱ cäät.

Thɛtɛbuɔl kɛ rɛy data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoRenderOnResize
Ri̱thai̱dhÖbdhɛrbɛr

ni̱ mëë cua berciɔn 2.6.0		trueDetɛkni̱ min ci̱ rɔ gɛr kä elɛmɛn width. Relevant kɛ kui̱ kä ɣöö ba ri̱thpɔnthib di̱dhaany. (Ɛ ŋot /kenɛ ni̱ cop kä berciɔn 2.6.0 cua wär-nyiini̱ gɛr pekdɛ min ci̱ tuɔɔk cua la̱t)

Thɛtɛbuɔl kɛ rɛy data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()

Ini̱ciali̱dhe Manualli̱

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

Dethtrɔyciɔn kä Inthtan

Roughly cuɛ lar, min gua̱c kɛ tuk Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Thi̱nk Li̱th Gatdä Manualli̱

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

Thi̱nk ɛ Gat kɛl Ɛlɛmɛn Manualli̱

Ni̱ ciaaŋ /ca jɛ go̱o̱r, ɛ ni̱ mi̱ /ciɛ gua̱a̱th mi̱ tɔt ɛlɔ̱ŋ.

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

Thi̱nk Attributethni̱ Manuali̱

Ŋäc jɛ ɛn ɣöö useOptionAttributes min ca kuany bɛ yi̱k tekɛ true kɛ kui̱ kä nɛmɛ.

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

Puɔ̱th Renderiŋ

Ni̱ ciaaŋ /ca go̱o̱r, cieŋni̱ mi̱ ca autömati̱dhi̱ömni̱ diaal ŋok

gridzyInstance.render();