Inguqulo 2.x – Gridzy.Gallery

Iwebhusayithi ihunyushwe ngokuzenzakalela. Uma kukhona okungacacile, sicela ubheke imibhalo yesiNgisi.

Ukusetshenziswa Okuyisisekelo

Layisha amafayela e-Gridzy kuseva yakho bese uwengeza kuwebhusayithi yakho (imvamisa esigabeni sekhanda):

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

Engeza ikhodi ye-HTML (noma yikuphi esigabeni somzimba):

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

Yilokho kuphela! Leso isibonelo esisebenza ngokugcwele. Akukho ukuqalisa okwengeziwe okudingekayo.

Ukucushwa

Indlela elula yokumisa i-Gridzy, ukusebenzisa izibaluli ze-HTML. Udinga kuphela ukufaka isiqalo samagama enketho nge data-gridzy- . Ngakho-ke, ukuze usethe inkethoPhakathi spaceBetween , mane ungeze isibaluli 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>

Izinketho Eziyinhloko

	Inani elizenzakalelayo	Incazelo
`animate`	`true`	Inquma ukuthi ingabe ukugqwayiza kufanele kusetshenziswe uma igridi ishintsha (isibonelo, lapho ushintsha usayizi wewindi lesiphequluli noma lapho usetha isihlungi).
`layout`	`justified`	Ichaza isakhiwo esisetshenzisiwe. I-Gridzy.js 2 isekela izakhiwo ezimbili ezihlukene `justified` kanye `waterfall` . Ngamunye wabo unamapharamitha wenketho eyengeziwe, ongayithola ngezansi kwaleli thebula.
`filter`	`*`	Inquma ukuthi yiziphi izithombe okufanele ziboniswe. Noma yisiphi isikhethi se-CSS singasetshenziswa njengevelu lapha. Ivamise ukusetha ngokuzenzakalelayo `filterControls` (bona inketho elandelayo). Bheka Izihlungi
`filterControls`		Inquma ukuthi yiziphi izinto zefomu ezingasetshenziswa ukuhlunga izithombe. Noma yisiphi isikhethi se-CSS, esikhetha izici zefomu le-HTML, singasetshenziswa njengevelu lapha. Bheka Izihlungi
`autoConsiderScrollBars`	`true`	Ukubikezela ububanzi obutholakalayo uma amabha okuskrola avela noma anyamalala. Kuhlala kunconywa ukuthi uyishiye `true` ngaphandle uma lokhu kuzenzakalela kudala izinkinga.

Justified Izinketho zesakhiwo

	Inani elizenzakalelayo	Incazelo
`autoFontSize`	`false`	Ibuyekeza ngokuzenzakalelayo isakhiwo sosayizi wefonti webhokisi ngalinye ngokusekelwe kusayizi webhokisi langempela. Ngokuzenzakalelayo isici sosayizi wefonti asisethwa ngokusobala.
`desiredHeight`	`190`	Ichaza ubude obufunekayo bemigqa yezinto. Ubude bangempela buzobalwa kuye ngobubanzi obutholakalayo nezinto ezisemugqeni.
`hideOnMissingImage`	`true`	Ifihla amabhokisi aqukethe izithombe ezingakwazanga ukulayishwa.
`spaceBetween`	`4`	Ichaza ibanga phakathi kwama-elementi ngamaphikseli.
`lastRowAlign` kusukela kunguqulo 2.3.0	`justified`	Ichaza ukuziphatha komugqa wokugcina. Amanani avunyelwe `left` , `center` , `right` kanye `justified` .
`singleRowAlign` kusukela kunguqulo 2.3.0	`justified`	Ichaza ukuziphatha uma kunomugqa owodwa kuphela. Amanani avunyelwe `left` , `center` , `right` kanye `justified` .
~~`fillLastRow`~~ ~~kusukela kunguqulo 2.1.0~~	~~`true`~~	KUSUSWE kusukela kunguqulo 2.4.0 (YEHLISILE kusukela kunguqulo 2.3.0 ) Uhlela izithombe ukuze umugqa wokugcina uhlale ugcwele ngokuphelele. Uma uhlela ukwengeza izithombe ngendlela eguquguqukayo, kungaba umqondo omuhle ukuvala lokhu. Ayinamthelela emigqeni eyodwa (bona `fillSingleRow` ).
`fillSingleRow` kusukela kunguqulo 2.1.0	~~`true`~~	KUSUSWE kusukela kunguqulo 2.4.0 (YEHLISILE kusukela kunguqulo 2.3.0 ) Uma kunomugqa owodwa kuphela, ihlela izithombe ukuze umugqa uhlale ugcwele ngokuphelele. Uma kungenzeka ukuthi unesithombe esisodwa noma ezimbili kuphela kugalari, kungaba umqondo omuhle ukuvala lokhu.

Izinketho zesakhiwo ze Waterfall

	Inani elizenzakalelayo	Incazelo
`autoFontSize`	`false`	Ibuyekeza ngokuzenzakalelayo isakhiwo sosayizi wefonti webhokisi ngalinye ngokusekelwe kusayizi webhokisi langempela. Ngokuzenzakalelayo isici sosayizi wefonti asisethwa ngokusobala.
`desiredWidth`	`250`	Ichaza ububanzi obufunekayo bamakholomu. Ububanzi bangempela buzobalwa kuye ngobubanzi obutholakalayo kanye nenani lamakholomu.
`hideOnMissingImage`	`true`	Ifihla amabhokisi aqukethe izithombe ezingakwazanga ukulayishwa.
`horizontalOrder`	`false`	Ichaza ukuthi ama-elementi abekwe ngokuqinile i-elementi eyodwa kukholamu ngayinye ukusuka kwesobunxele kuye kwesokudla, bese iqala futhi kukholamu yesokunxele kakhulu ezimele ukuthi iyiphi ikholomu eyindawo eyengeziwe. Ngokuzenzakalelayo ama-elementi azohlala ebekwe kukholamu enobude obuncane kakhulu.
`spaceBetween`	`4`	Ichaza ibanga phakathi kwama-elementi ngamaphikseli.
`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`.

Izinketho Eziningi Ezithuthukile

Ukuze uthole izinketho ezithuthukisiwe, hlola i -API .

I-HTML ye-Semantic

Isakhiwo se-HTML esilula kunazo zonke se-Gridzy yilesi:

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

Nokho, i-Gridzy ivumelana nezimo kakhulu futhi ungasebenzisa cishe noma yisiphi esinye isakhiwo se-HTML. Kunamaphuzu ambalwa kuphela okufanele acatshangelwe:

Ingane ngayinye yento yesiqukathi imelela into eyodwa kugridi.
Kokubili isici sesiqukathi kanye nezingane zakhona kungaba yinoma yiluphi uhlobo lomaka, njenge ul ne li (vele ucabangele ukusetha kabusha okumisiwe kwesiphequluli).
Uma i- img element kungeyona ingane eqondile ngokwayo, idinga i gridzyImage yekilasi .

Ngakho-ke lokhu futhi kuyisakhiwo se-HTML esisebenzayo:

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

Ikakhulukazi uma ufuna ukwengeza amagama-ncazo, udinga isakhiwo se-HTML esithuthukisiwe. Ukuze ufunde kabanzi ngakho, bheka amazwibela nezikhumba .

Amazwibela & Izikhumba

Uma ufuna ukwengeza amagama-ncazo kugalari yakho, udinga ukuchaza ukubukeka. Ngakho-ke, ezinye izikhumba ezichazwe ngaphambilini ziyatholakala. Isikhumba ngasinye esinefayela le-CSS. Udinga ukwengeza leli fayela ngaphezu kwamafayela e-Gridzy ayinhloko (imvamisa engxenyeni yekhanda):

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

Ngaphezu kwalokho udinga isakhiwo se-HTML esithuthukisiwe:

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

Uma uzibuza ngesakhiwo se-HTML, bheka i-Semantic HTML .

Ngamagama-ncazo ungasebenzisa noma yiluphi uhlobo lwethegi, vele uqiniseke ukuthi inesigaba se gridzyCaption . I-elementi img idinga i- gridzyImage yekilasi .

Isibonelo esingenhla sikhombisa isikhumba gridzySkinClassic . Ukuze usebenzise ehlukile, vele ufake igama lesikhumba esikhundleni salokhu:

Kufakwe Izikhumba

	Amakilasi Atholakalayo
gridzySkinBlank isiqalo esihle sokwenza isikhumba sakho ukubuka kuqala okubukhoma	`gridzySkinBlank`
gridzySkinClassic ukubuka kuqala okubukhoma	`gridzySkinClassic` `gridzySkinClassicLight`(YENSIWE kusukela kunguqulo 2.6.0)
gridzySkinFullOverlay ukubuka kuqala okubukhoma	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(YENSIWE kusukela kunguqulo 2.6.0)
gridzySkinLift ukubuka kuqala okubukhoma	`gridzySkinLift` `gridzySkinLiftLight`(YENSIWE kusukela kunguqulo 2.6.0)
gridzySkinMagnifier umsebenzi wokusondeza awufakiwe ukubuka kuqala okubukhoma	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(YENSIWE kusukela kunguqulo 2.6.0)

Zonke izikhumba ezingenhla zidinga kuphela ifayela le-CSS, kodwa kunezinye izikhumba ezidinga ifayela le-JavaScript:

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

	Amakilasi Atholakalayo
gridzySkinBlur ayisebenzi ku-IE ukubuka kuqala okubukhoma	`gridzySkinBlur` `gridzySkinBlurLight`(YENSIWE kusukela kunguqulo 2.6.0)
gridzySkinCard ukubuka kuqala okubukhoma	`gridzySkinCard` `gridzySkinCardLight`(YENSIWE kusukela kunguqulo 2.6.0)

Izinketho Zesikhumba

Kusukela inguqulo 2.6.0 kukhona Izinketho zokumisa izikhumba ezakhelwe ngaphakathi. Kuye ngesikhumba esithile ungasetha umbala wangemuva, umbala wombhalo kanye nesithunzi sombhalo. Kufanele nje usebenzise izakhiwo zangokwezifiso ze-CSS njengoba ubona lapha:

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

Bheka okuguquguqukayo okusekelwe namanani azenzakalelayo esikhumba ngasinye lapha:

gridzySkinClassic

Iyaguquguquka	Inani elizenzakalelayo	Ulwazi
`--background`	`rgba(0, 0, 0, .7)`	ivumela noma yiliphi inani langemuva le-CSS
`--color`	`rgb(255, 255, 255)`	ivumela noma yiliphi inani lombala we-CSS
`--text-shadow`	`none`	ivumela noma yiliphi inani lethunzi lombhalo we-CSS

gridzySkinFullOverlay

Iyaguquguquka	Inani elizenzakalelayo	Ulwazi
`--background`	`rgba(0, 0, 0, .7)`	ivumela noma yiliphi inani langemuva le-CSS
`--color`	`rgb(255, 255, 255)`	ivumela noma yiliphi inani lombala we-CSS
`--text-shadow`	`none`	ivumela noma yiliphi inani lethunzi lombhalo we-CSS

gridzySkinLift

Iyaguquguquka	Inani elizenzakalelayo	Ulwazi
`--background`	`rgba(0, 0, 0, .7)`	ivumela noma yiliphi inani langemuva le-CSS
`--color`	`rgb(255, 255, 255)`	ivumela noma yiliphi inani lombala we-CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	ivumela noma yiliphi inani lethunzi lombhalo we-CSS

gridzySkinMagnifier

Iyaguquguquka	Inani elizenzakalelayo	Ulwazi
`--background`	`rgba(0, 0, 0, .7)`	ivumela noma yiliphi inani langemuva le-CSS
`--color`	`rgb(255, 255, 255)`	ivumela noma yiliphi inani lombala we-CSS

Lesi sikhumba asisekeli --text-shadow

gridzySkinBlur

Iyaguquguquka	Inani elizenzakalelayo	Ulwazi
`--background`	`rgba(0, 0, 0, .7)`	ivumela noma yiliphi inani langemuva le-CSS
`--color`	`rgb(255, 255, 255)`	ivumela noma yiliphi inani lombala we-CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	ivumela noma yiliphi inani lethunzi lombhalo we-CSS

gridzySkinCard

Iyaguquguquka	Inani elizenzakalelayo	Ulwazi
`--background`	`rgba(0, 0, 0, 1)`	ivumela noma yiliphi inani langemuva le-CSS
`--color`	`rgb(255, 255, 255)`	ivumela noma yiliphi inani lombala we-CSS
`--text-shadow`	`none`	ivumela noma yiliphi inani lethunzi lombhalo we-CSS

Zonke izikhumba ezichazwe ngaphambilini zisekela kuphela amagama-ncazo ombhalo alula. Ungakha izikhumba zakho futhi eziyinkimbinkimbi kakhulu. Sicela ubheke i -Style Gridzy .

Isitayela se-Gridzy

Uma singekho isikhumba esichazwe ngaphambilini esifanelana nezidingo zakho, ungabhala esakho isitayela.

Indlela elula iwukuba uqale ukopishe isikhumba esikhona futhi usivumelanise nezidingo zakho. I gridzySkinBlank yesikhumba echazwe ngaphambilini ngokuvamile inganikeza isisekelo esihle kanye nemibhalo emihle kufayela le-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;
}

Efayelini le-CSS uzothola amakilasi gridzySkinBlank , gridzyImage kanye gridzyCaption . I-Gridzy ngokwayo ayiwadingi la makilasi. Asetshenziselwa ukwenza isitayela kuphela ngakho-ke ungawasusa noma uwaqambe kabusha uma uthanda.

Ukwengeza uzothola isigaba se-CSS gridzyItem . I-Gridzy isetha leli klasi ngokuzenzakalelayo kuzo zonke izingane eziqondile zesici sesitsha esikhulu. Ngakho-ke, ungasebenzisa leli klasi ukwenza isitayela izinto zegalari yakho.

Ingqondo Izinto Ezibalulekile

Okuqukethwe kwento kufanele kuphendule ngokugcwele. Cabanga ukuthi usayizi we-elementi uzoshintsha nakanjani. Sebenzisa amanani ephesenti esikhundleni samanani e-pixel. Futhi bheka inketho yesakhiwo se-Gridzy autoFontSize , ehlanganisa usayizi wefonti kusayizi webhokisi lento.
Into ngayinye kufanele ibe ne-aspect ratio echazwe kahle. Ukubukeka kwesilinganiso kwento akusoze kwashintsha futhi kuyadingeka ukuze kubalwe igridi. Ngakho-ke uma into ingenaso isici esichazwe kahle ngokuzenzakalelayo, yichaze kusengaphambili ngokwenza (isb nge-css).

Kwezinye izimo, kungase kube lula ukwenza isitayela okuqukethwe kwezinto ngaphambi kokuthi u-Gridzy aqalise. Vele ususe kalula i gridzy yekilasi noma ifayela le-Gridzy javascript okwesikhashana ngalokhu.

Yilokho kuphela! Yilokho kuphela okudingayo ukuze wakhe isikhumba sakho. Izikhumba eziningi ezichazwe ngaphambilini azisebenzisi ngaphezulu kwalokhu.

Kodwa kungaba nokunye uma uthanda...

Izikhumba Ezithuthukile

I-Gridzy isebenzisa amakilasi e-CSS amaningi kune gridzyItem kuphela . Eziningi zazo zizosethwa ngokuzenzakalelayo futhi ungazisebenzisela ukwenza isitayela futhi.

Amakilasi Esitsha Esiyinhloko

Igama Lekilasi	Incazelo
`gridzy` ukusetha mathupha	U-Gridzy uthola ngokuzenzakalelayo ama-elementi naleli klasi futhi awaqalise.
`gridzyAnimated`	Izosethwa ngokuzenzakalelayo uma inketho `animate` `true` . Uma lesi sigaba sisethwa mathupha, inketho `animate` izoba `true` nayo ngokuzenzakalelayo (ngaphandle uma isethwe ngokusobala ukuthi `false` ).

Into Amakilasi

Igama Lekilasi	Incazelo
`gridzyItem`	Izosethwa ngokushesha nje lapho into iqala inqubo yokuqalisa. Ayisoze yasuswa.
`gridzyItemInitializing`	Izosethwa ngokushesha nje lapho into iqala inqubo yokuqalisa. Izothathelwa indawo yi `gridzyItemReady` ngokushesha nje lapho into isiqaliswe ngokugcwele. Akusho ukuthi izithombe zilayishwe ngokugcwele (bona `gridzyItemLoading` ), kodwa into isilungele ukubonakala.
`gridzyItemReady`	Izongena esikhundleni se `gridzyItemInitializing` ngokushesha nje lapho into isiqaliswe ngokugcwele. Ayisoze yasuswa. Akusho ukuthi izithombe zilayishwe ngokugcwele (bona `gridzyItemComplete` ), kodwa into isilungele ukubonakala.
`gridzyItemLoading`	Izosethwa ngokushesha nje lapho into iqala inqubo yokuqalisa. Izothathelwa indawo yi `gridzyItemComplete` ngokushesha nje lapho izithombe eziqukethwe (imvamisa eyodwa kuphela) sezilayishwe ngokugcwele.
`gridzyItemComplete`	Izongena esikhundleni se- `gridzyItemLoading` ngokushesha nje lapho izithombe eziqukethwe (imvamisa eyodwa kuphela) sezilayishwe ngokugcwele. Ayisoze yasuswa.
`gridzyItemInitialToVisible`	Izosethwa ngokushesha nje lapho into iqala ukubonakala okokuqala. Izosuswa ngokushesha lapho into isibonakala ngokuphelele.
`gridzyItemVisible`	Izosethwa ngokushesha uma into isibonakala ngokugcwele. Izosuswa ngokushesha nje lapho into iqala ukunyamalala.
`gridzyItemVisibleToHidden`	Izosethwa ngokushesha nje lapho into iqala ukunyamalala. Izosuswa ngokushesha lapho into isifihliwe ngokuphelele.
`gridzyItemHidden`	Izosethwa ngokushesha nje lapho into isifihliwe ngokuphelele. Izosuswa ngokushesha nje lapho into iqala ukubonakala.
`gridzyItemHiddenToVisible`	Izosethwa ngokushesha nje lapho into iqala ukuvela (ngaphandle kokuvela okokuqala - bheka iklasi `gridzyItemInitialToVisible` ). Izosuswa ngokushesha lapho into isibonakala ngokuphelele.
`gridzyItemVisibleToVisible`	Izosethwa ngokushesha nje lapho okuthile kugridi kushintshile, kodwa into ngokwayo yaba futhi ihlala ibonakala. Izosuswa ngokushesha uma ukugqwayiza koshintsho kuqediwe.

Ngokuzenzakalelayo inkomba yenqubo kanye nokugqwayiza kwezithombe ezivelayo nezinyamalalayo kuchazwe kusengaphambili ifayela le-Gridzy eliyinhloko le-CSS.

Ngalawa makilasi e-CSS ashiwo ngenhla ungakwazi isitayela inkomba yakho yenqubo nokugqwayiza. Iba nesibindi sokubheka ifayela le-CSS eliyinhloko le-Gridzy, ukuze uqonde ukuthi yini okufanele uyikhiphe. Akukho ukwesaba, yonke into ibhalwe kahle lapho.

Lungiselela Ukulayisha

Uma usebenzisa izithombe eziningi, kungaba umqondo omuhle ukusiza u-Gridzy akhe igridi ngokushesha.

Vimbela Ukugxuma Izithombe

I-Gridzy idinga ngokuphelele i-aspect ratio yazo zonke izithombe ukuze ibale igridi. Lawa maqiniso aphumela ezintweni ezigxumayo uma ezinye izithombe zilungile kanti ezinye zingalungile. Uma kunezithombe eziningi, lo mphumela ungacasula kakhulu.

Ukuze uvimbele lokhu kuziphatha, vele usethe width height bezimpawu zazo zonke izici img . Kubalulekile ukusetha amanani alungile esithombe ngasinye, ngaphandle kwalokho izithombe zizohlanekezelwa. Amanani alungile ububanzi nobude bangempela besithombe esifanele:

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

Ngemuva kwalokho i-Gridzy ingakwazi ukubala igridi ngokushesha ngaphandle kwesidingo sokwazi osayizi bangempela bezithombe.

Lazy Loading

Ukulayisha kuphela izithombe ezisendaweni yokubuka ebonakalayo, vele ulandele lezi zinyathelo:

Faka width height bezimpawu njengoba kuchazwe ngenhla (qiniseka ukuthi usebenzisa amanani alungile)
Miselela zonke izici src nge data-gridzylazysrc njengoba kukhonjisiwe ngezansi (uma unezimfanelo srcset futhi, buyisela 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>

Ngemva kwalezi zinyathelo izithombe zizolayisha ngokushesha nje lapho seziseduze noma zingaphakathi kwendawo yokubuka.

Inkomba Yenqubo

Inkomba yenqubo isithonjana esincane esigqwayizayo esivela ngenkathi isithombe silayisha. Uma usebenzisa amagama-ncazo nezikhumba , inkomba yenqubo izoboniswa ngokuzenzakalelayo. Uma kungenjalo udinga ukulungisa okuthile:

Faka isici se img ngasinye ku-elementi div
(noma kunoma iyiphi enye into - bona i-HTML ye-semantic ukuze uthole okwengeziwe)
Engeza i gridzyImage yekilasi ku-elementi img ngayinye

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

Ngemuva kwalokho kufanele ubone izinkomba zenqubo uma izithombe zithatha isikhathi ukulayisha.

Izihlungi

Izihlungi ku-Gridzy zilula kakhulu kodwa zinamandla. Kungakhathaliseki ukuthi yiluphi uhlobo lwesihlungi oludingayo, maningi amathuba okuthi sibonakale. Okudingayo nje, i-CSS kancane kanye nezinto ezimbalwa zefomu le-HTML…

Nasi isibonelo sokusebenza:

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

MasiYakhe Isinyathelo Ngesinyathelo

1. Okokuqala sidinga isakhiwo se-HTML esivamile se-Gridzy futhi simise amagama ekilasi azo zonke izinto zegalari ukuze sizihlunge ngemva kwalokho.

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

Kulesi sibonelo sisebenzisa isigaba esisodwa kuphela ku-elementi ngayinye. Kodwa futhi ungasetha amakilasi amaningi ento eyodwa, uma leyo elementi kufanele itholakale ngezihlungi eziningi.

2. Bese sengeza ezinye izinkinobho lapho singashintsha khona izihlungi

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

Esikhundleni sezinkinobho, ungasebenzisa nezinye izinto zefomu ezifana namabhokisi okuhlola, izinkinobho zomsakazo, ukukhetha izinkambu nokunye.

Njengoba ubona, amanani ezinkinobho ayizikhethi ezijwayelekile ze-CSS. Ngokushesha lapho siqeda, ukuchofoza inkinobho enjalo kuzobonisa izithombe ezifana nalesi sikhethi se-CSS. Ngobuchwepheshe ivele isethe inketho filter kuleli nani.

Ungasebenzisa futhi izikhethi eziyinkimbinkimbi kakhulu. Isibonelo :not(.animals) nazo zingasebenza, kanye nokuthi .animals.people kanye .animals, .people .

3. Okokugcina, sihlanganisa izinkinobho esitsheni div futhi sizibophezele kugalari ye-Gridzy, ngokusetha inketho 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>

Njengoba ubona, sisebenzisa futhi isikhethi se-CSS kunketho filterControls . Isiqukathi div esinesibaluli id sisebenza kuphela ukwenza izinkinobho zibe lula ukukhetha ngaleso sikhethi se-CSS.

Yilokho kuphela!

Uma ukhetha isisombululo se-JavaScript, hlola i -API .

I-API

Nakuba i-Gridzy ine-API yayo, izinto eziningi zingenziwa ngaphandle kwayo, ngokukhohlisa i-DOM. UGridzy uzoyibona futhi alungise igridi. Kepha futhi kukhona i-API enamandla kakhulu…

Ukushintsha i-DOM

Kukho konke ukukhohlisa kwe-Document Object Model (DOM) sidinga kuqala into yesiqukathi:

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

Engeza Izithombe

Kubalulekile ukwakha nokugcwalisa ngokugcwele into entsha yengane ngaphambi kokuyengeza engxenyeni yesiqukathi. Uma kungenjalo i-Gridzy ayikwazi ukubona ubukhulu obufanele.

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

Susa Izithombe

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

Shintsha Izinketho

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

Okuningi mayelana nokukhohlisa i-DOM ungakuthola kumadokhumenti ewebhu e-MDN . Kukhona futhi Isingeniso se-DOM esitholakalayo.

I-Proprietary API

Ukuze sisebenzise i-API, sidinga kuqala isibonelo se-Gridzy, esibophezela engxenyeni yesiqukathi se-Gridzy:

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

Thola Inketho

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

Thola Zonke Izinketho

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

Setha Izinketho

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

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

Faka Isihlungi

Ukusebenzisa isihlungi nje ukusetha filter senketho esingaba noma yisiphi isikhethi esivumelekile se-CSS:

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

Engeza Imisebenzi Yokufona

KUHOXISIWE kusukela kunguqulo 2.4.0
Sebenzisa Imicimbi yesimanjemanje futhi evumelana nezimo kunalokho. Bheka isigaba esilandelayo ukuze uthole imininingwane.

~~I-Gridzy.js 2 isekela ezinye izinketho zemisebenzi yokuphinda ushaye ucingo. Angasethwa kuphela nge-API yokuphathelene, kodwa njengezinye izinketho:~~

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

	~~Incazelo~~
~~`onBeforeOptionsChanged`~~	~~Umsebenzi wokushayela emuva ocelwa ngqo ngaphambi kokusetha okukhethwa kukho.~~
~~`onOptionsChanged`~~	~~Umsebenzi wokushayela emuva ocelwa ngqo emva kokusetha okukhethwa kukho.~~
~~`onBeforeRender`~~	~~Umsebenzi wokushayela emuva ocelwa ngokuqondile ngaphambi kokuwunikela.~~
~~`onRender`~~	~~Umsebenzi wokuphinda ushaye ucingo ocelwa ngqo ngemva kokukhishwa.~~

Sebenzisa Imicimbi

kusukela kunguqulo 2.4.0

Ungasebenzisa imicimbi ye-Gridzy njengemicimbi evamile ye-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.
});

Eminye imicimbi ixoshwa engxenyeni yesiqukathi se-Gridzy kanti eminye imicimbi ixoshwa entweni ngayinye ngaphakathi kwesici sesiqukathi.

Imicimbi exoshwe engxenyeni yesiqukathi se-Gridzy:

	Incazelo
`gridzyBeforeInit`	Imililo ngaphambi kokuqaliswa kwegalari.
`gridzyInit`	Imililo ngemva kokuqaliswa kwegalari.
`gridzyBeforeOptionsChanged`	Imililo ngaphambi kokusetha izinketho.
`gridzyOptionsChanged`	Imililo ngemva kokusetha izinketho.
`gridzyBeforeRender`	Imililo ngaphambi kokunikeza.
`gridzyRender`	Imililo ngemva kokunikela.

Uma uphuthelwa noma yimiphi imicimbi lapha, sicela uthumele isicelo sokusekela .

event.target inikeza isici sesitsha se-Gridzy.
event.detail.instance inikeza isibonelo se-Gridzy.

Imicimbi exoshwe ezintweni:

	Incazelo
`gridzyItemBeforeInit`	Imililo ngaphambi kokuqaliswa kwento.
`gridzyItemInit`	Imililo ngemva kokuqaliswa kwento.
`gridzyItemLoading`	Iyasha uma into iqala ukulayishwa.
`gridzyItemReady`	Iyasha uma into isilungele ukubalwa ngegridi. Ngakho-ke i-aspect ratio iyaziwa, kodwa isithombe kungenzeka sisalayisha.
`gridzyItemComplete`	Iyasha uma isithombe sento silayishwe ngokugcwele.

Uma uphuthelwa noma yimiphi imicimbi lapha, sicela uthumele isicelo sokusekela .

event.target ihlinzeka ngento efanele.
event.detail.instance inikeza isibonelo se-Gridzy.

I-API - Global

Kukhona eminye imisebenzi ezimele ezimweni ze-Gridzy. Ngakho-ke asidingi ukuthola isibonelo ngaphambili.

Thola Inketho Ezenzakalelayo

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

Thola Zonke Izinketho Ezizenzakalelayo

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

Setha Izinketho Ezizenzakalelayo

Lokhu akusethi izinketho zazo zonke izimo ze-Gridzy eseziqalile, kodwa kuchaza isisekelo sezimo ezintsha. Nokho, uma inketho yesenzakalo esikhona izosethwa kabusha kusetshenziswa inani elithi null , izosebenzisa inani elizenzakalelayo elisha.

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

Ungasebenzisa lokhu ukuze usethe izinketho emhlabeni jikelele, uma ukubiza ngaphambi kokuthi i-DOM ilunge. Ngakho-ke ngeke usadinga ukusetha izinketho njengezibaluli.

I-Automatism

Uma nje wonke ama-automatism e-Gridzy.js 2 esebenza, asikho isidingo sezindlela ezingezansi. Kodwa ama-automatism angacishwa ukuze asebenzise i-Gridzy ngendlela evamile kakhulu:

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

Ezinye zalezi zinketho azikwazi ukusethwa ngezibaluli data-gridzy- noma nge setOptions() , ngenxa yezizathu ezinengqondo:

	Inani elizenzakalelayo	Incazelo
`autoInitOnDomReady`	`true`	Ithola ama-elementi ane `gridzy` yekilasi ekulayisheni kwekhasi futhi iwaqalise. Ihlelwa nge- `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` I-MutationObserver	`true`	Ithola ama-elementi amasha nge `gridzy` yekilasi ngokushesha nje lapho evela ku-DOM futhi iwaqalise. (isb ekusebenziseni ukuguqulwa kwekhasi) Ihlelwa nge- `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` I-MutationObserver	`true`	Ithola ukuthi izakhi zengane (izithombe) ziyengezwa noma ziyakhishwa yini, futhi ibuyekeze igridi ngokuzenzakalelayo. Ihlelwa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Ichaza ukuthi izibaluli `data-gridzy-` zivame ukusetshenziswa noma cha. Uma lokhu `false` izinketho zingasethwa kuphela nge-API yobunikazi. Ilungiseka nge `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` I-MutationObserver	`true`	Ithola izinguquko zezibaluli `data-gridzy-` , futhi ibuyekeze igridi ngokuzenzakalelayo. Iphinde ithole ukuthi ikilasi le `gridzyAnimated` liyengezwa noma liyasuswa futhi uma kwenzeka izinguquko zesibaluli `style` . Uma ngabe `useOptionAttributes` `false` , ithola izinguquko zesibaluli `style` kuphela. Ihlelwa nge- `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` I-MutationObserver	`true`	Ithola izinguquko zezibaluli `class` zazo zonke izici zengane (izithombe). Okuhlobene mayelana nezihlungi. Ihlelwa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` I-MutationObserver kusukela kunguqulo 2.5.0	`true`	Ithola izinguquko zezibaluli `src` zazo zonke izithombe. Ihambisana uma isetshenziswa ne-React noma imitapo yolwazi efanayo. Ihlelwa nge- `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver kusukela kunguqulo 2.6.0	`true`	Ithola izinguquko zobubanzi be-elementi. Okuhambisanayo mayelana nedizayini ephendulayo. (Ngaphambi kwenguqulo 2.6.0 kusetshenziswe isilaleli somcimbi wokushintsha usayizi wewindi) Ihlelwa nge- `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Qalisa Ngokuzenzela

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

Bhubhisa Isimo

Cishe kushiwo, okuphambene nokuqalisa i-Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Vumelanisa Uhlu Lwezingane Mathupha

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

Vumelanisa I-Elementi Yengane Eyodwa Mathupha

Ngokuvamile akudingekile, ngaphandle kwezimo ezingavamile kakhulu.

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

Vumelanisa Izibaluli Mathupha

Qaphela ukuthi inketho ye useOptionAttributes kufanele ibe true kulokhu.

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

Phoqa Ukunikezwa

Ngokuvamile akudingekile, noma ngabe wonke ama-automatism avaliwe

gridzyInstance.render();