Shanduro 2.x - Gridzy.Gallery

Webhusaiti yakashandurwa yega. Kana chimwe chinhu chisina kujeka, ndapota tarisa kune zvinyorwa zveChirungu.

Basic Use

Isa iwo maGridzy mafaera kune server yako uye woawedzera kune yako webhusaiti (kazhinji iri mumusoro chikamu):

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

Wedzera iyo HTML kodhi (chero kupi zvako muchikamu chemuviri):

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

Ndizvo! Ndiwo muenzaniso unoshanda zvizere. Hapana kumwe kutanga kunodiwa.

Configuration

Iyo iri nyore nzira yekugadzirisa Gridzy ndeye, kungoshandisa HTML hunhu. Iwe unongoda prefix iyo sarudzo mazita ane data-gridzy- . Saka, kuseta iyo spaceBetween sarudzo, ingo wedzera hunhu 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>

Main Options

	Default Value	Tsanangudzo
`animate`	`true`	Inoona kana maanimation achifanira kushandiswa kana gidhi rachinja (semuenzaniso, paunenge uchigadzirisa hwindo rebrowser kana pakuseta sefa).
`layout`	`justified`	Inotsanangura marongerwo akashandiswa. Gridzy.js 2 inotsigira marongero maviri akasiyana `justified` uye `waterfall` . Imwe neimwe yadzo ine yayo yekuwedzera sarudzo paramita, iyo yaunogona kuwana pazasi tafura iyi.
`filter`	`*`	Inosarudza kuti ndeipi mifananidzo inofanira kuratidzwa. Chero CSS-selector inogona kushandiswa semutengo pano. Kazhinji kuseta otomatiki kuburikidza `filterControls` (ona inotevera sarudzo). Tarisa Masefa
`filterControls`		Inoona kuti ndedzipi fomu zvinhu zvinogona kushandiswa kusefa mifananidzo. Chero CSS inosarudza, inosarudza HTML fomu zvinhu, inogona kushandiswa sekukosha pano. Tarisa Masefa
`autoConsiderScrollBars`	`true`	Kufanotaura hupamhi huripo kana mipumburu yemipumburu ichioneka kana kunyangarika. Zvinogara zvichikurudzirwa kuti uzvisiye `true` kunze kwekunge automatism iyi ichikonzera matambudziko.

Justified Layout Options

	Default Value	Tsanangudzo
`autoFontSize`	`false`	Inogadzirisa otomatiki saizi yefonti yebhokisi rega rega zvichibva pakukura kwebhokisi rekutanga. By default font-size pfuma haina kurongeka zvakajeka.
`desiredHeight`	`190`	Inotsanangura hurefu hunodiwa hwemitsara yechinhu. Hurefu chaihwo huchaverengerwa zvichienderana nehupamhi huripo uye zvinhu zviri mumutsara.
`hideOnMissingImage`	`true`	Inoviga mabhokisi ane mifananidzo yaisakwanisa kurodha.
`spaceBetween`	`4`	Inotsanangura chinhambwe pakati pezvinhu mumapikiseli.
`lastRowAlign` kubvira shanduro 2.3.0	`justified`	Inotsanangura maitiro emutsara wekupedzisira. Hunhu hunobvumidzwa `left` , `center` , `right` uye `justified` .
`singleRowAlign` kubvira shanduro 2.3.0	`justified`	Inotsanangura maitiro kana paine mutsara mumwe chete. Hunhu hunobvumidzwa `left` , `center` , `right` uye `justified` .
~~`fillLastRow`~~ ~~kubvira shanduro 2.1.0~~	~~`true`~~	AKABVISWA kubvira shanduro 2.4.0 (KURASIRWA kubva muvhezheni 2.3.0 ) Anoronga mifananidzo kuitira kuti mutsara wekupedzisira ugare wakazadzwa zvakakwana. Kana iwe ukaronga kuisa mifananidzo zvine simba, inogona kunge iri zano rakanaka kudzima izvi. Hazvitore chinhu pamitsara imwe chete (ona `fillSingleRow` ).
`fillSingleRow` kubvira shanduro 2.1.0	~~`true`~~	AKABVISWA kubvira shanduro 2.4.0 (KURASIRWA kubva muvhezheni 2.3.0 ) Kana pane mutsara mumwe chete, inoronga mifananidzo kuitira kuti mutsara ugare wakazadzwa zvakakwana. Kana zvikaitika kuti iwe unongova nemufananidzo mumwe chete kana maviri mugalari, inogona kunge iri pfungwa yakanaka kudzima izvi.

Waterfall Layout Options

	Default Value	Tsanangudzo
`autoFontSize`	`false`	Inogadzirisa otomatiki saizi yefonti yebhokisi rega rega zvichibva pakukura kwebhokisi rekutanga. By default font-size pfuma haina kurongeka zvakajeka.
`desiredWidth`	`250`	Inotsanangura hupamhi hunodiwa hwema column. Hupamhi chaihwo huchaverengerwa zvichienderana nehupamhi huripo uye huwandu hwema column.
`hideOnMissingImage`	`true`	Inoviga mabhokisi ane mifananidzo yaisakwanisa kurodha.
`horizontalOrder`	`false`	Inotsanangura kuti maelement akaiswa zvakasimba muchikamu chimwe chete kubva kuruboshwe kuenda kurudyi, obva atanga zvakare muchikamu chekuruboshwe chakazvimiririra mune iyo koramu yakawanda. By default zvinhu zvichagara zvakaiswa mukoramu nehurefu hudiki.
`spaceBetween`	`4`	Inotsanangura chinhambwe pakati pezvinhu mumapikiseli.
`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`.

Zvimwe Zvepamusoro Sarudzo

Kuti uwane dzimwe sarudzo dzepamusoro, tarisa iyo API .

Semantic HTML

Iyo yakapusa HTML chimiro cheGridzy ndeichi:

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

Nekudaro, Gridzy inochinjika uye iwe unogona kushandisa chero chero imwe HTML chimiro. Pane zvishoma zvibodzwa zvekufunga nezvazvo:

Mwana wega wega wechinhu chemudziyo anomiririra chinhu chimwe mugridi.
Zvese zviri zviviri mudziyo wemidziyo uye vana vayo zvinogona kuve chero tag mhando, senge ul uye li (ingo funga kusetazve browser defaults).
Kana img element isiri mwana akananga pachayo, inoda kirasi gridzyImage .

Saka iyi zvakare inoshanda HTML chimiro:

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

Kunyanya kana iwe uchida kuwedzera zvinyorwa, iwe unoda yepamusoro HTML chimiro. Kuti udzidze zvakawanda nezvazvo, tarisa Captions & Skins .

Zvinyorwa uye Makanda

Kana iwe uchida kuwedzera zvinyorwa kune yako gallery, iwe unofanirwa kutsanangura chitarisiko. Naizvozvo, mamwe matehwe akafanotsanangurwa aripo. Ganda rega rega rine CSS file. Iwe unofanirwa kuwedzera iyi faira mukuwedzera kune makuru Gridzy mafaera (kazhinji ari muchikamu chemusoro):

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

Uyezve iwe unoda yepamusoro HTML chimiro:

<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 iwe uchinetseka nezve HTML chimiro, tarisa Semantic HTML .

Pachinyorwa unokwanisa kushandisa chero rudzi rwe tag, ingoita shuwa kuti ine kirasi gridzyCaption . Iyo img element inoda kirasi gridzyImage .

Muenzaniso wepamusoro unokuratidza ganda gridzySkinClassic . Kuti ushandise rakasiyana, ingotsiva zita reganda neimwe yeiyi:

Included Skins

	Makirasi Anowanikwa
gridzySkinBlank nzvimbo yakanaka yekutanga kugadzira ganda rako live preview	`gridzySkinBlank`
gridzySkinClassic live preview	`gridzySkinClassic` `gridzySkinClassicLight`(KURASIRWA kubva muvhezheni 2.6.0)
gridzySkinFullOverlay live preview	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(KURASIRWA kubva muvhezheni 2.6.0)
gridzySkinLift live preview	`gridzySkinLift` `gridzySkinLiftLight`(KURASIRWA kubva muvhezheni 2.6.0)
gridzySkinMagnifier Zoom functionality haina kubatanidzwa live preview	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(KURASIRWA kubva muvhezheni 2.6.0)

Ese matehwe ari pamusoro anongoda CSS faira, asi kune mamwe matehwe anodawo JavaScript faira:

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

	Makirasi Anowanikwa
gridzySkinBlur haishande muIE live preview	`gridzySkinBlur` `gridzySkinBlurLight`(KURASIRWA kubva muvhezheni 2.6.0)
gridzySkinCard live preview	`gridzySkinCard` `gridzySkinCardLight`(KURASIRWA kubva muvhezheni 2.6.0)

Skin Options

Sezvo shanduro 2.6.0 pane Options kugadzirisa akavakirwa-mukati matehwe. Zvichienderana neganda chairo iwe unogona kuseta iyo yekumashure ruvara, mavara mavara uye chinyorwa mumvuri. Iwe unongo shandisa CSS tsika zvivakwa sezvauri kuona pano:

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

Tarisa uone anotsigirwa akasiyana uye akasarudzika maitiro eganda rega rega pano:

gridzySkinClassic

Variable	Default Value	Information
`--background`	`rgba(0, 0, 0, .7)`	inobvumira chero CSS kumashure kukosha
`--color`	`rgb(255, 255, 255)`	inobvumira chero CSS ruvara kukosha
`--text-shadow`	`none`	inobvumira chero CSS mavara-mumvuri kukosha

gridzySkinFullOverlay

Variable	Default Value	Information
`--background`	`rgba(0, 0, 0, .7)`	inobvumira chero CSS kumashure kukosha
`--color`	`rgb(255, 255, 255)`	inobvumira chero CSS ruvara kukosha
`--text-shadow`	`none`	inobvumira chero CSS mavara-mumvuri kukosha

gridzySkinLift

Variable	Default Value	Information
`--background`	`rgba(0, 0, 0, .7)`	inobvumira chero CSS kumashure kukosha
`--color`	`rgb(255, 255, 255)`	inobvumira chero CSS ruvara kukosha
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	inobvumira chero CSS mavara-mumvuri kukosha

gridzySkinMagnifier

Variable	Default Value	Information
`--background`	`rgba(0, 0, 0, .7)`	inobvumira chero CSS kumashure kukosha
`--color`	`rgb(255, 255, 255)`	inobvumira chero CSS ruvara kukosha

Ganda iri haritsigiri --text-shadow

gridzySkinBlur

Variable	Default Value	Information
`--background`	`rgba(0, 0, 0, .7)`	inobvumira chero CSS kumashure kukosha
`--color`	`rgb(255, 255, 255)`	inobvumira chero CSS ruvara kukosha
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	inobvumira chero CSS mavara-mumvuri kukosha

gridzySkinCard

Variable	Default Value	Information
`--background`	`rgba(0, 0, 0, 1)`	inobvumira chero CSS kumashure kukosha
`--color`	`rgb(255, 255, 255)`	inobvumira chero CSS ruvara kukosha
`--text-shadow`	`none`	inobvumira chero CSS mavara-mumvuri kukosha

Matehwe ese akafanotsanangurwa anongotsigira zvinyorwa zviri nyore. Iwe unogona kugadzira ako ega uye akanyanya kuoma matehwe. Ndokumbira utarise Style Gridzy .

Style Gridzy

Kana pasina ganda rakafanotsanangurwa rinoenderana nezvido zvako, unogona kuita yako wega.

Nzira iri nyore ndeyekutanga kukopa ganda riripo uye rigadzirise kune zvaunoda. Iyo yakafanotsanangurwa yeganda gridzySkinBlank yaiwanzopa hwaro hwakanaka pamwe negwaro rakanaka mufaira reCSS:

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

Mufaira reCSS unowana makirasi gridzySkinBlank , gridzyImage uye gridzyCaption . Gridzy pachayo haidi makirasi aya. Iwo anongo shandiswa kugadzira uye saka iwe unogona kubvisa kana kutumidza zita kana uchida.

Uyezve iwe uchawana iyo CSS kirasi gridzyItem . Gridzy inoseta kirasi iyi otomatiki kune vese vana vakananga veiyo huru mudziyo chinhu. Saka, iwe unogona kushandisa kirasi iyi kutaira zvinhu zve gallery yako.

Pfungwa Hunokosha Zvinhu

Zviri mukati mechinhu chinofanira kunge chakazara. Funga kuti saizi ye element ichachinja. Shandisa zvikamu zvehuwandu pane mapixel values. Uye tarisa iyo Gridzy dhizaini sarudzo autoFontSize , iyo inosunga iyo font-saizi pane chinhu bhokisi saizi.
Chinhu chimwe nechimwe chinofanira kunge chine chiyero chakatsanangurwa. Chinhu chechimiro chechiyero hachife chachinja uye chinodiwa kuverenga grid. Saka kana chinhu chikasabva chanyatso kutsanangurwa chimiro, chifanotsanangura nemaoko (semuenzaniso kuburikidza necss).

Mune zvimwe zviitiko, zvingava nyore kugadzira zviri mukati mezvinhu Gridzy isati yatanga. Ingobvisa kirasi gridzy kana iyo Gridzy javascript faira kwechinguva nekuda kweizvi.

Ndizvo! Ndizvo chete zvaunoda kuti uvake ganda rako chairo. Mazhinji ematehwe akafanotsanangurwa haashandise zvakanyanya izvi.

Asi panogona kunge paine zvimwe kana uchida ...

Advanced Skins

Gridzy inoshandisa makirasi eCSS akawanda kupfuura gridzyItem chete. Mazhinji acho anozogadzikwa otomatiki uye iwe unogona kuzvishandisa kuita styling futi.

Main Container Makirasi

Zita reKirasi	Tsanangudzo
`gridzy` kuseta nemaoko	Gridzy anowana otomatiki zvinhu nekirasi iyi uye ozvitangisa.
`gridzyAnimated`	Ichaiswa otomatiki kana sarudzo `animate` iri `true` . Kana kirasi iyi ikaiswa pamawoko, iyo sarudzo `animate` inozoitawo `true` (kunze kwekunge yakanyatsoiswa kuti `false` ).

Item Makirasi

Zita reKirasi	Tsanangudzo
`gridzyItem`	Ichaiswa pakarepo kana chinhu chatanga maitiro ekutanga. Haazombobviswi.
`gridzyItemInitializing`	Ichaiswa pakarepo kana chinhu chatanga maitiro ekutanga. Ichatsiviwa `gridzyItemReady` kana chinhu chacho chanyatsotangwa. Hazvirevi kuti mifananidzo yakazara zvakakwana (ona `gridzyItemLoading` ), asi chinhu chagadzirira kuonekwa.
`gridzyItemReady`	Ichatsiva `gridzyItemInitializing` kana chinhu chacho chanyatsotangwa. Haazombobviswi. Hazvirevi kuti mifananidzo yakazara zvakakwana (ona `gridzyItemComplete` ), asi chinhu chakagadzirira kuonekwa.
`gridzyItemLoading`	Ichaiswa pakarepo kana chinhu chatanga maitiro ekutanga. Ichatsiviwa `gridzyItemComplete` kana mifananidzo irimo (kazhinji imwe chete) yazara.
`gridzyItemComplete`	Ichatsiva `gridzyItemLoading` kana mifananidzo irimo (kazhinji imwe chete) yazara. Haazombobviswi.
`gridzyItemInitialToVisible`	Ichaiswa kana chinhu chatanga kuoneka kekutanga. Ichabviswa pakarepo kana chinhu chacho chanyatsooneka.
`gridzyItemVisible`	Ichaiswa nokukurumidza kana chinhu chacho chanyatsooneka. Ichabviswa pakarepo kana chinhu chacho chatanga kunyangarika.
`gridzyItemVisibleToHidden`	Ichagadziriswa kana chinhu chacho chatanga kunyangarika. Ichabviswa pakarepo kana chinhu chacho chakavanzika zvachose.
`gridzyItemHidden`	Ichaiswa nekukurumidza kana chinhu chakavanzika zvachose. Ichabviswa kana chinhu chatanga kuoneka.
`gridzyItemHiddenToVisible`	Ichagadziriswa nokukurumidza apo chinhu chinotanga kuoneka (kunze kwekuonekwa kekutanga - ona kirasi `gridzyItemInitialToVisible` ). Ichabviswa pakarepo kana chinhu chacho chanyatsooneka.
`gridzyItemVisibleToVisible`	Ichaiswa nekukurumidza kana chimwe chinhu chiri mugridi chachinja, asi chinhu chacho pachacho chaive uye chinogara chichionekwa. Ichabviswa kana shanduko yeanimation yapera.

Nekumisikidza chiratidzo chemaitiro uye mapikicha ekuonekwa uye kunyangarika mifananidzo yakafanotsanangurwa neiyo Gridzy main CSS faira.

Neaya ataurwa pamusoro apa makirasi eCSS unogona kutayera yako wega maitiro chiratidzo uye mifananidzo. Shingai kutarisa muGridzy main CSS faira, kuti unzwisise zvaunofanira kudarika. Hapana kutya, zvese zvakanyorwa ipapo.

Optimize Loading

Kana iwe ukashandisa mifananidzo yakawanda, inogona kunge iri zano rakanaka kubatsira Gridzy kuvaka grid nekukurumidza.

Dzivirira Kusvetuka Mifananidzo

Gridzy inotoda chikamu chechiyero chemifananidzo yese kuverenga grid. Izvi zvinoguma nekusvetuka zvinhu kana mimwe mifananidzo yakagadzirira uye mimwe isina. Iyo yakawanda mifananidzo iripo, zvakanyanya kutsamwisa zvinogona kuita izvi.

Kuti udzivise maitiro aya, ingo seta width uye height hunhu kune ese img zvinhu. Zvakakosha kuisa maitiro akakodzera emufananidzo wega wega, kana zvisina kudaro mifananidzo yaizove yakakanganiswa. Makoshero chaiwo ndiwo hupamhi hwepakutanga uye urefu hwemufananidzo wakasiyana:

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

Mushure meizvozvo Gridzy inogona kuverenga iyo grid nekukasira pasina chikonzero chekuziva iwo chaiwo saizi emifananidzo.

Simbe Loading

Kurodha mifananidzo chete iri munzvimbo inooneka, ingotevera matanho aya:

Isa width uye height hunhu sezvatsanangurwa pamusoro (ita shuwa kushandisa izvo zvakakosha)
Tsiva hunhu hwese src data-gridzylazysrc sezvaratidzwa pazasi (kana uine srcset hunhu zvakare, tsiva iwo 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>

Mushure mematanho aya mapikicha anozorodha kana angove pedyo kana mukati mekuona.

Process Indicator

Chiratidzo chemaitiro ndicho chidiki chine animated icon chinooneka mufananidzo uchirodha. Kana iwe ukashandisa zvinyorwa & matehwe , chiratidzo chemaitiro chinozoratidzwa otomatiki. Zvikasadaro iwe unoda kumwe kugadzirisa:

Isa yega yega img chinhu mune div element
(kana mune chero chimwe chinhu - ona semantic HTML yezvimwe)
Wedzera kirasi gridzyImage kune yega img chinhu

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

Mushure meizvozvo iwe unofanirwa kuona zviratidzo zvemaitiro kana mifananidzo ichitora nguva kutakura.

Sefa

Mafirita muGridzy ari nyore asi ane simba. Hazvina mhosva kuti unoda sefa rudzii, zvinogoneka kuti zvinogoneka. Zvese zvaunoda ndezve, zvishoma CSS uye mashoma HTML fomu zvinhu ...

Heino muenzaniso unoshanda:

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

Ngativakei Danho Nedanho

1. Chekutanga tinoda yakajairwa HTML chimiro cheGridzy uye toseta mazita emakirasi ezvese zvinhu zvegalari kuitira kuti tigozvisefa mushure.

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

Mumuenzaniso uyu tinoshandisa kirasi imwe chete kune chimwe nechimwe chinhu. Asi iwe unogona zvakare kuseta akawanda makirasi echinhu chimwe chete, kana icho chinhu chichifanira kuwanikwa kuburikidza neakawanda mafirita.

2. Zvadaro tinowedzera mamwe mabhatani ayo isu tinogona kuchinja mafiritsi ipapo

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

Panzvimbo yemabhatani, iwe unogona zvakare kushandisa mamwe fomu zvinhu senge mabhokisi, mabhatani eredhiyo, sarudza minda uye zvichingodaro.

Sezvauri kuona, kukosha kwemabhatani kwakajairika CSS selectors. Tichingopedza, kudzvanya pabhatani rakadaro kucharatidza mifananidzo inoenderana neCSS selector. Nehunyanzvi inongoisa sarudzo filter kune iyi kukosha.

Iwe unogona zvakare kushandisa zvakanyanya kuomarara zvisarudzi. Semuyenzaniso :not(.animals) zvingashandawo, pamwe .animals.people and .animals, .people .

3. Pakupedzisira, tinoisa mabhatani mumudziyo we div toasunga kuGridzy gallery, nekuisa sarudzo ye 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>

Sezvauri kuona, isu tinoshandisawo CSS selector yeiyo filterControls sarudzo. Iyo div mudziyo ine id hunhu inongoshanda kuita kuti mabhatani ave nyore kusarudza kuburikidza neiyo CSS selector.

Ndizvo!

Kana iwe uchida mhinduro yeJavaScript, tarisa iyo API .

API

Kunyangwe Gridzy iine yayo API, zvinhu zvakawanda zvinogona kuitwa pasina iyo, nekungobata iyo DOM. Gridzy anozviona uye gadzirisa gridhi. Asi kune zvakare ine simba kwazvo API…

Kugadzirisa iyo DOM

Kune ese Document Object Model (DOM) manipulations isu tinotanga tinoda chinhu chemudziyo:

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

Wedzera Mifananidzo

Zvakakosha kuvaka zvizere uye kuzadza chinhu chitsva chemwana usati wawedzera kune chinhu chemudziyo. Zvikasadaro Gridzy haikwanise kuona zviyero zvakaringana.

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

Bvisa Mifananidzo

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

Change Options

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

Zvimwe pamusoro pekugadzirisa iyo DOM iwe unogona kuwana paMDN web docs . Kune zvakare Nhanganyaya kuDOM iripo.

Proprietary API

Kuti tishandise iyo API, isu tinotanga tinoda iyo Gridzy muenzaniso, inosungirirwa kune Gridzy mudziyo chinhu:

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

Wana Sarudzo

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

Wana Zvese Sarudzo

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

Set Options

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

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

Isa Sefa

Kushandisa sefa kuri kungoisa sarudzo filter inogona kuve chero inoshanda CSS sector:

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

Wedzera Callback Mabasa

KURASIRWA kubva muvhezheni 2.4.0
Shandisa zvazvino uye zvinochinjika Zviitiko panzvimbo. Ona chikamu chinotevera kuti uwane ruzivo.

~~Gridzy.js 2 inotsigira dzimwe sarudzo dzekuita callback mabasa. Ivo vanogona kusetwa chete kuburikidza neiyo proprietary API, asi senge dzimwe sarudzo:~~

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

	~~Tsanangudzo~~
~~`onBeforeOptionsChanged`~~	~~Callback basa rinoshevedzwa zvakananga usati waisa sarudzo.~~
~~`onOptionsChanged`~~	~~Callback basa rinoshevedzwa zvakananga mushure mekuseta sarudzo.~~
~~`onBeforeRender`~~	~~Callback basa rinokumbirwa zvakananga risati raita.~~
~~`onRender`~~	~~Callback basa rinoshevedzwa zvakananga mushure mekuita.~~

Shandisa Zviitiko

kubvira shanduro 2.4.0

Unogona kushandisa zviitiko zveGridzy sezvakangoita zviitiko zveJavaScript:

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

Zvimwe zviitiko zvinodzingwa paGridzy mudziyo wemidziyo uye zvimwe zviitiko zvinodzingwa pachinhu chimwe nechimwe chinhu mukati mechinhu chemudziyo.

Zviitiko zvakadzingwa paGridzy container element:

	Tsanangudzo
`gridzyBeforeInit`	Moto pamberi pekutanga gallery.
`gridzyInit`	Moto mushure mekutanga gallery.
`gridzyBeforeOptionsChanged`	Moto usati waisa sarudzo.
`gridzyOptionsChanged`	Moto mushure mekugadzirisa sarudzo.
`gridzyBeforeRender`	Moto usati wapa.
`gridzyRender`	Moto mushure mekugadzirisa.

Kana ukapotsa chero zviitiko pano, tapota tumira chikumbiro chekutsigira .

event.target inopa Gridzy container element.
event.detail.instance inopa Gridzy muenzaniso.

Zviitiko zvakadzingwa pazvinhu zvezvinhu:

	Tsanangudzo
`gridzyItemBeforeInit`	Moto usati watanga chinhu.
`gridzyItemInit`	Moto mushure mekutanga kwechinhu.
`gridzyItemLoading`	Inopisa kana chinhu chatanga kurodha.
`gridzyItemReady`	Moto kana chinhu chagadzirira kuverenga grid. Saka chikamu chechiyero chinozivikanwa, asi mufananidzo unogona kunge uchiri kurodha.
`gridzyItemComplete`	Inodzima kana mufananidzo wechinhu wakazara.

Kana ukapotsa chero zviitiko pano, tapota tumira chikumbiro chekutsigira .

event.target inopa chinhu chakasiyana.
event.detail.instance inopa Gridzy muenzaniso.

API - Global

Pane mamwe mabasa akazvimirira pane Gridzy zviitiko. Saka hatifanire kuwana muenzaniso kare.

Tora Default Option

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

Tora All Default Options

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

Seta Default Options

Izvi hazvigadzi sarudzo dzeese dzakatotangwa Gridzy zviitiko, asi zvinotsanangura hwaro hwezviitiko zvitsva. Nekudaro, kana sarudzo yechiitiko chiripo ichizogadziriswazve kuburikidza neukoshi null , inoshandisa iyo itsva default kukosha.

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

Iwe unogona kushandisa izvi kuseta sarudzo pasi rose, kana iwe ukaidana iyo DOM isati yagadzirira. Saka haungade kuseta sarudzo sehunhu zvakare.

Automatism

Chero bedzi ma automatisms eGridzy.js 2 ari kushanda, hapana chikonzero chenzira dziri pasi apa. Asi ma automatism anogona kudzimwa kushandisa Gridzy neimwe nzira yechinyakare:

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

Dzimwe dzesarudzo idzi hadzigone kusetwa kuburikidza data-gridzy- hunhu kana kuburikidza setOptions() , nekuda kwezvikonzero zvine musoro:

	Default Value	Tsanangudzo
`autoInitOnDomReady`	`true`	Inoona zvinhu zvine kirasi `gridzy` pane kurodha peji uye ozvitangisa. Inogadziriswa kuburikidza `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	Inoona zvinhu zvitsva nekirasi `gridzy` pazvinongooneka muDOM uye ozvitangisa. (semuenzaniso kushandisa shanduko yemapeji) Inogadziriswa kuburikidza `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Inoona kana zvinhu zvevana (mifananidzo) zvawedzerwa kana kubviswa, uye inogadziridza grid otomatiki. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Inotsanangura kuti `data-gridzy-` hunhu hunowanzo shandiswa here kana kuti kwete. Kana idzi dziri `false` sarudzo dzinogona kusetwa chete kuburikidza neiyo proprietary API. Settable via `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	Inoona shanduko `data-gridzy-` hunhu, uye inogadziridza grid otomatiki. Inoonawo kana iyo `gridzyAnimated` kirasi yakawedzerwa kana kubviswa uye kana `style` chechimiro shanduko chikaitika. Kana `useOptionAttributes` iri `false` , inongoona shanduko `style` . Inogadziriswa kuburikidza `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Inoona shanduko yemhando `class` yezvinhu zvese zvemwana (mifananidzo). Zvinoenderana nemasefa. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver kubvira shanduro 2.5.0	`true`	Inoona shanduko ye `src` hunhu hwemifananidzo yese. Inokodzera kana ichishandiswa neReact kana maraibhurari akafanana. Settable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver kubvira shanduro 2.6.0	`true`	Inoona shanduko yehupamhi hwechinhu. Zvinoenderana nezve inopindura dhizaini. (Pamberi pevhezheni 2.6.0 paishandiswa hwindo resize chiitiko muteereri) Inogadziriswa kuburikidza `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Tanga Nemaoko

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

Paradza Chiitiko

Zvikanzi, zvinopesana nekutanga Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Batanidza Child List Nemaoko

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

Batanidza Mwana Mumwechete Element Nemaoko

Kazhinji hazvidiwi, kunze kwezviitiko zvisingawanzoitiki.

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

Sync Attributes Nemaoko

Ziva kuti useOptionAttributes sarudzo inofanirwa kuve true pane izvi.

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

Kumanikidza Kupa

Kazhinji hazvidiwi, kunyangwe zvese automatism yakadzimwa

gridzyInstance.render();