Gridzy.Gallery

webEkiga

Omuringo 2.x

Webusayiti egi ehinduriirwe ahabwayo. Ku haraabe hariho ekitarikwetegyerezibwa gye, reeba ebihandiiko by’Orungyereza.

Enkozesa y'omutaano

Taho fairo za Gridzy aha server yaawe kandi ozite aha mukutu gwawe (obwire obwingi omu kicweka ky'omutwe):

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

Yongyeraho koodi ya HTML (hoona omu kicweka ky'omubiri):

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

Ekyo nikyo! Ekyo n’eky’okureeberaho ekirikukorera omu bwijwire. Tihariho kutandikaho okwongyeirweho okurikwetengwa.

Okutebekanisa

Omuringo gworobi gw’okutebeekanisa Gridzy n’okukozesa emitwarize ya HTML yonka. Oine kubanza amaziina g'okutooranamu data-gridzy- . Nahabwekyo, okutaho spaceBetween , yongyeraho 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>

Ebikuru ebyokutooranamu

Omuhendo gwa buriijoEnshoborora
animatetrueNikimanyisa yaaba ebishushani ebirikuteera biine kukoresibwa obu gridi eri kuhinduka (nk’eky’okureeberaho, waaba noohindura obuhango bw’edirisa y’okucondooza nari waaba nootaho ekicweka ky’okushwijuma).
layoutjustifiedNikishoboorora entebeekanisa erikukoresibwa. Gridzy.js 2 neeshagika enkora ibiri zitari zimwe na zimwe justified na waterfall . Buri kimwe aharibyo kiine ebirikukiraho eby’okutooranamu, ebi orikubaasa kutunga ahaifo y’emeeza egi.
filter*Nikimanyisa ebishushani ebiine kworekwa. CSS-omutooranwa weena naabaasa kukoresibwa nk'omuhendo aha. Obwire obwingi nikiteebwaho kyonka kurabira omu filterControls (reeba ekindi ekirikukuratira).
Reeba ebicencura
filterControlsNikimanyisa ebintu bya foomu ebirikubaasa kukoresibwa kushwijuma ebishushani. CSS selector yoona, erikutoorana ebintu bya HTML form, neebaasa kukoresibwa nk’omuhendo aha.
Reeba ebicencura
autoConsiderScrollBarstrueOkuteebereza obugazi oburiho bwaba nibureebeka nari nibubura. Buriijo nikiba kiri kirungi kukireka aha true okwihaho okwekorera oku kwareetaho oburemeezi.

Justified Entebeekanisa y'okutooranamu

Omuhendo gwa buriijoEnshoborora
autoFontSizefalseNikihindura omu bwijwire obuhango bw’ebigambo bya buri kabokisi kurugiirira aha buhango bw’akabokisi k’okubanza. Omu nkora, omugasho gw’obuhango bw’ebigambo tigurikuteebwaho omu bwijwire.
desiredHeight190Nikishoboorora oburaingwa oburikwetengwa obw’enyuguta z’ebintu. Oburaingwa bwonyini nibwija kubarwa kurugiirira aha bugazi oburiho n’ebintu ebiri omu murongooti.
hideOnMissingImagetrueNikishereka obubokisi oburimu ebishushani ebitarikubaasa kuteebwamu.
spaceBetween4Nikishoboorora orubaju ahagati y’ebintu omu pixels.
lastRowAlign
kuruga omu nkora ya 2.3.0		justifiedNikishoboorora emitwarize y’omurongooti ogurikuhererukayo. Emihendo erikwikirizibwa eri left , center , right na justified .
singleRowAlign
kuruga omu nkora ya 2.3.0		justifiedNikishoboorora emitwarize yaaba hariho omurongooti gumwe gwonka. Emihendo erikwikirizibwa eri left , center , right na justified .
fillLastRow
kuruga omu nkora ya 2.1.0		trueKIIHWEHO kuruga omu nkora ya 2.4.0. (EKIRIKUKORESIBWA kuruga omu nkora ya 2.3.0 )
Tebeekanisa ebishushani kugira ngu omurongooti ogurikuhererukayo gube gujwire kimwe. Waaba nooteekateeka kutaho ebishushani omu muringo gw’amaani, nikibaasa kuba kirungi okukizibira.
Tikirikukora aha nshorongo emwe (reeba fillSingleRow ).
fillSingleRow
kuruga omu nkora ya 2.1.0		trueKIIHWEHO kuruga omu nkora ya 2.4.0. (EKIRIKUKORESIBWA kuruga omu nkora ya 2.3.0 )
Ku haraabe hariho orunyiriri rumwe rwonka, nirutebeekanisa ebishushani kugira ngu orunyiriri orwo rugume rwijwire kimwe. Ku kiraabe nikibaasa kubaho ngu oine ekishushani kimwe nari bibiri byonka omu kishengye ky’ebishushani, nikibaasa kuba kirungi okuzibira eki.

Waterfall Entebekanisa y'okutooranamu

Omuhendo gwa buriijoEnshoborora
autoFontSizefalseNikihindura omu bwijwire obuhango bw’ebigambo bya buri kabokisi kurugiirira aha buhango bw’akabokisi k’okubanza. Omu nkora, omugasho gw’obuhango bw’ebigambo tigurikuteebwaho omu bwijwire.
desiredWidth250Nikishoboorora oburaingwa bw’enyomyo oburikwetengyesa. Obugazi bwonyini nibwija kubarwa kurugiirira aha bugazi oburiho n’omubaro gw’enyomyo.
hideOnMissingImagetrueNikishereka obubokisi oburimu ebishushani ebitarikubaasa kuteebwamu.
horizontalOrderfalseNikishoboorora ngu ebintu nibiteebwaho kimwe ekintu kimwe omu buri nkora kuruga aha rubaju rwa bumosho kuza aha rwa buryo, reero kigaruka kitandikye omu nkora erikukirayo aha rubaju rwa bumosho okwetongora omu nkora eriho omwanya mwingi. Omu nkora ebintu nibiija kuguma nibiteebwa omu nkora erimu oburaingwa bukye.
spaceBetween4Nikishoboorora orubaju ahagati y’ebintu omu pixels.
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.

Ebindi eby'okutooranamu

Okumanya ebindi eby'okutooranamu, reeba API .

Amakuru ga HTML

Omuringo gwa HTML ogwa Gridzy ogwanguhi munonga ni ogu:

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

Kwonka Gridzy neehindukahinduka munonga kandi noobaasa kukoresa haihi buri nkora ya HTML endiijo yoona. Hariho enshonga nkye ezi oine kuteekateekaho:

  • Buri mwana w‘ekicweka ky‘ekibokisi naajwekyera ekintu kimwe omu nkora.
  • Ekicweka ky’ekikwato n’abaana baakyo byombi nibibaasa kuba eby’omuringo gwona ogw’okutaho akabonero, nka ul na li (teekateeka aha kugaruraho ebiri omu nkora ya browser).
  • Ekintu kya img kyaba kitari mwana wenka, nikyetengyesa ekibiina gridzyImage .

Mbwenu eki nakyo n'omutindo gwa HTML ogurikukora:

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

Namunonga waaba nooyenda kwongyeraho ebigambo, nooyetenga omutindo gwa HTML ogw’omurembe. Okumanya bingi ahari ekyo, reeba aha bihandiiko n’amapapa .

Ebihandiiko & Amagoye

Waaba nooyenda kwongyera ebigambo aha kishushani kyawe, oine kushoboorora oku kirikureebeka. N’ahabw’ekyo, hariho amapapa agamwe agatebeekanisiibwe kare. Buri ruhu rurimu fairo ya CSS. Oine kwongyera aha fairo egi okwongyera ahari fairo za Gridzy enkuru (obwire obwingi omu kicweka ky'omutwe):

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

Ekindi noyetenga omutindo gwa HTML ogw'omurembe:

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

Waaba nooyebuuza aha nkora ya HTML, reeba Semantic HTML .

Aha bigambo noobaasa kukoresa ekihandiiko kyona, reeba ngu kiine ekibiina kya gridzyCaption . Ekintu kya img nikyetengyesa ekibiina kya gridzyImage .

Eky'okureeberaho eki aharuguru nikyoreka oruhu gridzySkinClassic . Okukozesa endiijo, hindura eiziina ry'oruhu n'emwe ahari ezi:

Amagoye garimu

Amashomero agariho
Oruhu rwa gridzyBurimu kintu kyona
entandikwa nungi y'okukora oruhu rwawe
okureeba butunu		gridzySkinBlank
gridzySkinClassic
okureeba butunu		gridzySkinClassic
gridzySkinClassicLight(EKIRIKUKORESIBWA kuruga omu nkora ya 2.6.0)
gridzySkinFullOverlay
okureeba butunu		gridzySkinFullOverlay
gridzySkinFullOverlayLight(EKIRIKUKORESIBWA kuruga omu nkora ya 2.6.0)
gridzySkinLift
okureeba butunu		gridzySkinLift
gridzySkinLiftLight(EKIRIKUKORESIBWA kuruga omu nkora ya 2.6.0)
gridzySkinMagnifier
Okukora kwa zoom tikurimu
okureeba butunu		gridzySkinMagnifier
gridzySkinMagnifierLight(EKIRIKUKORESIBWA kuruga omu nkora ya 2.6.0)

Empu zoona ezi aharuguru nizetenga fairo ya CSS yonka, kwonka hariho n'empu ezindi ezirikwetaaga fairo ya JavaScript:

<link rel="stylesheet" href="gridzy/skins/gridzySkinBlur/style.min.css" />
<script src="gridzy/skins/gridzySkinBlur/script.min.js"></script>
Amashomero agariho
gridzySkinBlur
tikirikukorera omu IE
okureeba butunu		gridzySkinBlur
gridzySkinBlurLight(EKIRIKUKORESIBWA kuruga omu nkora ya 2.6.0)
gridzySkinCard
okureeba butunu		gridzySkinCard
gridzySkinCardLight(EKIRIKUKORESIBWA kuruga omu nkora ya 2.6.0)

Okutoorana aha ruhu

Kuruga omu nkora ya 2.6.0 hariho Options z’okutebeekanisa emibiri eyombekirwemu. Okurugirira aha ruhu oruriho noobaasa kutaho erangi y’enyima, erangi y’ebihandiiko n’ekicuucu ky’ebihandiiko. Oine kukoresa CSS nk'oku orikureeba aha:

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

Reeba ebirikuhinduka ebirikushagikwa n'emihendo y'okubanza ahari buri ruhu aha:

gridzySkinClassic
EkirikuhindukaOmuhendo gwa buriijoAmakuru
--backgroundrgba(0, 0, 0, .7)nikiikiriza omuhendo gwona ogwa CSS ogw'enyima
--colorrgb(255, 255, 255)nikiikiriza omuhendo gwona ogw'erangi ya CSS
--text-shadownonenikiikiriza CSS yoona ey'ekihandiiko-ekicuucu omuhendo
gridzySkinFullOverlay
EkirikuhindukaOmuhendo gwa buriijoAmakuru
--backgroundrgba(0, 0, 0, .7)nikiikiriza omuhendo gwona ogwa CSS ogw'enyima
--colorrgb(255, 255, 255)nikiikiriza omuhendo gwona ogw'erangi ya CSS
--text-shadownonenikiikiriza CSS yoona ey'ekihandiiko-ekicuucu omuhendo
gridzySkinLift
EkirikuhindukaOmuhendo gwa buriijoAmakuru
--backgroundrgba(0, 0, 0, .7)nikiikiriza omuhendo gwona ogwa CSS ogw'enyima
--colorrgb(255, 255, 255)nikiikiriza omuhendo gwona ogw'erangi ya CSS
--text-shadow0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)nikiikiriza CSS yoona ey'ekihandiiko-ekicuucu omuhendo
gridzySkinMagnifier
EkirikuhindukaOmuhendo gwa buriijoAmakuru
--backgroundrgba(0, 0, 0, .7)nikiikiriza omuhendo gwona ogwa CSS ogw'enyima
--colorrgb(255, 255, 255)nikiikiriza omuhendo gwona ogw'erangi ya CSS

Oruhu oru tirurikushagika --text-shadow

gridzySkinBlur
EkirikuhindukaOmuhendo gwa buriijoAmakuru
--backgroundrgba(0, 0, 0, .7)nikiikiriza omuhendo gwona ogwa CSS ogw'enyima
--colorrgb(255, 255, 255)nikiikiriza omuhendo gwona ogw'erangi ya CSS
--text-shadow0 0 10px rgb(0, 0, 0)nikiikiriza CSS yoona ey'ekihandiiko-ekicuucu omuhendo
gridzySkinCard
EkirikuhindukaOmuhendo gwa buriijoAmakuru
--backgroundrgba(0, 0, 0, 1)nikiikiriza omuhendo gwona ogwa CSS ogw'enyima
--colorrgb(255, 255, 255)nikiikiriza omuhendo gwona ogw'erangi ya CSS
--text-shadownonenikiikiriza CSS yoona ey'ekihandiiko-ekicuucu omuhendo

Empu zoona ezitebeekanisiibwe kare nizishagika ebigambo byorobi byonka. Noobaasa kuhangaho emibiri yaawe ahabwawe kandi egumire munonga. Nyabura we reeba aha muringo gwa Gridzy .

Omuringo Gridzy

Ku haraabe hatariho ruhu orutebeekanisiibwe kare orurikuhikaana n’ebyetengo byawe, noobaasa kwekorera sitayiro.

Omuringo gworobi n’okubanza waakopa oruhu oruriho okaruhindura kuhikaana n’ebyetengo byawe. Oruhu orutebeekanisiibwe kare gridzySkinBlank rukira kuha omusingi murungi hamwe n'ebihandiiko birungi omu fairo ya 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;
}

Omu fairo ya CSS noija kushanga ebicweka by'oruhu gridzySkinBlank , gridzyImage gridzyCaption . Gridzy ahabwayo terikwetaaga kiraasi ezi. Nizikoresibwa kukora sitayiro zonka kandi n’ahabw’ekyo noobaasa kuziihaho nari kuhindura eiziina waaba nooyenda.

Okwongyera ahari ekyo noija kushanga ekibiina kya CSS gridzyItem . Gridzy naataho ekibiina eki omu muringo gw’okwekorera aha baana boona abahikire ab’ekicweka ky’ekintu ekikuru eky’omu konteyina. Nahabwekyo, nobaasa kukoresa kiraasi egi kuhandiika sitayiro y’ebintu by’omu gallery yaawe.

Teekateeka aha bintu ebikuru

  1. Ebirimu omu kintu biine kuba nibigarukamu omu bwijwire. Teekateeka ngu obuhango bw’ekintu buzima nibuija kuhinduka. Kozesa emihendo ya ebicweka 10 ahari 100 omu mwanya gw’emihendo ya pixel. Kandi reeba aha nkora ya Gridzy autoFontSize , erikuboha obuhango bw’ebigambo aha buhango bw’akabokisi k’ekintu.
  2. Buri kintu kiine kuba kiine omubaro gw’ebintu ogushobooroirwe gye. Omubaro gw’ekintu tigurikwija kuhinduka kandi nigwetengyesa kubara orunyiriri. Nahabwekyo ekintu kyaba kitaine aspect ratio eshoboroirwe gye, kishoborore omu ngaro (nk'eky'okureeberaho kurabira omuri css).

Omu mbeera ezimwe, nikibaasa kworoba kuhandiika ebiri omu bintu Gridzy atakatandikire. Oine kwihaho ekibiina kya gridzy nari fairo ya Gridzy javascript ahabw’akaire kakye ahabw’eki.

Ekyo nikyo! Ekyo nikyo kyonka eki orikwetenga kwombeka oruhu rwawe rwonka. Ebingi aha nshaho ezitebeekanisiibwe kare tizirikukoresa bingi kukira eki.

Kwonka nihabaasa kubaho ebindi waaba nooyenda ...

Amagoye g'omurembe

Gridzy neekozesa ebicweka bya CSS bingi kukira gridzyItem yonka. Ebingi aharibyo nibiija kuteebwaho byonka kandi noobaasa kubikoresa n’okukora sitayiro.

Ebibiina bya konteyina enkuru

Eiziina rya kiraasiEnshoborora
gridzy
okutaho omu ngaro		Gridzy natunga ebintu ebiine kiraasi egi kandi abitandika.
gridzyAnimatedNikiija kuteebwaho kyonka kyaba true animate Ekibiina eki kyaba kiteirweho omu ngaro, ekicweka kya animate nakyo nikiija kutunga true (okwihaho kyaba kiteirweho omu bwijwire aha false ).

Ekicweka ky'ebintu

Eiziina rya kiraasiEnshoborora
gridzyItemNikiija kuteebwaho ahonaaho ekintu kyatandika omuringo gw’okutandika. Tikirikwija kwihwaho.
gridzyItemInitializingNikiija kuteebwaho ahonaaho ekintu kyatandika omuringo gw’okutandika. Nikiija kuhindurwa gridzyItemReady ahonaaho ekintu kyaheza kutandika omu bwijwire. Nikimanyisa ngu ebishushani biijwire (reeba gridzyItemLoading ), kwonka ekintu kyeteekateekire kutunga okureebeka.
gridzyItemReadyNikiija kuhindura gridzyItemInitializing ahonaaho ekintu kyaheza kutandika omu bwijwire. Tikirikwija kwihwaho. Nikimanyisa ngu ebishushani biijwire (reeba gridzyItemComplete ), kwonka ekintu kyeteekateekire kutunga okureebeka.
gridzyItemLoadingNikiija kuteebwaho ahonaaho ekintu kyatandika omuringo gw’okutandika. Nikiija kuhindurwa gridzyItemComplete ahonaaho ebishushani ebirimu (obwire obwingi kimwe kyonka) byaheza kwijura.
gridzyItemCompleteNikiija kugaruraho gridzyItemLoading ahonaaho ebishushani ebirimu (obwire obwingi kimwe kyonka) byaheza kwijura. Tikirikwija kwihwaho.
gridzyItemInitialToVisibleNikiija kuteebwaho ahonaaho ekintu kyatandika kureebeka omurundi gw’okubanza. Nikiija kwihwaho ahonaaho ekintu kyaheza kureebeka kimwe.
gridzyItemVisibleNikiija kuteebwaho ahonaaho ekintu kyaheza kureebwa omu bwijwire. Nikiija kwihwaho ahonaaho ekintu kyatandika kubura.
gridzyItemVisibleToHiddenNikiija kuteebwaho ahonaaho ekintu kyatandika kubura. Nikiija kwihwaho ahonaaho ekintu kyaba kisherekirwe kimwe.
gridzyItemHiddenNikiija kuteebwaho ahonaaho ekintu kyaba kisherekirwe kimwe. Nikiija kwihwaho ahonaaho ekintu kyatandika kureebeka.
gridzyItemHiddenToVisibleNikiija kuteebwaho ahonaaho ekintu kyatandika kureebeka (okwihaho kureebeka omurundi gw’okubanza – reeba ekibiina gridzyItemInitialToVisible ). Nikiija kwihwaho ahonaaho ekintu kyaheza kureebeka kimwe.
gridzyItemVisibleToVisibleNikiija kuteebwaho ahonaaho ekintu omu nkora kyahinduka, kwonka ekintu kyonyini kikaba kiri kandi kigume nikireebeka. Nikiija kwihwaho ahonaaho okuhindura ebishushani byaheza.

Omu nkora, eky’okureeberaho ky’omuringo n’ebishushani ebirikureebeka n’ebirikubura nibishoboororwa kare na fairo ya Gridzy main CSS.

Na CSS classes ezi ezigambirweho aharuguru noobaasa kukora sitayiro yaawe y’okworeka enkora n’ebishushani. Dare oreebe omu fairo ya Gridzy enkuru eya CSS, kwetegyereza eki waakubaire oine kuhindura. Tihariho kutiina, buri kimwe kihandiikirwe gyeyo.

Yongyera aha kutaho

Waaba nookozesa ebishushani bingi, nikibaasa kuba ekiteekateeko kirungi kuhwera Gridzy kwombeka grid omu bwangu.

Zibira okuguruka ebishushani

Gridzy nayetenga munonga aspect ratio y’ebishushani byona kubara grid. Amazima aga nigarugamu ebintu ebirikugurukaguruka ebishushani ebimwe byaba bitebeekanisiibwe kandi ebindi bitari. Ebishushani ku birikweyongyera, nikwo eki kirikubaasa kuba eky’okuteganisa.

Okuzibira emitwarize egi, taho width height bw’ebintu byona img . Ni kikuru kutaho emihendo ehikire ahari buri kishushani kyonka, kitari ekyo ebishushani nibiija kuhinduka. Emihendo ehikire ni obugazi bw'okubanza n'oburaingwa bw'ekishushani ekirikushushana:

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

Bwanyima Gridzy naabaasa kubara grid ahonaaho ataine kwetenga kumanya obuhango bw’ebishushani buzima.

Okutaho eby'obugobya

Okutaho ebishushani byonka ebiri omu mwanya ogurikureebwa, kuratira ebi:

  1. Tamu width height nk'oku kyashoboororwa ahaiguru (reeba ngu waakozesa emihendo ehikire)
  2. Reka emitwarize yoona src erimu data-gridzylazysrc nk’oku erikworekwa ahaifo (waaba oine emitwarize srcset nayo, gihindure 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>

Bwanyima y’amatembezo aga ebishushani nibiija kuza omu nkora ahonaaho byaba biri haihi nari omunda y’ekicweka ky’okureeba.

Okworeka enkora

Ekirikworeka enkora n’akabonero kakye akarikushusha nk’akarikureebeka obwo ekishushani kirikutaaha. Waaba nookozesa captions & skins , ekirikworeka enkora nikiija kworekwa kyonka. Ekindi nooyetenga kukora empindahinduka:

  1. Teeka buri kintu img omu kintu kya div .
    (nari omu kintu kyona ekindi – reeba semantic HTML ahabw’ebindi)
  2. Yongyera aha kiraasi gridzyImage ahari buri kintu kya img
<div class="gridzy">
  <div><img src="https://loremflickr.com/640/480?random=1" class="gridzyImage" alt="a random image" /></div>
  <div><img src="https://loremflickr.com/480/640?random=2" class="gridzyImage" alt="another random image" /></div>
  <div><img src="https://loremflickr.com/640/640?random=3" class="gridzyImage" alt="yet another random image" /></div>
  <div><img src="https://loremflickr.com/640/480?random=4" class="gridzyImage" alt="a random image again" /></div>
  <div><img src="https://loremflickr.com/640/480?random=5" class="gridzyImage" alt="one last random image" /></div>
</div>

Bwanyima y‘ekyo oine kureeba eby‘okureeberaho by‘enkora ebishushani byatwara obwire kuza omu nkora.

Ebicencura

Ebishwijumirwe omu Gridzy nibirungi munonga kwonka biine amaani. Tihariho kushoroora omu muringo ki gw’okushwijuma ogu orikwetenga, nikibaasika munonga ngu nikibaasa kuhikiirizibwa. Eki orikwetaaga ni, CSS nkye hamwe na HTML nkye ...

Eky'okureeberaho eki nikikora:

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

Reka Twombekye Eitembezo aha Itembezo

1. Okubanza nitwetenga omutindo gwa HTML ogwa buriijo ogwa Gridzy kandi tuteho amaziina ga kiraasi ahabw’ebintu byona eby’omu gallery kugira ngu tubaase kubishwijuma bwanyima .

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

Omu ky’okureeberaho eki nitukoresa ekibiina kimwe kyonka ahari buri kintu. Kwonka noobaasa n’okutaho ebibiina bingi ahabw’ekintu kimwe, ekintu ekyo kyaba kiine kushangwa kurabira omu bishwijumwa bingi.

2. Reero tuyongyereho obupesha obu turikubaasa kurabiramu kuhindura ebishwijumwa obwo .

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

Omu mwanya gw’amapesha, noobaasa n’okukoresa ebindi bintu bya foomu nk’ebibokisi by’okukyebera, amapesha ga radiyo, okutoorana emyanya n’ebindi.

Nkoku orikureeba, emihendo y’ebipande n’eby’okutoorana CSS ebya buriijo. Ahonaaho twaheza, okuteera aha rupapura nk’orwo nikiija kworeka ebishushani ebirikuhikaana n’ekicweka ekyo ekya CSS. Omu by’obuhangwa nikiteekaho busha omuringo filter aha muheendo ogu.

Noobaasa n’okukoresa ebitoorainwe ebigumire munonga. Nk’eky’okureeberaho :not(.animals) nazo zikaba niziija kukora, hamwe .animals.people na .animals, .people .

3. Eky’aha muheru, nitukingaho obupiira omu kiibo div kandi tububohera aha gallery ya Gridzy, turikutaho filterControls option:

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

Nkoku orikureeba, nitukozesa n’ekicweka kya CSS eky’okutooranamu filterControls . Ekintu kya div ekiine id attribute nikikora kyonka kukora obupiira bworobi kutoorana kurabira omu CSS selector egyo.

Ekyo nikyo!

Waaba nooyenda JavaScript, reeba API .

API

N’obu Gridzy eraabe eine API yaayo, ebintu ebingi nibibaasa kukorwa otaine API, orikukoresa DOM yonka. Gridzy naija kukireeba kandi ahindure omu grid. Kwonka hariho n'API y'amaani munonga ...

Okuhindura DOM

Aha nkora zoona ez‘okukoresa omu kihandiiko (DOM) nitubanza twetenga ekintu ky‘okubiikamu:

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

Yongyeraho ebishushani

Ni kikuru kwombeka omu bwijwire n’okwijuza ekicweka kisya ky’omwana otakakitaire aha kicweka ky’ekiibo. Ekindi Gridzy tarikubaasa kumanya ebipimo ebihikire.

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

Yihaho ebishushani

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

Hindura ebyokutooranamu

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

Ebirikukiraho aha kuhindura DOM noobaasa kubitunga aha bihandiiko bya MDN web . Hariho n’Enyanjura ya DOM eriho.

API y'obukama

Okukozesa API, nitubanza twetenga ekyokureeberaho kya Gridzy, ekirikubohwa aha kintu kya Gridzy:

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

Tunga ekyokutooranamu

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

Tunga ebyokutooranamu byona

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

Teekaho eby'okutooranamu

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

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

Teekaho ekicencura

Okutaho ekicweka ky'okushwijuma n'okutaho filter ekirikubaasa kuba eky'okutooranamu CSS kyona ekihikire:

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

Yongyeraho emirimo y'okugaruka kweta

KIREEKWAHO kuruga omu nkora ya 2.4.0.
Koresa Events z’omurembe kandi ezirikuhindukahinduka omu mwanya gw’ekyo. Reeba ekicweka ekirikukurataho kumanya ebirikukiraho.

Gridzy.js 2 neeshagika ebimwe aha miringo y’okukora emirimo y’okugaruka kweta. Nibibaasa kuteebwaho kurabira omu API yonka, kwonka nk'ebindi:

// 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.
  }
});
Enshoborora
onBeforeOptionsChangedOmurimo gw’okugaruka kweta ogurikwetwa butunu otakateireho eby’okutooranamu.
onOptionsChangedOmurimo gw’okugaruka kweta ogurikwetwa butunu bwanyima y’okutaho eby’okutooranamu.
onBeforeRenderOmurimo gw’okugaruka kuteera esimu ogurikukoresibwa butunu otakahinduire.
onRenderOmurimo gw’okugaruka kweta ogurikwetwa butunu bwanyima y’okuhindura.

Kozesa ebyabaireho

kuruga omu nkora ya 2.4.0

Noobaasa kukoresa ebintu bya Gridzy nk'ebintu bya JavaScript ebya buriijo:

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

Ebimwe ebirikubaho nibiteerwa aha kintu kya Gridzy konteyina kandi ebindi ebirikubaho nibiteerwa aha bintu by‘ekintu kimwe kimwe omu kintu ky‘ekikopo.

Ebintu ebyabaireho aha kintu kya Gridzy konteyina:

Enshoborora
gridzyBeforeInitOmuriro gutakatandikireho gallery.
gridzyInitOmuriro bwanyima y’okutandikaho gallery.
gridzyBeforeOptionsChangedOmuriro otakateireho eby’okutooranamu.
gridzyOptionsChangedOmuriro bwanyima y’okutaho eby’okutooranamu.
gridzyBeforeRenderOmuriro gutakahinduire.
gridzyRenderOmuriro bwanyima y’okuhindura.
Waba nofeerwa emikoro yoona aha, nyabura we yohereza okushaba kw'obushagiki .

event.target neeha ekicweka ky’ekikwato kya Gridzy.
event.detail.instance nikiha eky'okureeberaho kya Gridzy.

Ebibaireho ebyateirweho aha bintu:

Enshoborora
gridzyItemBeforeInitOmuriro ekintu kitakatandikire.
gridzyItemInitOmuriro bwanyima y’okutandikaho ekintu.
gridzyItemLoadingOmuriro ekintu kyatandika kuza omu motoka.
gridzyItemReadyOmuriro ekintu kyaba kyeteekateekire kubara gridi. N’ahabw’ekyo aspect ratio neemanyirwa, kwonka ekishushani nikibaasa kuba nikiguma nikireeta.
gridzyItemCompleteOmuriro ekishushani ky’ekintu kyaba kiijwire.
Waba nofeerwa emikoro yoona aha, nyabura we yohereza okushaba kw'obushagiki .

event.target neeha ekintu ekirikushushana.
event.detail.instance nikiha eky'okureeberaho kya Gridzy.

API – Ensi yoona

Hariho emirimo emwe etarikwegamira aha nkora za Gridzy. Nahabwekyo titurikwetenga kutunga ekyokureeberaho kare.

Tunga eky'okutooranamu

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

Tunga ebyokutooranamu byona

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

Teekaho eby'okutooranamu

Eki tikirikutaho eby’okutooranamu eby’okureeberaho bya Gridzy byona ebyabaire byatandikirweho, kureka nikishoboorora omusingi gw’eby’okureeberaho bisya. Kwonka, ku kiraabe ngu okutoorana kw’eky’okureeberaho ekiriho kukaba nikuza kugarukaho kurabira omu muheendo null , kukaba nikuza kukoresa omuhendo musya gw’okubanza.

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

Noobaasa kukoresa eki kutebeekanisa eby’okutooranamu omu nsi yoona, waaba nookyeta DOM etakahikire. Nahabwekyo torikwija kwetenga kutaho options nk’emitwarize.

Okwekorera

Kasita automatisms zoona eza Gridzy.js 2 zirikukora, tihariho kwetenga kw’emiringo egi ahaifo. Kwonka eby’okukoresa eby’okwekorera nibibaasa kuzimirwa kukoresa Gridzy omu muringo gw’obuhangwa:

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

Ebimwe ahari ebi tibirikubaasa kuteebwaho kurabira omu data-gridzy- emitwarize nari kurabira omu setOptions() , ahabw'enshonga ezihikire:

Omuhendo gwa buriijoEnshoborora
autoInitOnDomReadytrueNikimanyisa ebintu ebiine class gridzy aha rupapura rw’okutaho kandi kitandika.

Nikibaasa kutebeekanisibwa kurabira omuri Gridzy.setDefaultOptions()
autoInitOnDomMutation
Omureeberezi w'entunguuka		trueNikimanyisa ebintu bisya ebiine class gridzy ahonaaho byareebeka omu DOM kandi bikatandika. (nk. aha kukozesa okuhindura aha rupapura)

Nikibaasa kutebeekanisibwa kurabira omuri Gridzy.setDefaultOptions()
autoSyncChildListMutation
Omureeberezi w'entunguuka		trueNikimanyisa yaaba ebintu by’omwana (ebishushani) byongyerwamu nari byaihwaho, kandi kihindura ebiri omu nkora kyonka.

Nikibaasa kutebeekanisibwa kurabira omu data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
useOptionAttributestrueNikishoboorora yaaba emitwarize data-gridzy- neekoresibwa omu bwijwire nari ngaaha. Eki kyaba kiri false eby’okutooranamu nibibaasa kuteebwaho kurabira omu API y’omukama wenka.

Nikibaasa kutebeekanisibwa kurabira omu new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncAttributesMutation
Omureeberezi w'entunguuka		trueNikimanyisa empindahinduka z’emitwarize ya data-gridzy- , kandi nikihindura grid kyonka. Kandi nikimanya yaaba ekibiina kya gridzyAnimated kyayongyerwaho nari kyaihwaho kandi yaaba hariho empindahinduka omu mitwarize style . useOptionAttributes yaaba eri false , neemanya empindahinduka z’emitwarize style gwonka.

Nikibaasa kutebeekanisibwa kurabira omu data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncChildClassMutation
Omureeberezi w'entunguuka		trueNikimanyisa empindahinduka z‘emitwarize ya class y‘ebintu byona eby‘omwana (ebishushani). Ekikuru aha bikwatiraine n’ebishwijumwa.

Nikibaasa kutebeekanisibwa kurabira omu data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncImageMutation
Omureeberezi w'entunguuka

kuruga omu nkora ya 2.5.0		trueNikimanyisa empindahinduka z’emitwarize ya src ey’ebishushani byona. Nikikwatagana kyakoresibwa na React nari amabiikiro agarikushushana.

Nikibaasa kutebeekanisibwa kurabira omu data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoRenderOnResize
Hindura obuhango bw'omureeberezi

kuruga omu nkora ya 2.6.0		trueNikimanyisa empindahinduka omu bugazi bw’ekintu. Ekikuru aha bikwatiraine n‘okukora enteekateeka y‘okugarukamu. (Ekihandiiko kya 2.6.0 kitakahikire, omuhurikiza w’eby’okureeberaho by’okuhindura obuhango bw’edirisa akakoresibwa)

Nikibaasa kutebeekanisibwa kurabira omu data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()

Tandika omu ngaro

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

Shiisha Eky'okureeberaho

Omu muringo gw’obushema, ekirikuhakanisa okutandikaho Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Kwatanisa orunyiriri rw'abaana omu ngaro

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

Kwatanisa ekintu ky'omwana omwe omu ngaro

Obwire obwingi tikirikwetengyesa, okwihaho omu mbeera ezitarikukira kubaho.

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

Kuhikaanisa emitwarize omu ngaro

Yetegyereze ngu okutoorana useOptionAttributes kushemerire kuba kuri true ahari eki.

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

Okuhayo amaani

Obwire obwingi tikirikwetengyesa, n’obu eby’okukoresa byona biraabe bizimire .

gridzyInstance.render();