Gridzy.Gallery

webKikongo

Mutindu 2.x

E nzil’eto ya internete yasekolwa mu mpila ya yau kibeni. Kana kima mosi kele ve pwelele, pardo tala mikanda ya Kingelesi.

Kusadila ya luyantiku

Tula ba fichiers ya Gridzy na serveur na nge mpe yika yau na site internet na nge (mbala mingi na kitini ya ntu):

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

Yika code HTML (konso kisika na kitini ya nitu):

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

Yau yina! Yo kele mbandu mosi ya ke salaka mbote. Ke divavanga nkumbu zakaka ko.

Kuyidika

Mutindu ya kuluta pete ya kuyidika Gridzy kele, kusadila kaka bikalulu ya HTML. Nge fwete tula kaka na ntwala ya bazina ya ba nsola ti data-gridzy- . Na yau, sambu na kutula kisika spaceBetween , yika kaka kikalulu 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>

Mambu ya mfunu

Ntalu ya luyantikuNtendula
animatetrueYo ke zabaka kana bo fwete sadila bifwanisu ntangu grille ke sobaka (mu mbandu, ntangu bo ke sobaka nene ya fenetre ya navigateur to ntangu bo ke tulaka filtre).
layoutjustifiedTendula mutindu ya kusadila. Gridzy.js 2 ke sadisaka ba nzila zole ya kuswaswana justified mpi waterfall . Konso mosi na kati na yo kele ti baparametre na yo ya nkaka ya kupona, yina nge lenda mona na nsi ya mesa yai.
filter*Ke zayanga nkia fwaniswa ifwete songwa. Konso CSS-selector lenda salama bonso ntalu awa. Mbala mingi, bo ke tulaka yo na mbala mosi na nzila filterControls (tala nzila yina ke landa).
Tala ba filtre
filterControlsKuzaba nki bima ya forme lenda salama sambu na kufiltrer bifwanisu. Konso nsola ya CSS, yina ke ponaka bima ya formulaire HTML, lenda salama bonso ntalu awa.
Tala ba filtre
autoConsiderScrollBarstrueSambu na kuzaba nene yina kele kana ba barre de défilement ke monana to ke vila. Yau kele mbote ntangu yonso na kubika yau na true katula kaka kana automatisme yai me nata ba mpasi.

Justified Mambu ya kupona

Ntalu ya luyantikuNtendula
autoFontSizefalseYo ke sobaka na mbala mosi kikalulu ya nene ya bisono ya konso kashe na kutadila nene ya kashe ya kisina. Na luyantiku, kikalulu ya nene ya bisono ketulamaka ve na pwelele.
desiredHeight190Tendula nda ya bandonga ya bima yina nge ke zola. Bo ta tanga nda ya kieleka na kutadila nene yina kele mpi bima yina kele na ndonga.
hideOnMissingImagetrueBumba ba-boîte yina kele ti bifwanisu yina bo lendaka ve kutula.
spaceBetween4Tendula kitamina na kati ya bima na pixel.
lastRowAlign
tuka muna nkanda 2.3.0		justifiedTendula bikalulu ya ndonga ya nsuka. Ba ntalu ya nswa kele left , center , right mpi justified .
singleRowAlign
tuka muna nkanda 2.3.0		justifiedTendula kikalulu kana kele kaka ti ndonga mosi mpamba. Ba ntalu ya nswa kele left , center , right mpi justified .
fillLastRow
tuka muna nkanda 2.1.0		trueBO ME katulaka yo banda na version 2.4.0. (BO me katulaka yo banda na version 2.3.0 )
Yidika bifwanisu na mpila nde ndonga ya nsuka kufuluka ntangu yonso mbote-mbote. Kana nge ke zola kuyika bifwanisu na mutindu mosi ya ngolo, yo lenda vanda mbote na kukanga yo.
Ke dina ye nluta ko muna nlonga mosi (tala fillSingleRow ).
fillSingleRow
tuka muna nkanda 2.1.0		trueBO ME katulaka yo banda na version 2.4.0. (BO me katulaka yo banda na version 2.3.0 )
Kana ndonga mosi mpamba kele, yo ke yidikaka bifwanisu na mpila nde ndonga yina kufuluka ntangu yonso. Kana yo lenda salama nde nge vanda kaka ti kifwanisu mosi to zole na galerie, yo lenda vanda dibanza ya mbote na kukanga yo.

Waterfall Mambu ya Kuyidika

Ntalu ya luyantikuNtendula
autoFontSizefalseYo ke sobaka na mbala mosi kikalulu ya nene ya bisono ya konso kashe na kutadila nene ya kashe ya kisina. Na luyantiku, kikalulu ya nene ya bisono ketulamaka ve na pwelele.
desiredWidth250Tendula nene ya bakolone yina nge ke zola. Bo ta tanga nene ya kieleka na kutadila nene yina kele mpi ntalu ya bakolone.
hideOnMissingImagetrueBumba ba-boîte yina kele ti bifwanisu yina bo lendaka ve kutula.
horizontalOrderfalseKutendula nde bima ke tulama strictement kima mosi na konso colonne banda na diboko ya kimama tii na diboko ya kitata, na nima kuyantika diaka na colonne ya kuluta diboko ya kimama na kimpwanza na kati ya colonne kele kisika mingi. Na luyantiku, bima yango ta vanda ntangu yonso na zulu ya zulunalu yina kele ti nda ya kuluta fioti.
spaceBetween4Tendula kitamina na kati ya bima na pixel.
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.

Mambu ya nkaka ya nene

Sambu na kuzwa ba nzila ya nkaka, tala API .

HTML ya ntendula

Nsadulu ya pete ya HTML ya Gridzy kele yai:

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

Kansi, Gridzy kele flexible mingi mpi nge lenda sadila pene-pene ya konso structure ya nkaka ya HTML. Vena ye mambu makete kaka tufwete badikila:

  • Konso mwana ya kima ya kontenere ke monisa kima mosi na kati ya grille.
  • E kunku kia nlonga ye wan’andi balenda kala konso mpila ya nkumbu, nze ul ye li (yindula kaka mu vutula nsiku mia navigador).
  • Kana kima mosi img kele ve mwana ya mbala mosi, yo kele na mfunu ya kitini gridzyImage .

Yo yina, yai kele mpi ngidika ya HTML ya ke sala:

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

Mingimingi kana nge ke zola kuyika ba sous-titre, nge kele na mfunu ya ngidika ya HTML ya kuyela. Sambu na kuzaba mambu mingi na yina me tala yo, tala Ba-Sous-titre & Skins .

Ba sous-titre mpi bampusu

Kana nge ke zola kuyika ba sous-titre na galerie na nge, nge fwete tendula mutindu yo ke monana. Muna kuma kiaki, vena ye mpusu zakaka zasikidiswa kala. Konso mpusu yina kele ti fichier CSS. Nge fwete yika fichier yayi na zulu ya ba fichiers ya nene ya Gridzy (mbala mingi na kitini ya ntu):

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

Diaka, nge kele na mfunu ya ngidika ya HTML ya mbote:

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

Kana nge ke kudiyula mutindu HTML kele, tala Semantic HTML .

Sambu na ntu-dyambu nge lenda sadila konso mutindu ya kidimbu, zikisa kaka nde yo kele ti kitini gridzyCaption . Kima img kele na mfunu ya kifwanisu gridzyImage .

Mbandu ya kele na zulu ke songa nge mpusu ya nitu gridzySkinClassic . Sambu na kusadila zina ya nkaka, yingisa kaka zina ya mpusu ya nitu ti zina yai:

Ba mpusu ya nitu

Ba classe kele
mpusu ya mpembe
kisika ya mbote ya kubanda sambu na kusala mpusu ya nitu na nge mosi .
kumona na mbala mosi		gridzySkinBlank
gridzySkinClassic
kumona na mbala mosi		gridzySkinClassic
gridzySkinClassicLight(BO me katulaka yo banda na version 2.6.0)
gridzySkinFullOverlay
kumona na mbala mosi		gridzySkinFullOverlay
gridzySkinFullOverlayLight(BO me katulaka yo banda na version 2.6.0)
gridzySkinLift
kumona na mbala mosi		gridzySkinLift
gridzySkinLiftLight(BO me katulaka yo banda na version 2.6.0)
gridzySkinMagnifier
zoom kele ve na kati na yo
kumona na mbala mosi		gridzySkinMagnifier
gridzySkinMagnifierLight(BO me katulaka yo banda na version 2.6.0)

Ba mpusu yonso ya kele na zulu kele kaka na mfunu ya fichier CSS, kansi kele ti ba mpusu ya nkaka yina ke lomba mpi fichier JavaScript:

<link rel="stylesheet" href="gridzy/skins/gridzySkinBlur/style.min.css" />
<script src="gridzy/skins/gridzySkinBlur/script.min.js"></script>
Ba classe kele
gridzySkinBlur
ke salaka ve na IE
kumona na mbala mosi		gridzySkinBlur
gridzySkinBlurLight(BO me katulaka yo banda na version 2.6.0)
gridzySkinCard
kumona na mbala mosi		gridzySkinCard
gridzySkinCardLight(BO me katulaka yo banda na version 2.6.0)

Mambu ya mpusu ya nitu

Tuka muna nsekola 2.6.0 vena ye Nsola za sikidisa e mpusu za nitu zatungilwa. Na kutadila mpusu ya nitu ya sikisiki nge lenda tula mukubu ya fondasio, mukubu ya masonama mpi kivudi ya masonama. Nge fwete sadila kaka bikalulu ya CSS mutindu nge lenda mona awa:

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

Tala ba variables ya ke sadisama mpi ba valeur ya defaut sambu na konso mpusu awa:

gridzySkinClassic
Kima ya ke sobakaNtalu ya luyantikuNsangu
--backgroundrgba(0, 0, 0, .7)ke pesa nzila na konso ntalu ya CSS
--colorrgb(255, 255, 255)ke pesa nzila na konso ntalu ya mukubu ya CSS
--text-shadownoneke pesa nzila na konso ntalu ya kivudi ya masonama ya CSS
gridzySkinFullOverlay
Kima ya ke sobakaNtalu ya luyantikuNsangu
--backgroundrgba(0, 0, 0, .7)ke pesa nzila na konso ntalu ya CSS
--colorrgb(255, 255, 255)ke pesa nzila na konso ntalu ya mukubu ya CSS
--text-shadownoneke pesa nzila na konso ntalu ya kivudi ya masonama ya CSS
gridzySkinLift
Kima ya ke sobakaNtalu ya luyantikuNsangu
--backgroundrgba(0, 0, 0, .7)ke pesa nzila na konso ntalu ya CSS
--colorrgb(255, 255, 255)ke pesa nzila na konso ntalu ya mukubu ya CSS
--text-shadow0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)ke pesa nzila na konso ntalu ya kivudi ya masonama ya CSS
gridzySkinMagnifier
Kima ya ke sobakaNtalu ya luyantikuNsangu
--backgroundrgba(0, 0, 0, .7)ke pesa nzila na konso ntalu ya CSS
--colorrgb(255, 255, 255)ke pesa nzila na konso ntalu ya mukubu ya CSS

Mpusu yai ke ndimaka ve --text-shadow

gridzySkinBlur
Kima ya ke sobakaNtalu ya luyantikuNsangu
--backgroundrgba(0, 0, 0, .7)ke pesa nzila na konso ntalu ya CSS
--colorrgb(255, 255, 255)ke pesa nzila na konso ntalu ya mukubu ya CSS
--text-shadow0 0 10px rgb(0, 0, 0)ke pesa nzila na konso ntalu ya kivudi ya masonama ya CSS
gridzySkinCard
Kima ya ke sobakaNtalu ya luyantikuNsangu
--backgroundrgba(0, 0, 0, 1)ke pesa nzila na konso ntalu ya CSS
--colorrgb(255, 255, 255)ke pesa nzila na konso ntalu ya mukubu ya CSS
--text-shadownoneke pesa nzila na konso ntalu ya kivudi ya masonama ya CSS

Ba mpusu yonso ya bo me yidika na ntwala ke sadisaka kaka ba sous-titre ya pete. Nge lenda sala bampusu na nge mosi mpi ya kuluta mpasi. Tala mutindu ya kusadila Gridzy .

Mutindu ya Gridzy

Kana ata mpusu mosi ve ya bo me yidika na ntwala me fwanana ti bampusa na nge, nge lenda sala style na nge mosi.

Mutindu ya kuluta pete kele ya kusala ntete kopi ya mpusu mosi ya kele dezia mpi kuyidika yo na kutadila bampusa na nge mosi. E mpusu ya gridzySkinBlank yasikidiswa kala, nkumbu miayingi yadi vana fondasio yambote kumosi ye nkanda miambote muna nkanda CSS:

/** SKIN Blank **/

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

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

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

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

Na kati ya mukanda ya CSS nge ta mona ba ndonga gridzySkinBlank , gridzyImage mpi gridzyCaption . Gridzy yandi mosi kele ve na mfunu ya ba-classe yai. Bo ke sadilaka yo kaka sambu na kusala style mpi yo yina nge lenda katula yo to kupesa yo zina ya nkaka kana nge me zola.

Na zulu ya mambu yina, nge ta mona gridzyItem ya CSS . Gridzy ke tula classe yai na mbala mosi na bana yonso ya direct ya élément conteneur ya nene. Na yawu, nge lenda sadila classe yayi samu na kutunga bima ya galerie na nge.

Mabanza Mambu ya Mfunu

  1. Mambu yina kele na kati ya kima yango fwete vanda ti mvutu ya mvimba. Yindula nde nene ya kima yina ta soba kibeni. Sadila ntalu ya pourcentage na kisika ya kusadila ntalu ya pixel. Mpi tala nzila ya layout ya Gridzy autoFontSize , yina ke kangaka nene ya bisono na nene ya kesi ya bima.
  2. Konso kima fwete vanda ti kifwanisu ya bo me tubila mbote. E nsongo mia lekwa ke misobanga ko ye mivavwanga muna tanga e nsongo. Na yau, kana kima mosi kele ve na mbala mosi na ratio ya nene ya kutendula mbote, tendula yau na ntwala na maboko (mu mbandu na nzila ya css).

Na bantangu yankaka, yo lenda vanda pete na kutula style na mambu yina kele na kati na ntwala nde Gridzy kuyantika. Katula kaka gridzy ya klase to fichier javascript ya Gridzy sambu na mwa ntangu sambu na diambu yai.

Yau yina! I diau kaka ofwete tunga e mpusu aku kibeni. Mingi ya ba mpusu ya bo me yidika na ntwala ke sadilaka ve mambu mingi kuluta yai.

Kansi yo lenda vanda ti mambu mingi kana nge zola ...

Bampusu ya Kuyela

Gridzy ke sadilaka ba ndonga ya CSS mingi kuluta kaka gridzyItem . Mingi na kati na yo ta vanda ya kuyidika yo mosi mpi nge lenda sadila yo sambu na kusala style mpi.

Ba classe ya nene ya conteneur

Zina ya nzo-nkandaNtendula
gridzy
kutula na maboko		Gridzy ke sosaka na mbala mosi bima yina kele ti klase yai mpi ke yantikaka yo.
gridzyAnimatedYo ta vanda mbala mosi kana nzila ya animate kele true . Kana bo me tula kitini yai na maboko, option animate ta kuma mpi true na mbala mosi (katula kaka kana yo me tulama pwelele na false ).

Ba classe ya bima

Zina ya nzo-nkandaNtendula
gridzyItemTa vanda kaka ntangu kima yango ta yantika kusala kisalu ya kuyantika. Ke dikatulwa nkutu ko.
gridzyItemInitializingTa vanda kaka ntangu kima yango ta yantika kusala kisalu ya kuyantika. Bo ta yingisa yo na gridzyItemReady kaka kana kima yango me yantika mbote-mbote. Ke tendula ve nde bifwanisu me fuluka (tala gridzyItemLoading ), kansi kima kele ya kuyilama sambu na kumonana.
gridzyItemReadyTa yingisa gridzyItemInitializing kaka kana kima yango me yantika mbote-mbote. Ke dikatulwa nkutu ko. Ke tendula ve nde bifwanisu me fuluka (tala gridzyItemComplete ), kansi kima kele ya kuyilama sambu na kumonana.
gridzyItemLoadingTa vanda kaka ntangu kima yango ta yantika kusala kisalu ya kuyantika. Yau ta yingisama na gridzyItemComplete kaka kana bifwanisu yina kele na kati (mbala mingi kaka mosi) me fuluka.
gridzyItemCompleteTa yingisa gridzyItemLoading kaka kana bifwanisu yina kele na kati (mbala mingi kaka mosi) me fuluka. Ke dikatulwa nkutu ko.
gridzyItemInitialToVisibleTa vanda kaka ntangu kima yango ta yantika kubasika na mbala ya ntete. Bo ta katula yo kaka kana kima yango me monana mpenza.
gridzyItemVisibleTa vanda kaka ntangu kima yango ta monana mbote-mbote. Bo ta katula yo kaka ntangu kima yango ta yantika kuvila.
gridzyItemVisibleToHiddenTa vanda kaka ntangu kima yango ta yantika kuvila. Bo ta katula yo kaka kana kima yango me bumbana kibeni.
gridzyItemHiddenTa vanda kaka kana kima yango me bumbana mpenza. Bo ta katula yo kaka ntangu kima yango ta yantika kubasika.
gridzyItemHiddenToVisibleTa vanda kaka ntangu kima yango ta yantika kumonana (katula kaka kana yo monana na mbala ya ntete – tala kitini gridzyItemInitialToVisible ). Bo ta katula yo kaka kana kima yango me monana mpenza.
gridzyItemVisibleToVisibleTa tula kaka ntangu kima mosi na kati ya grille me soba, kansi kima yango yo mosi vandaka mpi kubikala ya kumonana. Bo ta katula yo kaka kana animasio ya nsoba me mana.

Na luyantiku, kidimbu ya kisalu mpi bifwanisu yina ke monanaka mpi yina ke vilaka ke vandaka ya kuyidika na ntwala na nzila ya fichier CSS ya nene ya Gridzy.

Na nsadisa ya ba-classe yai ya CSS ya beto me tubila na zulu, nge lenda sala style ya indicateur ya processus mpi ya ba-animation na nge mosi. Kudipesa na kutala na kati ya fichier CSS ya nene ya Gridzy, sambu na kubakisa mambu yina nge zolaka kutula na zulu. Ka vena wonga ko, mawonso masonama mbote kuna.

Kuyidika Kutula

Kana nge sadila bifwanisu mingi, yo lenda vanda dibanza ya mbote na kusadisa Gridzy na kutunga grille nswalu.

Buyisa Kupumbuka Bifwanisu

Gridzy kele mpenza na mfunu ya ratio ya bifwanisu yonso sambu na kusala calcul ya grille. Mambu yai ke basisaka bima yina ke pumbukaka kana bifwanisu ya nkaka kele ya kuyilama mpi ya nkaka ve. Kana bifwanisu kele mingi, bupusi yai lenda yangisa bantu mingi.

Sambu na kubuyisa kikalulu yai, tula kaka bikalulu width mpi height sambu na bima yonso img . Yo kele mfunu na kutula ntalu ya mbote sambu na konso kifwanisu, kana ve bifwanisu zolaka kubeba. Ba ntalu ya mbote kele nene mpi nda ya kifwanisu yina:

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

Na nima Gridzy lenda sala calcul ya grille mbala mosi kukonda kuzaba nene ya kyeleka ya bifwanisu.

Kutula ya bumolo

Sambu na kutula kaka bifwanisu yina kele na kisika ya kumona, landa kaka mambu yai:

  1. Tula bikalulu width mpi height mutindu bo me tubila yo na zulu (zikisa nde nge sadila ntalu ya mbote)
  2. Tula bikalulu yonso src na data-gridzylazysrc mutindu bo me monisa yo na nsi (kana nge kele ti bikalulu srcset mpi, tula yo na kisika ya 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>

Na nima ya kusala mambu yai, bifwanisu ta yantika kaka ntangu yo ta kuma pene-pene to na kati ya kisika yina bo ke talaka bifwanisu.

Kidimbu ya kisalu

E sinsu kia salu i sinsu kiakete kia animação kimonekanga ekolo e fwaniswa kiwokelanga. Kana nge sadila ba sous-titre & ba skins , kidimbu ya kisalu ta monana na mbala mosi. Kana ve, nge fwete sala mwa bansoba:

  1. Tula konso kima img na kati ya kima div .
    (to na konso kima ya nkaka – tala HTML ya semantique sambu na mambu mingi)
  2. Yika Kifwanisu gridzyImage na konso kima 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>

Na nima ya kusala yo, nge fwete mona bidimbu ya kisalu kana bifwanisu ke baka ntangu sambu na kutula.

Bafiltre

Bafiltre na Gridzy kele kitoko ya pete kansi ya ngolo. Ata nge kele na mfunu ya filtre ya nki mutindu, yo kele mpenza ti kivuvu nde yo lenda lungana. Kima ya nge kele na yo mfunu kele kaka, mwa CSS mpi mwa bima ya HTML ...

Tala mbandu ya kisalu:

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

Bika Beto Tunga Yo Kitambi na Kitambi

1. Ntete beto kele na mfunu ya structure HTML ya mbala na mbala ya Gridzy mpi kutula bazina ya classe sambu na bima yonso ya galerie sambu beto lenda filtrer yo na nima .

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

Muna mbandu yayi tusadilanga kaka kalasi kimosi muna konso lekwa. Kansi nge lenda mpi kutula ba classe mingi sambu na kima mosi, kana kima yina fwete monana na nzila ya ba filtre mingi.

2. Na nima, beto ke yikaka mwa ba buto yina beto lenda sadila sambu na kusoba ba filtre na nima .

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

Na kisika ya ba bouton, nge lenda sadila mpi bima ya nkaka ya formilere bonso ba boîtes ya kutula bidimbu, ba bouton ya radio, bisika ya kupona mpi buna na buna.

Mutindu nge lenda mona, ntalu ya ba bouton kele ba selecteurs CSS ya mbala na mbala. Kaka ntangu beto me manisa, kana nge niema buto ya mutindu yina, bifwanisu yina ke wakana ti selector yina ya CSS ta monana. Na mutindu ya teknike, yo ke tulaka kaka nzila filter na ntalu yai.

Nge lenda sadila mpi bima mingi ya kupona yina kele mpasi mingi. Mu mbandu :not(.animals) zolaka kusala mpi, mutindu mosi .animals.people ti .animals, .people .

3. Na nsuka, beto ke kangaka ba boutons na kati ya conteneur div mpi ke kangaka yo na galerie ya Gridzy, na kutulaka nzila ya filterControls :

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

Mutindu beno lenda mona, beto ke sadilaka mpi kima mosi ya ke ponaka CSS sambu na nzila ya filterControls . E nlonga mia div ye nkumbu id misadilanga kaka mu vanga e nsongo mia mpila mu mpila mu sola muna nzila ya nsola yayina ya CSS.

Yau yina!

Kana nge ke zola nzila ya JavaScript, tala API .

API

Ata Gridzy kele ti API na yo, mambu mingi lenda salama kukonda yo, kaka na kusadilaka DOM. Gridzy ta mona yo mpi ta yidika grille. Kansi kele mpi ti API mosi ya ngolo kibeni ...

Kusadila DOM

Sambu na bisalu yonso ya Modele ya Bima ya Mukanda (DOM) beto kele ntete na mfunu ya kima ya kubumba:

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

Yika bifwanisu

Yau kele mfunu na kutunga mbote-mbote mpi kufulusa kima ya mpa ya mwana na ntwala ya kuyika yau na kima ya kontenere. Kana ve, Gridzy lenda zaba ve kiteso ya mbote.

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

Katula bifwanisu

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

Soba mambu

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

Mambu mingi ya kusadila DOM nge lenda mona na mikanda ya web ya MDN . Kuna mpe ye Nsunzula ya DOM ina.

API ya kimvwama

Sambu na kusadila API, beto kele na mfunu ya ntete ya instance ya Gridzy, yina ke kangamaka na kima ya conteneur ya Gridzy:

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

Baka Nsola

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

Baka mambu yonso

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

Tula ba nsola

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

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

Sadila filtre

Kusadila filtre kele kaka kutula filter ya option yina lenda vanda konso selecteur CSS ya mbote:

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

Yika bisalu ya kubinga diaka

BO KE sadilaka yo diaka ve banda na version 2.4.0.
Sadila Events ya bilumbu yai mpi ya ke sobaka-sobaka na kisika na yo. Tala kitini ke landa sambu na kuzaba mambu mingi.

Gridzy.js 2 ke sadisaka mwa mitindu ya kusala bisalu ya kubinga bantu. Bo lenda tula yo kaka na nzila ya API ya bo me pesaka, kansi kaka bonso ba options ya nkaka:

// 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.
  }
});
Ntendula
onBeforeOptionsChangedFonction ya callback yina ke bingamaka mbala mosi na ntwala ya kutula ba options.
onOptionsChangedFonction de callback yina ke bingamaka mbala mosi na nima ya kutula ba options.
onBeforeRenderFonction ya callback yina ke bingamaka mbala mosi na ntwala ya kusala rendez-vous.
onRenderFonction ya callback yina ke bingamaka mbala mosi na nima ya kubalula.

Sadila mambu

tuka muna nkanda 2.4.0

Nge lenda sadila mambu ya Gridzy mutindu mambu ya JavaScript:

document.addEventListener('gridzyOptionsChanged', function(event) {
    // will be executed each time the options have changed.
});

document.addEventListener('gridzyBeforeOptionsChanged', function(event) {
    // will be executed, before new options take effect.
});

Ba mambu ya nkaka ke salamaka na zulu ya kima ya conteneur ya Gridzy mpe mambu ya nkaka ke salamaka na bima ya kima mosi mosi na kati ya kima ya conteneur.

Mambu yina me salama na kima ya conteneur ya Gridzy:

Ntendula
gridzyBeforeInitTiya na ntwala ya kuyantika galerie.
gridzyInitTiya na nima ya luyantiku ya galerie.
gridzyBeforeOptionsChangedTiya na ntwala ya kutula ba options.
gridzyOptionsChangedTiya na nima ya kutula ba options.
gridzyBeforeRenderTiya na ntwala ya kupesa.
gridzyRenderTiya na nima ya kupesa.
Kana nge me konda mambu ya nkaka awa, tinda demande ya lusadisu .

event.target ke pesa kima ya kubumba bima ya Gridzy.
event.detail.instance ke pesa mbandu ya Gridzy.

Mambu me salama na bima ya kima:

Ntendula
gridzyItemBeforeInitTiya na ntwala ya kuyantika kima.
gridzyItemInitTiya na nima ya luyantiku ya kima.
gridzyItemLoadingTiya ntangu kima yango ke yantika kubasika.
gridzyItemReadyTiya ntangu kima yango kele ya kuyilama sambu na kusala calcul ya grille. Yo yina, bo me zaba kiteso ya kifwanisu yina, kansi yo lenda vanda nde kifwanisu yango kele kaka na charge.
gridzyItemCompleteTiya ntangu kifwanisu ya kima me fuluka.
Kana nge me konda mambu ya nkaka awa, tinda demande ya lusadisu .

event.target ke pesa kima yina ke wakana.
event.detail.instance ke pesa mbandu ya Gridzy.

API – Ntoto ya mvimba

Kuna ye salu yakaka ina vo ke yasikidiswa ko muna nkumbu za Gridzy. Yo yina, beto kele ve na mfunu ya kubaka mbandu na ntwala.

Baka nsola ya luyantiku

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

Baka mambu yonso ya bo me yidika

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

Tula ba nsola ya luyantiku

Yo ke tulaka ve ba options ya ba instances yonso ya Gridzy yina me yantika dezia, kansi yo ke tendulaka fondasio ya ba instances ya mpa. Kansi, kana nsola mosi ya instance mosi ya kele dezia zolaka kuvutuka na nzila ya ntalu null , yo zolaka kusadila ntalu ya mpa ya default.

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

Nge lenda sadila yau sambu na kutula ba options na ntoto ya mvimba, kana nge binga yau na ntwala nde DOM kuvanda ya kuyilama. Yo yina, nge zolaka kuvanda diaka ve na mfunu ya kutula ba options bonso bikalulu.

Bima ya ke salaka yo mosi

Na ntangu yonso yina ba automatisme yonso ya Gridzy.js 2 ke sala, yo kele ve mfunu ya kusadila bametode yina kele na nsi. Kansi ba automatisme lenda fwa sambu na kusadila Gridzy na mutindu ya kinkulu:

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

Ba nzila ya nkaka lenda salama ve na nzila ya bikalulu data-gridzy- to na nzila ya setOptions() , sambu na bikuma ya mbote:

Ntalu ya luyantikuNtendula
autoInitOnDomReadytrueKuzaba bima yina kele ti gridzy ya classe na ntangu ya kutula balutiti mpi kuyantika yo.

Bo lenda tula yo na nzila ya Gridzy.setDefaultOptions()
autoInitOnDomMutation
Muntu ya ke talaka bansoba		trueKuzaba bima ya mpa ti gridzy ya classe kaka ntangu yo ke monana na DOM mpi kuyantika yo. (mu mbandu kusadila ba transition ya balutiti)

Bo lenda tula yo na nzila ya Gridzy.setDefaultOptions()
autoSyncChildListMutation
Muntu ya ke talaka bansoba		trueYandi ke zabaka kana bo me yika to me katula bima ya bana (bifwanisu), mpi yandi ke tulaka na zulu ya grille na mbala mosi.

Kuyidika na nzila ya data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
useOptionAttributestrueKutendula kana bikalulu ya data-gridzy- ke sadilamaka mingi to ve. Kana yo kele false ba options lenda vanda kaka na nzila ya API ya mfumu.

Bo lenda tula yo na nzila ya new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncAttributesMutation
Muntu ya ke talaka bansoba		trueYandi ke zabaka bansoba ya bikalulu data-gridzy- , mpi ke tulaka grid na kilumbu na mbala mosi. Diaka, yandi ke zabaka kana bo me yika to me katula kitini gridzyAnimated mpi kana bansoba ya kikalulu style me salama. Kana useOptionAttributes kele false , yo ke zabaka kaka bansoba ya bikalulu style .

Bo lenda tula yo na nzila ya data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncChildClassMutation
Muntu ya ke talaka bansoba		trueKuzaba bansoba ya bikalulu ya class ya bima yonso ya bana (bifwanisu). Yo kele mfunu na yina me tala bafiltre.

Kuyidika na nzila ya data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncImageMutation
Muntu ya ke talaka bansoba

tuka muna nkanda 2.5.0		trueKuzaba bansoba ya bikalulu ya src ya bifwanisu yonso. Yo kele mfunu kana nge ke sadila yo ti React to babiblioteke ya mutindu mosi.

Kuyidika na nzila ya data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoRenderOnResize
Kusoba nene ya muntu ya ke tala

tuka muna nkanda 2.6.0		trueKuzaba bansoba ya nene ya kima. Relevant na yina me tala design ya ke pesa mvutu. (Na ntwala ya version 2.6.0 bo vandaka kusadila kisadilu mosi ya ke sobaka nene ya fenetre)

Bo lenda tula yo na nzila ya data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()

Kuyantika na Maboko

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

Bebisa mbandu

Na kutuba ya mbote, yo kele kiteso mosi ve ti kuyantika Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Kuvukisa Liste ya Bana na Maboko

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

Kuvukisa kima mosi ya mwana na maboko

Mbala mingi yo ke vandaka ve mfunu, katula kaka na bantangu yina ke salamaka ve mingi.

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

Kuvukisa Bikalulu na Maboko

Simba nde nsola ya useOptionAttributes fwete vanda true sambu na diambu yai.

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

Kupesa na ngolo

Mbala mingi yo ke vandaka ve mfunu, ata bo me fwa ba automatisme yonso .

gridzyInstance.render();