Mtundu wa 2.x - Gridzy.Gallery

Webusaiti iyi yazgoŵezgeka yekha. Usange chinthu chinyake chikumanyikwa makora yayi, chonde wonani ivyo vikulembeka mu Chingelezi.

Kugwiriskira Ntchito

Muŵike mafayilo gha Gridzy pa seva yinu na kughaŵika pa webusayiti yinu (kanandi mu chigaŵa cha mutu):

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

Sazgilanipo code ya HTML (kulikose mu chigaŵa cha thupi):

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

Ndivyo! Icho nchiyelezgero cakugwira nchito mwakukwana. Palije kuyambiska kwakusazgikira uko kukukhumbikwa.

Kukonzekera

Nthowa yipusu chomene yakuŵikira Gridzy ni, kugwiliskira ntchito waka vimanyikwiro vya HTML. Mukwenera waka kuŵika pakwamba mazina gha visankho na data-gridzy- . Ntheura, kuti muŵike spaceBetween , sazgiranipo waka chinthu cha 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>

Vyakusankha vikuru

	Mtengo wakukhazikika	Kulongosora
`animate`	`true`	Iwo ŵakusankha usange vithuzithuzi vikwenera kugwiliskirika nchito para gridi yasintha (mwaciyelezgero, para mukusintha kukura kwa windo la browser panji para mukuŵika sefa).
`layout`	`justified`	Kulongosora ndondomeko iyo yikugwiriskirika nchito. Gridzy.js 2 yikukhozgera mawonekero ghaŵiri ghakupambanapambana `justified` na `waterfall` . Chilichose mwa iwo chili na vigaŵa vyake vyakusazgikira vyakusankha, ivyo mungasanga pasi pa thebulu ili.
`filter`	`*`	Kusankha vithuzithuzi ivyo vikwenera kulongoreka. CSS-selector yiliyose yingaseŵezeskeka nga ni mtengo pano. Kanandi vikuŵikika mwaŵene kwizira mu `filterControls` (wonani chisankho chakulondezgapo). Wonani vyakusefa
`filterControls`		Kusankha ivyo vingaseŵezeskeka pakusefa vithuzithuzi. Chisankho chilichose cha CSS, icho chikusankha vinthu vya fomu ya HTML, chingaseŵezeskeka nga ni mtengo pano. Wonani vyakusefa
`autoConsiderScrollBars`	`true`	Kuti mumanye usani uwo ulipo usange mizere ya mpukutu yikuwoneka panji kusoŵa. Nyengo zose vikukhumbikwa kuti muleke pa `true` kupatulapo para automatism iyi yikupangiska masuzgo.

Justified Nthowa zakuŵikamo

	Mtengo wakukhazikika	Kulongosora
`autoFontSize`	`false`	Kusintha kwakujiyimira paŵekha kukura kwa fonti ya bokosi lililose kuyana na kukura kwa bokosi lakwamba. Pakuŵikapo mtima, katundu wa kukula kwa fonti wakuŵikika makora yayi.
`desiredHeight`	`190`	Kulongosora utali wakukhumbikwa wa mizere ya vinthu. Utali weneco uzamuŵerengeka mwakuyana na kukura uko kulipo na vinthu ivyo vili mu mzere.
`hideOnMissingImage`	`true`	Kubisa mabokosi agho ghali na vithuzithuzi ivyo vikatondeka kuŵikika.
`spaceBetween`	`4`	Kulongosora mtunda pakati pa vinthu mu ma pixel.
`lastRowAlign` kufuma pa mtundu wa 2.3.0	`justified`	Kulongosora nkharo ya mzere waumaliro. Vinthu vyakuzomerezgeka ni `left` , `center` , `right` na `justified` .
`singleRowAlign` kufuma mu mtundu wa 2.3.0	`justified`	Kulongosora nkharo usange pali mzere umoza pera. Vinthu vyakuzomerezgeka ni `left` , `center` , `right` na `justified` .
~~`fillLastRow`~~ ~~kufuma pa mtundu wa 2.1.0~~	~~`true`~~	KUFUMISKIKA kufuma mu mtundu wa 2.4.0 (KULEKEKA kufuma mu mtundu wa 2.3.0 ) Kuŵika vithuzithuzi mwakuti mzere waumaliro nyengo zose uzure chomene. Usange mukukhumba kuŵika vithuzithuzi mwakusintha, chingaŵa chiwemi kuti mulekeske ivi. Kugwira ntchito yayi pa mizere yimoza (wonani `fillSingleRow` ).
`fillSingleRow` kufuma pa mtundu wa 2.1.0	~~`true`~~	KUFUMISKIKA kufuma mu mtundu wa 2.4.0 (KULEKEKA kufuma mu mtundu wa 2.3.0 ) Usange pali mzere umoza pera, ukuŵika vithuzithuzi mwakuti nyengo zose mzere uwu uzure chomene. Usange vingacitika kuti muŵe na cithuzithuzi cimoza panji viŵiri pera mu cithuzithuzi, cingaŵa ciwemi kuti mulekeske ici.

Waterfall Nthowa zakuŵikamo

	Mtengo wakukhazikika	Kulongosora
`autoFontSize`	`false`	Kusintha kwakujiyimira paŵekha kukura kwa fonti ya bokosi lililose kuyana na kukura kwa bokosi lakwamba. Pakuŵikapo mtima, katundu wa kukula kwa fonti wakuŵikika makora yayi.
`desiredWidth`	`250`	Kulongosora usani wakukhumbikwa wa mizati. Utali weneco uzamuŵerengeka mwakuyana na utali uwo ulipo na unandi wa mizati.
`hideOnMissingImage`	`true`	Kubisa mabokosi agho ghali na vithuzithuzi ivyo vikatondeka kuŵikika.
`horizontalOrder`	`false`	Ikulongosora kuti vinthu vikuŵikika mwakukwana chinthu chimoza mu mzati uliwose kufuma ku mazere kuya ku mazere, ndipo vikwambaso mu mzati wa ku mazere chomene kwambura kujiyimira paŵekha umo mzati uli na malo ghanandi. Pakuŵika vinthu ivi nyengo zose viŵikikenge mu mzati uwo uli na utali uchoko chomene.
`spaceBetween`	`4`	Kulongosora mtunda pakati pa vinthu mu ma pixel.
`singleRowAlign` since version 2.7.0	`justified`	Defines the behavior when not all columns can be filled due to too few images. Allowed values are `left`, `center`, `right` and `justified`.

Vinyake vyakusankha vyapachanya

Kuti mumanye vinandi, wonani API .

HTML yakumanyikwa

Nthowa yipusu chomene ya HTML ya Gridzy ni iyi:

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

Ndipouli, Gridzy wakusinthasintha chomene ndipo mungagwiliskira ntchito pafupifupi chigaŵa chilichose cha HTML. Pali fundo zichoko waka izo mukwenera kughanaghanirapo:

Mwana waliyose wa chigaŵa cha chiŵiya wakuyimira chinthu chimoza mu gridi.
Wose ŵaŵiri chigaŵa cha chiŵiya na ŵana ŵake ŵangaŵa mtundu uliwose wa chimanyikwiro, nga ni ul na li (ghanaghanirani waka kuti muŵikeso ivyo vikuŵikika pa browser).
Usange chinthu img ni mwana wakulongozgeka yayi, chikukhumbikwira kilasi gridzyImage .

Ntheura ichi nacho nchigaŵa cha HTML chakugwira ntchito:

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

Makamaka usange mukukhumba kusazgapo vithuzithuzi, mukukhumbikwira kapangikiro ka HTML kapachanya. Kuti mumanye vinandi vyakukhwaskana na nkhani iyi, wonani pa Captions & Skins .

Malemba & Makumba

Usange mukukhumba kusazgapo vithuzithuzi ku chithuzithuzi chinu, mukwenera kulongosora umo vikuwonekera. Ntheura, vikumba vinyake ivyo vili kumanyikwa kale vikusangika. Khungu lililose ilo lili na fayilo ya CSS. Mukwenera kusazgapo fayilo iyi kusazgapo mafayilo ghakuru gha Gridzy (kanandi mu chigaŵa cha mutu):

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

Kweniso mukukhumbikwira HTML yapachanya:

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

Usange mukujifumba vya kapangikiro ka HTML, wonani Semantic HTML .

Pa mazgu ghakulembeka mungagwiliskira nchito mtundu uliwose wa chimanyikwiro, wonani kuti chili na kilasi la gridzyCaption . Chinthu cha img chikukhumbikwira kilasi la gridzyImage .

Chiyelezgero icho chili pachanya chikulongora khungu gridzySkinClassic . Kuti mugwiriskirenge ncito zina linyake, ŵikanipo waka zina la khungu na limoza mwa ivi:

Vikumba vyakusazgapo

	Makilasi agho ghalipo
Chikumba chambura kanthu malo ghawemi ghakwamba ghakupanga khungu kuwonelera mwamoyo	`gridzySkinBlank`
gridzySkinClassic kuwonelera mwamoyo	`gridzySkinClassic` `gridzySkinClassicLight`(KULEKEKA kufuma mu mtundu wa 2.6.0)
gridzySkinFullOverlay kuwonelera mwamoyo	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(KULEKEKA kufuma mu mtundu wa 2.6.0)
gridzySkinLift kuwona mwamoyo	`gridzySkinLift` `gridzySkinLiftLight`(KULEKEKA kufuma mu mtundu wa 2.6.0)
gridzySkinMagnifier Ntchito ya zoom yikusazgapo yayi kuwonelera mwamoyo	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(KULEKEKA kufuma mu mtundu wa 2.6.0)

Vikumba vyose ivyo vili pachanya apa vikukhumbikwira waka fayilo ya CSS, kweni pali vikumba vinyake ivyo vikukhumbikwiraso fayilo ya JavaScript:

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

	Makilasi agho ghalipo
gridzySkinBlur likugwira ntchito yayi mu IE kuwonelera mwamoyo	`gridzySkinBlur` `gridzySkinBlurLight`(KULEKEKA kufuma mu mtundu wa 2.6.0)
gridzySkinCard kuwonelera mwamoyo	`gridzySkinCard` `gridzySkinCardLight`(KULEKEKA kufuma mu mtundu wa 2.6.0)

Vyakusankha vya khungu

Kufuma pa mtundu wa 2.6.0 pali Visankho vyakusintha vikumba vyakupangika. Kulingana na khungu ilo muli nalo mungaŵika mtundu wa mtundu wa mtundu, mtundu wa malembo na mthunzi wa malembo. Mukwenela waka kugwiliskira ntchito CSS nga umo mukuwonera apa:

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

Wonani vyakusintha ivyo vikovwira na ivyo vikukhazikika pa khungu lililose apa:

gridzySkinClassic

Kusintha	Mtengo wakukhazikika	Uthenga
`--background`	`rgba(0, 0, 0, .7)`	wakuzomerezga mtengo uliwose wa CSS
`--color`	`rgb(255, 255, 255)`	wakuzomerezga mtundu uliwose wa CSS
`--text-shadow`	`none`	wakuzomerezga mtengo wa CSS uliwose wa malembo-mthunzi

gridzySkinFullOverlay

Kusintha	Mtengo wakukhazikika	Uthenga
`--background`	`rgba(0, 0, 0, .7)`	wakuzomerezga mtengo uliwose wa CSS
`--color`	`rgb(255, 255, 255)`	wakuzomerezga mtundu uliwose wa CSS
`--text-shadow`	`none`	wakuzomerezga mtengo wa CSS uliwose wa malembo-mthunzi

gridzySkinLift

Kusintha	Mtengo wakukhazikika	Uthenga
`--background`	`rgba(0, 0, 0, .7)`	wakuzomerezga mtengo uliwose wa CSS
`--color`	`rgb(255, 255, 255)`	wakuzomerezga mtundu uliwose wa CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	wakuzomerezga mtengo wa CSS uliwose wa malembo-mthunzi

gridzySkinMagnifier

Kusintha	Mtengo wakukhazikika	Uthenga
`--background`	`rgba(0, 0, 0, .7)`	wakuzomerezga mtengo uliwose wa CSS
`--color`	`rgb(255, 255, 255)`	wakuzomerezga mtundu uliwose wa CSS

Khungu ili likukhozgera yayi --text-shadow

gridzySkinBlur

Kusintha	Mtengo wakukhazikika	Uthenga
`--background`	`rgba(0, 0, 0, .7)`	wakuzomerezga mtengo uliwose wa CSS
`--color`	`rgb(255, 255, 255)`	wakuzomerezga mtundu uliwose wa CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	wakuzomerezga mtengo wa CSS uliwose wa malembo-mthunzi

gridzySkinCard

Kusintha	Mtengo wakukhazikika	Uthenga
`--background`	`rgba(0, 0, 0, 1)`	wakuzomerezga mtengo uliwose wa CSS
`--color`	`rgb(255, 255, 255)`	wakuzomerezga mtundu uliwose wa CSS
`--text-shadow`	`none`	wakuzomerezga mtengo wa CSS uliwose wa malembo-mthunzi

Vikumba vyose ivyo vyalongosoreka kale vikovwira waka mazgu ghambura kusuzga. Mungapanga vikumba vinu na vyakusuzga chomene. Chonde wonani pa mtundu wa Gridzy .

Mtundu wa Gridzy

Usange palije khungu ilo mwasankha kale ilo likukolerana na ivyo mukukhumba, mungapanga sitayelo yinu.

Nthowa yipusu chomene njakuti dankha mukope khungu ilo lilipo na kulisintha kuyana na ivyo mukukhumba. Khungu ilo likulongosoreka kale gridzySkinBlank kanandi lingapereka fawundeshoni yiwemi pamoza na mazgu ghawemi mu fayilo 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;
}

Mu fayilo ya CSS muzamusanga magulu ghakuti gridzySkinBlank , gridzyImage na gridzyCaption . Gridzy yekha wakukhumba yayi masambiro agha. Iwo ŵakugwiliskira ntchito waka pakupanga masitayilo ndipo ntheura mungaŵawuskapo panji kusintha zina usange mukukhumba.

Kusazgirapo apa muzamusanga kilasi la CSS gridzyItem . Gridzy wakuŵika kilasi ili mwaŵene ku ŵana wose ŵakulongozgeka ŵa chigaŵa chikuru cha chiŵiya. Ntheura, mungagwiliskira nchito kilasi ili kuti mupange sitayelo ya vinthu vya mu gallery yinu.

Maghanoghano Vinthu Vyakuzirwa

Ivyo vili mu chinthu vikwenera kuzgora mwakukwana. Ghanaghanirani kuti kukula kwa chinthu kuzamusintha nadi. Gwiliskirani nchito peresenti m’malo mwa pixel. Ndipo wonani pa chisankho cha Gridzy layout autoFontSize , iyo yikukaka fonti-kukula pa kukula kwa bokosi la chinthu.
Chinthu chilichose chikwenera kuŵa na chiŵelengero cha vigaŵa ivyo vikulongosoreka makora. Chiŵerengero cha chinthu chizamusintha yayi ndipo chikukhumbikwa kuti chiŵerengerenge gridi. Ntheura usange chinthu chilije chiŵelengero cha vigaŵa vyakumanyikwa makora, chilongosore dankha paŵekha (mwachiyelezgero kwizira mu css).

Nyengo zinyake, chingaŵa chipusu kupanga sitayelo ya ivyo vili mu vinthu pambere Gridzy wandambe. Fumiskanipo waka kilasi la gridzy panji fayilo ya javascript ya Gridzy kwa kanyengo kachoko waka chifukwa cha ichi.

Ndivyo! Ndivyo vyose mukukhumbikwira kuti muzenge khungu linu. Vikumba vinandi ivyo vyalongosoreka kale vikugwiriskira ncito yayi vinandi kuluska ivi.

Kweni pangaŵa vinandi usange mukukhumba ...

Vikumba vyapachanya

Gridzy wakuseŵezeska masambiro ghanandi gha CSS kuluska gridzyItem pera. Vinandi mwa vinthu ivi vizamuŵikika paŵekha ndipo mungavigwiliskira ntchito pakupangaso masitayilo.

Makilasi ghakuru gha vyakuŵikamo

Zina la kilasi	Kulongosora
`gridzy` Kuŵika paŵekha	Gridzy wakusanga yekha vinthu ivyo vili na kilasi ili na kuviyambiska.
`gridzyAnimated`	Vizamuŵikika mwaŵene usange chisankho cha `animate` `true` . Usange kilasi ili likuŵikika paŵekha, chisankho cha `animate` chizamuŵa `true` (kupaturako usange chili kuŵikika mwakudunjika pa `false` ).

Makilasi gha vinthu

Zina la kilasi	Kulongosora
`gridzyItem`	Chizamuŵikika mwaluŵiro apo chinthu chikwamba ndondomeko ya kuyambiska. Tizamufumiskikapo yayi.
`gridzyItemInitializing`	Chizamuŵikika mwaluŵiro apo chinthu chikwamba ndondomeko ya kuyambiska. Muzamuŵa m’malo mwa `gridzyItemReady` mwaluŵiro para chinthu chayamba chomene. Kung’anamura kuti vithuzithuzi vikuzura chomene yayi (wonani `gridzyItemLoading` ), kweni chinthu chikunozgeka kuti chiwoneke.
`gridzyItemReady`	Muzamuŵa m’malo mwa `gridzyItemInitializing` mwaluŵiro para chinthu chayamba chomene. Tizamufumiskikapo yayi. Kung’anamura kuti vithuzithuzi vikuzura chomene yayi (wonani `gridzyItemComplete` ), kweni chinthu nchakunozgeka kuti chiwoneke.
`gridzyItemLoading`	Chizamuŵikika mwaluŵiro apo chinthu chikwamba ndondomeko ya kuyambiska. Muzamuŵa m’malo mwa `gridzyItemComplete` mwaluŵiro para vithuzithuzi ivyo vili mu vithuzithuzi (kanandi chimoza pera) vyazura.
`gridzyItemComplete`	Muzamunjira mu malo `gridzyItemLoading` mwaluŵiro para vithuzithuzi ivyo vili mu vithuzithuzi (kanandi chimoza pera) vyazura. Tizamufumiskikapo yayi.
`gridzyItemInitialToVisible`	Chizamuŵikika mwaluŵiro apo chinthu chikwamba kuwoneka pa nyengo yakwamba. Chizamufumiskikapo mwaluŵiro para chinthu chawoneka chomene.
`gridzyItemVisible`	Chizamuŵikika mwaluŵiro para chinthu chawoneka makora. Chizamufumiskikapo mwaluŵiro para chinthu chamba kusoŵa.
`gridzyItemVisibleToHidden`	Chizamuŵikika mwaluŵiro apo chinthu chikwamba kusoŵa. Chizamufumiskikapo mwaluŵiro para chinthu chabisama chomene.
`gridzyItemHidden`	Chizamuŵikika mwaluŵiro para chinthu chabisama chomene. Vizamufumiskikapo para chinthu chamba kuwoneka waka.
`gridzyItemHiddenToVisible`	Chizamuŵikika mwaluŵiro apo chinthu chikwamba kuwoneka (kupaturako kuwoneka nyengo yakwamba – wonani kilasi `gridzyItemInitialToVisible` ). Chizamufumiskikapo mwaluŵiro para chinthu chawoneka chomene.
`gridzyItemVisibleToVisible`	Vizamuŵikika mwaluŵiro para chinthu chinyake mu gridi chasintha, kweni chinthu chekha chikaŵa ndipo chizamuwoneka. Vizamufumiskikapo mwaluŵiro para vithuzithuzi vyakusintha vyamara.

Pakuŵikapo mtima, chimanyikwiro cha ndondomeko na vithuzithuzi vyakuwoneka na kusoŵa vikulongosoreka kale na fayilo yikuru ya CSS ya Gridzy.

Na makalasi agha gha CSS agho ghayowoyeka pacanya apa mungapanga sitayelo yinu ya ndondomeko ya cilongolero na vithuzithuzi. Kulaŵiska mu fayilo yikuru ya CSS ya Gridzy, kuti mupulikiske ivyo mungaŵa navyo. Wofi ulije, vyose vikulembeka makora kwenekura.

Kunozga vyakunyamulira

Usange mukugwiliskira nchito vithuzithuzi vinandi, cingaŵa ciwemi kovwira Gridzy kuzenga gridi mwaluŵiro.

Lekani Kudumphira Vithuzithuzi

Gridzy wakukhumbikwira chomene chiŵelengero cha vithuzithuzi vyose kuti waŵerengerenge gridi. Fundo iyi yikupangiska kuti vinthu vijumphe usange vithuzithuzi vinyake ni vyakunozgeka ndipo vinyake ni vyambura kunozgeka. Para pali vithuzithuzi vinandi, nkhongono iyi yingaŵa yakukwiyiska comene.

Kuti muleke kuchita nthena, ŵikani waka vigaŵa width na height wa vinthu vyose img . Nchakuzirwa kuŵika vigaŵa vyakwenelera vya chithuzithuzi chilichose, usange yayi vithuzithuzi vingaŵa vyambura kwenelera. Vinthu vyakwenelera ni usani na utali wa chithunzithunzi:

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

Pamanyuma pake Gridzy wangapenda gridi nyengo yeneyiyo kwambura kukhumbikwira kumanya kukura nadi kwa vithuzithuzi.

Kukwezga kwaulesi

Kuti muŵikepo waka vithuzithuzi ivyo vikuwoneka, londezgani waka ndondomeko izi:

Ikani vimanyikwiro width na height nga umo vyalongosolekera pachanya (woneseskani kuti mukugwiliskira ntchito viwemi vyakwenelera)
Muŵikepo vimanyikwiro vyose src na data-gridzylazysrc nga umo vikulongosorekera pafupi (usange muli na vimanyikwiro srcset navyo, viŵikenipo na data-gridzylazysrcset ).

<div class="gridzy">
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img data-gridzylazysrc="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

Pamanyuma pa ndondomeko izi vithuzithuzi vizamukwera mwaluŵiro para vyaŵa pafupi panji mukati mwa malo ghakuwonerapo.

Chimanyikwiro cha ndondomeko

Chimanyikwiro cha ndondomeko ni chithuzithuzi chichoko icho chikuwoneka apo chithuzithuzi chikukwera. Usange mukugwiliskira nchito vithuzithuzi & vikumba , chimanyikwiro cha ndondomeko chizamulongoreka yekha. Apo yayi mukukhumbikwira kusintha vinthu vinyake:

Ŵikani chinthu chilichose img mu chinthu cha div .
(panji mu chinthu chilichose – wonani semantic HTML kuti mumanye vinandi)
Sazgilanipo kilasi la gridzyImage ku chinthu chilichose 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>

Pamanyuma pa ivi mukwenera kuwona vimanyikwiro vya ndondomeko usange vithuzithuzi vikutora nyengo kuti vinyamulike.

Vyakusefa

Viseŵero mu Gridzy ni vipusu chomene kweni ni vyankhongono. Nanga mungaŵa na mtundu wuli wa sefa, vikuwoneka kuti vingachitika. Vyose ivyo mukukhumba ni, CSS yichoko waka na vinyake vya HTML ...

Apa pali chiyelezgero cha ntchito:

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

Tiyeni tizenge pa Sitepe na Sitepe

1. Chakwamba tikukhumbikwira kapangikiro ka HTML ka Gridzy na kuŵika mazina gha kilasi gha vinthu vyose vya mu gallery kuti tivisefe pamanyuma .

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

Mu chiyelezgero ichi tikugwiriskira nchito kilasi limoza pera pa chinthu chilichose. Kweni mungaŵikaso makilasi ghanandi pa chinthu chimoza, usange chinthu ichi chikwenera kusangika kwizira mu viseŵero vinandi.

2. Pamanyuma tikusazgapo mabatani ghanyake agho tingasinthamo viseŵero pamanyuma .

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

Mmalo mwa mabatani, mungagwiriskiraso ncito vinthu vinyake vya fomu nga ni mabokosi ghakuwonerapo, mabatani gha pa wayilesi, minda yakusankha na vinyake.

Nga umo mukuwonera, viwemi vya mabatani ni vyakusankha vya CSS vyakumanyikwa. Tikati tamalizga waka, para munthu wakhwaska batani lanthena ili, wazamuwona vithuzithuzi ivyo vikuyana na CSS selector iyo. Mwaukadaulo, yikuŵika waka chisankho cha filter ku mtengo uwu.

Mungagwiriskiraso ncito visankho vyakusuzga comene. Mwachiyelezgero :not(.animals) vingagwiraso ntchito, nga ni .animals.people na .animals, .people .

3. Paumaliro, tikuŵika mabatani mu chiŵiya div na kughakaka ku chipinda cha Gridzy, mwa kuŵika chisankho cha 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>

Nga umo mukuwonera, tikugwiriskiraso ncito CSS yakusankha filterControls . Chiŵiya cha div na id attribute chikugwira ntchito waka kuti mabatani ghaŵe ghambura kusuzga kusankha kwizira mu CSS selector iyo.

Ndivyo!

Usange mukukhumba nthowa ya JavaScript, wonani API .

API

Nangauli Gridzy wali na API yake, vinthu vinandi vingachitika kwambura iyo, mwa kuseŵezeska waka DOM. Gridzy wazamuwona na kusintha gridi. Kweni paliso API yankhongono chomene ...

Kuseŵezeska DOM

Pa vyose vyakupangika na Document Object Model (DOM) tikukhumbikwira dankha chinthu cha chiŵiya:

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

Sazgilanipo vithuzi

Nchakuzirwa kuzenga mwakukwana na kuzuzga chigaŵa chiphya cha mwana pambere mundachisazgireko ku chigaŵa cha chiŵiya. Apo yayi Gridzy wangamanya yayi vigaŵa vyakwenelera.

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

Funyaniko vithuzithuzi

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

Sinthani vyakusankha

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

Vinandi vyakukhwaskana na DOM mungasanga pa MDN web docs . Paliso Mazgu Ghakwamba gha DOM agho ghalipo.

API ya mweneko

Kuti tigwiriskirenge nchito API, tikukhumbikwira dankha chiyelezgero cha Gridzy, icho chikukolerana na chinthu cha chiŵiya cha Gridzy:

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

Penjani Chisankho

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

Penjani vyose ivyo mungasankha

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

Kuŵika vyakusankha

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

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

Gwiliskiranipo sefa

Kugwiriskira ncito sefa ni kuŵika waka filter yakusankha iyo yingaŵa yakusankha CSS yakuzomerezgeka:

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

Sazgilanipo vyakuchemaso

KULEKEKA kufuma mu mtundu wa 2.4.0
Gwiliskirani nchito vyakucitika vya mazuŵa ghano ndiposo vyakusinthasintha m’malo mwake. Wonani chigaŵa chakulondezgapo kuti mumanye vinandi.

~~Gridzy.js 2 yikukhozgera vinyake ivyo mungasankha pa ntchito zakuchema. Vingaŵikika waka kwizira mu API ya mweneko, kweni nga ni vinyake ivyo mungasankha:~~

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

	~~Kulongosora~~
~~`onBeforeOptionsChanged`~~	~~Callback ntchito iyo yikuchemeka mwaluŵiro pambere mundaŵikepo vyakusankha.~~
~~`onOptionsChanged`~~	~~Callback ntchito iyo yikuchemeka mwaluŵiro pamanyuma pa kuŵika vyakusankha.~~
~~`onBeforeRender`~~	~~Callback ntchito iyo yikuchemeka mwaluŵiro pambere yindapelekeke.~~
~~`onRender`~~	~~Callback ntchito iyo yikuchemeka mwaluŵiro pamanyuma pa kupereka.~~

Gwiliskiranipo vyakucitika

kufuma pa mtundu wa 2.4.0

Mungaseŵezeska vyakuchitika vya Gridzy nga ni vyakuchitika vya 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.
});

Vinyake vikuchitika pa chigaŵa cha chiŵiya cha Gridzy ndipo vinyake vikuchitika pa chigaŵa cha chinthu chilichose mukati mwa chigaŵa cha chiŵiya.

Vyakuchitika ivyo vikachitika pa chinthu cha Gridzy:

	Kulongosora
`gridzyBeforeInit`	Moto pambere gallery yindambe.
`gridzyInit`	Moto panyuma pa kuyambiska kwa gallery.
`gridzyBeforeOptionsChanged`	Moto pambere mundaŵikepo vyakusankha.
`gridzyOptionsChanged`	Moto pamanyuma pa kuŵika vyakusankha.
`gridzyBeforeRender`	Moto pambere ŵandapeleke.
`gridzyRender`	Moto pamanyuma pa kupereka.

Usange mwasoŵa vyakuchitika vinyake pano, chonde tumirani pempho la wovwiri .

event.target yikupereka chinthu cha chiŵiya cha Gridzy.
event.detail.instance chikupereka chiyelezgero cha Gridzy.

Vyakuchitika ivyo vikachitika pa vinthu:

	Kulongosora
`gridzyItemBeforeInit`	Moto pambere chinthu chindayambike.
`gridzyItemInit`	Moto panyuma pa kuyambiska kwa chinthu.
`gridzyItemLoading`	Moto apo chinthu chikwamba kunyamulika.
`gridzyItemReady`	Moto para chinthu chanozgeka kuŵerengera gridi. Ntheura chiŵelengero cha vithuzithuzi chikumanyikwa, kweni chithuzithuzi chingaŵa kuti chichali kunyamulika.
`gridzyItemComplete`	Moto para chithunzithunzi cha chinthu chazura.

Usange mwasoŵa vyakuchitika vinyake pano, chonde tumirani pempho la wovwiri .

event.target yikupereka chinthu chakukhwaskana na chinthu.
event.detail.instance chikupereka chiyelezgero cha Gridzy.

API - Pa charu chose

Pali ntchito zinyake izo zikujiyimira paŵekha na viyezgelero vya Gridzy. Ntheura tikukhumbikwira yayi kusanga chiyelezgero pambere.

Penjani Chisankho cha Kukhazikika

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

Penjani vyose ivyo mungasankha

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

Kuŵika vyakusankha vyakukhazikika

Ici cikuŵika yayi vyakusankha vya vyose ivyo vyayambiskika kale vya Gridzy, kweni vikulongosora maziko gha viyezgelero viphya. Kweni, usange chisankho cha chinthu icho chilipo chingaŵikikaso kwizira mu mtengo null , chingagwiliskira ntchito mtengo uphya wakukhazikika.

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

Mungagwiriskira ncito ici kuti muŵikepo vyakusankha pa caru cose, usange mungayicema pambere DOM yindanozgeke. Ntheura mungakhumbikwira yayi kuŵika vyakusankha nga ni mikhaliro.

Vyakujiyimira paŵekha

Malinga nakuti vyose vyakujiyimira paŵekha vya Gridzy.js 2 vikugwira ntchito, palije kukhumbikwa kwa nthowa izo zili pasi apa. Kweni ma automatisms ghangazimika kuti ghagwiriskirenge nchito Gridzy mu nthowa ya chikhalidwe:

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

Vinyake mwa vinthu ivi vingaŵikika yayi kwizira mu data-gridzy- panji kwizira mu setOptions() , chifukwa cha vifukwa vyakupulikikwa:

	Mtengo wakukhazikika	Kulongosora
`autoInitOnDomReady`	`true`	Kuziŵa vinthu ivyo vili na kilasi `gridzy` pa tchati na kuviyambiska. Kuŵika kwizira mu `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Munthu Wakuwona Kusintha	`true`	Kuziŵa vinthu viphya na kilasi `gridzy` mwaluŵiro para vyawoneka mu DOM na kuviyambiska. (mwachiyelezgero pa kuseŵezeska kusintha kwa masamba) Kuŵika kwizira mu `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Munthu Wakuwona Kusintha	`true`	Kumanya usange vinthu vya ŵana (vithuzithuzi) vyasazgikira panji kufumiskikapo, ndipo vikusintha gridi mwaŵene. Kuŵika kwizira mu `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Kulongosora usange vimanyikwiro vya `data-gridzy-` vikugwiriskirika nchito kanandi panji yayi. Usange ivi ni `false` visankho vingaŵikika waka kwizira mu API ya mweneko. Kuŵika kwizira mu `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Munthu Wakuwona Kusintha	`true`	Kuwona kusintha kwa `data-gridzy-` mikhaliro, na kusintha gridi mwaŵene. Kweniso wakumanya usange kilasi la `gridzyAnimated` likusazgikira panji kufumiskikapo ndiposo usange kusintha kwa `style` kukuchitika. Usange `useOptionAttributes` ni `false` , yikuwona waka kusintha kwa `style` . Kuŵika kwizira mu `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Munthu Wakuwona Kusintha	`true`	Kuwona kusintha kwa mikhaliro `class` ya vinthu vyose vya ŵana (vithuzithuzi). Kukhumbikwa pa nkhani ya kusefa. Kuŵika kwizira mu `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Munthu Wakuwona Kusintha kufuma pa mtundu wa 2.5.0	`true`	Kuwona kusintha kwa mikhaliro `src` ya vithuzithuzi vyose. Kukhumbikwa para mukugwiliskira ntchito na React panji malaibulale ghakuyana waka. Kuŵika kwizira mu `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` Kusintha kukula kwakuwonelera kufuma pa mtundu wa 2.6.0	`true`	Kuwona kusintha kwa msinkhu wa chinthu. Kukhumbikwa pa nkhani ya kupanga mwakuzgora. (Pambere mtundu wa 2.6.0 undaŵepo, windo lakusintha kukura kwa vyakuchitika likagwiriskirika nchito) Kuŵika kwizira mu `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Yambiskani na mawoko

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

Kuparanya Chiyelezgero

Pafupifupi wakati, mwakupambana na kuyambiska Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Kusinthaniska Mndandanda wa Ŵana Mwamawoko

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

Sync chinthu chimoza cha mwana

Kanandi vikukhumbikwa yayi, kupatulapo mu milandu yakusoŵa comene.

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

Kusinthaniska Vinthu Mwamawoko

Manyani kuti chisankho cha useOptionAttributes chikwenera kuŵa true pa ichi.

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

Kuchichizga

Kanandi vikukhumbikwa yayi, nangauli vyose ivyo vikuchitika mwaŵene vyazimika .

gridzyInstance.render();

Pulagini ya WordPress

Laibulale ya JavaScript

Uteŵeti

Mtundu 2.x

Kugwiriskira Ntchito

Kukonzekera

Vyakusankha vikuru

Justified Nthowa zakuŵikamo

Waterfall Nthowa zakuŵikamo

Vinyake vyakusankha vyapachanya

HTML yakumanyikwa

Malemba & Makumba

Vikumba vyakusazgapo

Vyakusankha vya khungu

gridzySkinClassic

gridzySkinFullOverlay

gridzySkinLift

gridzySkinMagnifier

gridzySkinBlur

gridzySkinCard

Mtundu wa Gridzy

Maghanoghano Vinthu Vyakuzirwa

Vikumba vyapachanya

Makilasi ghakuru gha vyakuŵikamo

Makilasi gha vinthu

Kunozga vyakunyamulira

Lekani Kudumphira Vithuzithuzi

Kukwezga kwaulesi

Chimanyikwiro cha ndondomeko

Vyakusefa

Tiyeni tizenge pa Sitepe na Sitepe

API

Kuseŵezeska DOM

Sazgilanipo vithuzi

Funyaniko vithuzithuzi

Sinthani vyakusankha

API ya mweneko

Penjani Chisankho

Penjani vyose ivyo mungasankha

Kuŵika vyakusankha

Gwiliskiranipo sefa

Sazgilanipo vyakuchemaso

Gwiliskiranipo vyakucitika

API - Pa charu chose

Penjani Chisankho cha Kukhazikika

Penjani vyose ivyo mungasankha

Kuŵika vyakusankha vyakukhazikika

Vyakujiyimira paŵekha

Yambiskani na mawoko

Kuparanya Chiyelezgero

Kusinthaniska Mndandanda wa Ŵana Mwamawoko

Sync chinthu chimoza cha mwana

Kusinthaniska Vinthu Mwamawoko

Kuchichizga