Mofuta oa 2.x - Gridzy.Gallery

Webosaete e fetoletsoe ka bo eona. Haeba ho hong ho sa hlaka, ka kopo sheba litokomane tsa Senyesemane.

Tšebeliso ea Motheo

Kenya lifaele tsa Gridzy ho seva sa hau ebe u li kenya sebakeng sa hau sa marang-rang (hangata karolong ea hlooho):

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

Kenya khoutu ea HTML (kae kapa kae karolong ea 'mele):

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

Ho felile ke lehlohonolo! Ke mohlala o sebetsang ka botlalo. Ha ho hlokahale tlhahiso e eketsehileng.

Tlhophiso

Mokhoa o bonolo oa ho hlophisa Gridzy ke ho sebelisa litšobotsi tsa HTML feela. U hloka feela ho kenyelletsa mabitso a khetho ka data-gridzy- . Kahoo, ho seta spaceBetween tsa khetho, eketsa feela tšobotsi 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>

Likhetho tse ka Sehloohong

	Boleng ba kamehla	Tlhaloso
`animate`	`true`	E etsa qeto ea hore na lipopae li lokela ho sebelisoa ha marang-rang a fetoha (mohlala, ha u fetola fensetere ea sebatli kapa ha u hlophisa sefe).
`layout`	`justified`	E hlalosa moralo o sebelisitsoeng. Gridzy.js 2 e tšehetsa meralo e 'meli e fapaneng `justified` le `waterfall` . E 'ngoe le e' ngoe ea tsona e na le likhetho tsa eona tse eketsehileng, tseo u ka li fumanang ka tlase tafoleng ena.
`filter`	`*`	E khetha hore na ke litšoantšo life tse lokelang ho bontšoa. Khetho efe kapa efe ea CSS e ka sebelisoa e le boleng mona. Hangata e itlhophisetse ka mokhoa `filterControls` (sheba khetho e latelang). Sheba Li-Filters
`filterControls`		E khetha hore na ke likarolo life tse ka sebelisoang ho sefa litšoantšo. Khetho efe kapa efe ea CSS, e khethang likarolo tsa sebopeho sa HTML, e ka sebelisoa e le boleng mona. Sheba Li-Filters
`autoConsiderScrollBars`	`true`	Ho bolela esale pele bophara bo teng haeba mekoallo ea meqolo e hlaha kapa e nyamela. E lula e khothaletsoa ho e tlohela e le `true` ntle le haeba automatism ena e baka mathata.

Justified Likhetho tsa moralo

	Boleng ba kamehla	Tlhaloso
`autoFontSize`	`false`	E nchafatsa thepa ea boholo ba fonte ea lebokose ka leng ho latela boholo ba lebokose la mantlha. Ka tloaelo thepa ea boholo ba fonte ha e beheloe ka ho hlaka.
`desiredHeight`	`190`	E hlalosa bolelele bo lakatsehang ba mela ea lintho. Bophahamo ba 'nete bo tla baloa ho latela bophara bo fumanehang le likarolo tse moleng.
`hideOnMissingImage`	`true`	E pata mabokose a nang le litšoantšo tse sa kang tsa kengoa.
`spaceBetween`	`4`	E hlalosa sebaka se pakeng tsa likarolo ka lipikselse.
`lastRowAlign` ho tloha phetolelong ea 2.3.0	`justified`	E hlalosa boitšoaro ba mola oa ho qetela. Maemo a lumelletsoeng a `left` , `center` , `right` le `justified` .
`singleRowAlign` ho tloha phetolelong ea 2.3.0	`justified`	E hlalosa boitšoaro haeba ho na le mola o le mong feela. Maemo a lumelletsoeng a `left` , `center` , `right` le `justified` .
~~`fillLastRow`~~ ~~ho tloha phetolelong ea 2.1.0~~	~~`true`~~	E HLAHILE ho tloha ho mofuta oa 2.4.0 (E HLAHILE ho tloha ho mofuta oa 2.3.0 ) E hlophisa litšoantšo e le hore mola oa ho qetela o lule o tletse ka ho feletseng. Haeba u rera ho kenya litšoantšo ka matla, e ka ba mohopolo o motle ho koala sena. Ha e na phello meleng e le 'ngoe (sheba `fillSingleRow` ).
`fillSingleRow` ho tloha phetolelong ea 2.1.0	~~`true`~~	E HLAHILE ho tloha ho mofuta oa 2.4.0 (E HLAHILE ho tloha ho mofuta oa 2.3.0 ) Haeba ho na le mola o le mong feela, e hlophisa litšoantšo e le hore mola o lula o tletse ka ho feletseng. Haeba ho ka etsahala hore u be le setšoantšo se le seng kapa tse peli feela ka har'a la gallery, e ka ba mohopolo o motle ho koala sena.

Waterfall Layout Options

	Boleng ba kamehla	Tlhaloso
`autoFontSize`	`false`	E nchafatsa thepa ea boholo ba fonte ea lebokose ka leng ho latela boholo ba lebokose la mantlha. Ka tloaelo thepa ea boholo ba fonte ha e beheloe ka ho hlaka.
`desiredWidth`	`250`	E hlalosa bophara bo lakatsehang ba litšiea. Bophara ba sebele bo tla baloa ho latela bophara bo teng le palo ea litšiea.
`hideOnMissingImage`	`true`	E pata mabokose a nang le litšoantšo tse sa kang tsa kengoa.
`horizontalOrder`	`false`	E hlalosa hore lielemente li behiloe ka mokhoa o tiileng kholomong ka 'ngoe ho tloha ho le letšehali ho ea ho le letona, ebe e qala hape ka kholomong e ka ho le letšehali e ikemetseng hore na sebaka se hokae. Ka ho sa feleng, likarolo li tla lula li behiloe kholomong e nang le bophahamo bo bonyenyane ka ho fetisisa.
`spaceBetween`	`4`	E hlalosa sebaka se pakeng tsa likarolo ka lipikselse.
`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`.

Likhetho tse ling tse tsoetseng pele

Bakeng sa likhetho tse tsoetseng pele, sheba API .

Semantic HTML

Sebopeho se bonolo ka ho fetisisa sa HTML sa Gridzy ke sena:

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

Leha ho le joalo, Gridzy e tenyetseha haholo 'me u ka sebelisa sebopeho sefe kapa sefe sa HTML. Ho na le lintlha tse 'maloa feela tse lokelang ho nahanoa:

Ngoana e mong le e mong oa karolo ea setshelo o emela ntho e le 'ngoe ho grid.
Ka bobeli karolo ea sets'oants'o le bana ba eona e ka ba mofuta ofe kapa ofe oa li-tag, joalo ka ul le li (nahana feela ka ho seta li-default tsa sebatli).
Haeba img element e se ngoana ka boyona, e hloka sehlopha sa gridzyImage .

Kahoo sena hape ke sebopeho se sebetsang sa HTML:

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

Haholo-holo haeba u batla ho eketsa litlhaloso, u hloka sebopeho se tsoetseng pele sa HTML. Ho ithuta haholoanyane ka eona, sheba Litlhaloso le Matlalo .

Litlhaloso le Matlalo

Haeba u batla ho kenya mantsoe a hlalosang litšoantšo ho la gallery ea hau, u lokela ho hlalosa ponahalo. Ka hona, matlalo a mang a boletsoeng esale pele a fumaneha. Letlalo le leng le le leng le nang le faele ea CSS. U hloka ho kenyelletsa faele ena ho kenyelletsa lifaele tsa mantlha tsa Gridzy (hangata karolong ea hlooho):

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

Ho feta moo o hloka sebopeho se tsoetseng pele sa HTML:

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

Haeba u ntse u ipotsa ka sebopeho sa HTML, sheba HTML ea Semantic .

Bakeng sa mongolo o ka sebelisa mofuta ofe kapa ofe oa tag, etsa bonnete ba hore e na le sehlopha sa gridzyCaption . img element e hloka gridzyImage ea tlelase .

Mohlala o ka holimo o u bontša letlalo gridzySkinClassic . Ho sebelisa e fapaneng, tlosa feela lebitso la letlalo ka e 'ngoe ea tsena:

Kenyellelitsoe Matlalo

	Litlelase Tse Fumanehang
gridzySkinBlank sebaka se setle sa ho qala bakeng sa ho iketsetsa letlalo ponelopele ea bophelo	`gridzySkinBlank`
gridzySkinClassic ponelopele ea bophelo	`gridzySkinClassic` `gridzySkinClassicLight`(E HLAHISITSOE ho tloha ho mofuta oa 2.6.0)
gridzySkinFullOverlay ponelopele ea bophelo	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(E HLAHISITSOE ho tloha ho mofuta oa 2.6.0)
gridzySkinLift ponelopele ea bophelo	`gridzySkinLift` `gridzySkinLiftLight`(E HLAHISITSOE ho tloha ho mofuta oa 2.6.0)
gridzySkinMagnifier ts'ebetso ea zoom ha e kenyelelitsoe ponelopele ea bophelo	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(E HLAHISITSOE ho tloha ho mofuta oa 2.6.0)

Matlalo ohle a kaholimo a hloka feela faele ea CSS, empa ho na le matlalo a eketsehileng a hlokang faele ea JavaScript:

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

	Litlelase Tse Fumanehang
gridzySkinBlur ha e sebetse ho IE ponelopele ea bophelo	`gridzySkinBlur` `gridzySkinBlurLight`(E HLAHISITSOE ho tloha ho mofuta oa 2.6.0)
gridzySkinCard ponelopele ea bophelo	`gridzySkinCard` `gridzySkinCardLight`(E HLAHISITSOE ho tloha ho mofuta oa 2.6.0)

Khetho ea Letlalo

Ho tloha ka mofuta oa 2.6.0 ho na le Likhetho tsa ho hlophisa matlalo a hahiloeng. Ho itšetlehile ka letlalo le itseng u ka seta bokamorao ba 'mala,' mala oa mongolo le moriti oa mongolo. U tlameha feela ho sebelisa thepa ea tloaelo ea CSS joalo ka ha u bona mona:

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

Sheba mefuta e tšehetsoeng le boleng ba kamehla bakeng sa letlalo le leng le le leng mona:

gridzySkinClassic

E fetohang	Boleng ba kamehla	Boitsebiso
`--background`	`rgba(0, 0, 0, .7)`	e lumella boleng ba bokamorao ba CSS
`--color`	`rgb(255, 255, 255)`	e lumella boleng ba mmala ofe kapa ofe oa CSS
`--text-shadow`	`none`	e lumella boleng bofe kapa bofe ba moriti oa mongolo oa CSS

gridzySkinFullOverlay

E fetohang	Boleng ba kamehla	Boitsebiso
`--background`	`rgba(0, 0, 0, .7)`	e lumella boleng ba bokamorao ba CSS
`--color`	`rgb(255, 255, 255)`	e lumella boleng ba mmala ofe kapa ofe oa CSS
`--text-shadow`	`none`	e lumella boleng bofe kapa bofe ba moriti oa mongolo oa CSS

gridzySkinLift

E fetohang	Boleng ba kamehla	Boitsebiso
`--background`	`rgba(0, 0, 0, .7)`	e lumella boleng ba bokamorao ba CSS
`--color`	`rgb(255, 255, 255)`	e lumella boleng ba mmala ofe kapa ofe oa CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	e lumella boleng bofe kapa bofe ba moriti oa mongolo oa CSS

gridzySkinMagnifier

E fetohang	Boleng ba kamehla	Boitsebiso
`--background`	`rgba(0, 0, 0, .7)`	e lumella boleng ba bokamorao ba CSS
`--color`	`rgb(255, 255, 255)`	e lumella boleng ba mmala ofe kapa ofe oa CSS

Letlalo lena ha le tshehetse --text-shadow

gridzySkinBlur

E fetohang	Boleng ba kamehla	Boitsebiso
`--background`	`rgba(0, 0, 0, .7)`	e lumella boleng ba bokamorao ba CSS
`--color`	`rgb(255, 255, 255)`	e lumella boleng ba mmala ofe kapa ofe oa CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	e lumella boleng bofe kapa bofe ba moriti oa mongolo oa CSS

gridzySkinCard

E fetohang	Boleng ba kamehla	Boitsebiso
`--background`	`rgba(0, 0, 0, 1)`	e lumella boleng ba bokamorao ba CSS
`--color`	`rgb(255, 255, 255)`	e lumella boleng ba mmala ofe kapa ofe oa CSS
`--text-shadow`	`none`	e lumella boleng bofe kapa bofe ba moriti oa mongolo oa CSS

Matlalo ohle a boletsoeng esale pele a ts'ehetsa mantsoe a bonolo a mongolo. U ka iketsetsa matlalo a hao le a rarahaneng haholoanyane. Ke kopa o shebe Style Gridzy .

Mokhoa oa Gridzy

Haeba ho se na letlalo le boletsoeng esale pele le lumellanang le litlhoko tsa hau, u ka iketsetsa ea hau.

Tsela e bonolo ka ho fetisisa ke ho qala ka ho kopitsa letlalo le teng le ho le fetola ho latela litlhoko tsa hau. gridzySkinBlank ea letlalo e boletsoeng esale pele e tla fana ka motheo o motle hammoho le litokomane tse ntle faeleng ea 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;
}

Faeleng ea CSS u tla fumana lihlopha tse gridzySkinBlank , gridzyImage le gridzyCaption . Gridzy ka boeona ha e hloke lihlopha tsena. Li sebelisoa feela bakeng sa setaele, kahoo u ka li tlosa kapa ua li reha bocha ha u rata.

Ho feta moo o tla fumana sehlopha sa CSS gridzyItem . Gridzy e beha sehlopha sena ka bohona ho bana bohle ba tobileng ba karolo ea mantlha ea setshelo. Kahoo, o ka sebelisa sehlopha sena ho seta lintho tsa gallery ea hau.

Kelello ea Lintho tsa Bohlokoa

Litaba li lokela ho arabela ka botlalo. Nahana hore boholo ba element bo tla fetoha. Sebelisa liphesente tsa boleng ho e-na le boleng ba pixel. 'Me u shebe khetho ea sebopeho sa Gridzy autoFontSize , e kopanyang boholo ba fonte holim'a boholo ba lebokose la thepa.
Ntho e 'ngoe le e' ngoe e lokela ho ba le karolo e hlalositsoeng hantle. Aspect ratio ea ntho e ke ke ea fetoha 'me ea hlokahala ho bala grid. Kahoo, haeba ntho e se na likarolo tse hlalositsoeng hantle, e hlalose pele ka letsoho (mohlala, ka css).

Maemong a mang, ho ka ba bonolo ho hlophisa litaba tsa lintho pele Gridzy a qala. Tlosa feela gridzy ea sehlopha kapa faele ea Gridzy javascript ka nakoana bakeng sa sena.

Ho felile ke lehlohonolo! Ke phetho seo u se hlokang ho ikahela letlalo la hao. Boholo ba matlalo a boletsoeng esale pele ha a sebelise ho feta sena.

Empa ho ka ba le tse ling haeba u rata ...

Matlalo a tsoetseng pele

Gridzy e sebelisa lihlopha tse ngata tsa CSS ho feta feela gridzyItem . Bongata ba tsona li tla beoa ka bo eona 'me u ka li sebelisa bakeng sa setaele le tsona.

Lihlopha tse ka sehloohong tsa nkho

Lebitso la Sehlopha	Tlhaloso
`gridzy` ho seta ka letsoho	Gridzy o iphumanela likarolo tsa sehlopha sena ebe oa li qala.
`gridzyAnimated`	E tla seta ka bo eona haeba khetho ea `animate` e le `true` . Haeba sehlopha sena se setiloe ka letsoho, khetho ea `animate` le eona e tla `true` (ntle le haeba e behiloe ka ho hlaka hore `false` ).

Lintlha tsa Sehlopha

Lebitso la Sehlopha	Tlhaloso
`gridzyItem`	E tla hlophisoa hang ha ntho e qala ts'ebetso ea ho qala. E ke ke ea tlosoa.
`gridzyItemInitializing`	E tla hlophisoa hang ha ntho e qala ts'ebetso ea ho qala. E tla nkeloa sebaka ke `gridzyItemReady` hang ha ntho e qala ka botlalo. Ha ho bolele hore litšoantšo li tletse ka botlalo (sheba `gridzyItemLoading` ), empa ntho e se e loketse ho bonahala.
`gridzyItemReady`	E tla nka sebaka sa `gridzyItemInitializing` hang feela ha ntho e qalisoa ka botlalo. E ke ke ea tlosoa. Ha ho bolele hore litšoantšo li tletse ka botlalo (sheba `gridzyItemComplete` ), empa ntho e se e loketse ho bonahala.
`gridzyItemLoading`	E tla hlophisoa hang ha ntho e qala ts'ebetso ea ho qala. E tla nkeloa sebaka ke `gridzyItemComplete` hang ha litšoantšo tse teng (hangata e le 'ngoe feela) li tlatsitsoe ka botlalo.
`gridzyItemComplete`	E tla nka sebaka sa `gridzyItemLoading` hang ha litšoantšo tse teng (hangata e le 'ngoe feela) li tlatsitsoe ka botlalo. E ke ke ea tlosoa.
`gridzyItemInitialToVisible`	E tla hlophisoa hang ha ntho e qala ho hlaha ka lekhetlo la pele. E tla tlosoa hang ha ntho e bonahala ka ho feletseng.
`gridzyItemVisible`	E tla hlophisoa hang ha ntho e bonahala ka botlalo. E tla tlosoa hang ha ntho e qala ho nyamela.
`gridzyItemVisibleToHidden`	E tla hlophisoa hang ha ntho e qala ho nyamela. E tla tlosoa hang ha ntho e patiloe ka ho feletseng.
`gridzyItemHidden`	E tla behoa hang ha ntho e patiloe ka ho feletseng. E tla tlosoa hang ha ntho e qala ho hlaha.
`gridzyItemHiddenToVisible`	E tla hlophisoa hang ha ntho e qala ho hlaha (ntle le ho hlaha ka lekhetlo la pele - sheba sehlopha sa `gridzyItemInitialToVisible` ). E tla tlosoa hang ha ntho e bonahala ka ho feletseng.
`gridzyItemVisibleToVisible`	E tla behoa hang ha ntho e ka har'a marang-rang e fetoha, empa ntho ka boeona e ne e le 'me e lule e bonahala. E tla tlosoa hang ha animation ea phetoho e felile.

Ka ho sa feleng sesupo sa tšebetso le lipopae tsa ho hlaha le ho nyamela litšoantšo li hlalositsoe esale pele ke faele e kholo ea Gridzy ea CSS.

Ka litlelase tsena tsa CSS tse boletsoeng ka holimo u ka iketsetsa sesupo sa ts'ebetso ea hau le lipopae. Sebetsa ho sheba faele ea mantlha ea Gridzy ea CSS, ho utloisisa seo u tla tlameha ho se fetisa. Ha ho tšabo, ntho e 'ngoe le e' ngoe e ngotsoe hantle moo.

Optimize Loading

Haeba u sebelisa litšoantšo tse ngata, e ka ba mohopolo o motle ho thusa Gridzy ho aha marang-rang ka potlako.

Thibela ho Tlola Litšoantšo

Gridzy e hloka karo-karolelano ea litšoantšo tsohle ho bala gridi. Lintlha tsena li fella ka ho qhoma-qhoma haeba litšoantšo tse ling li lokile ha tse ling li sa loka. Ha litšoantšo li le ngata, sena se ka khopisa le ho feta.

Ho thibela boits'oaro bona, beha feela litšobotsi tsa width le height bakeng sa likarolo tsohle img . Ke habohlokoa ho beha litekanyetso tse nepahetseng bakeng sa setšoantšo ka seng, ho seng joalo litšoantšo li ne li tla sotheha. Lintlha tse nepahetseng ke bophara ba mantlha le bophahamo ba setšoantšo se fapaneng:

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

Kamora moo Gridzy a ka bala grid hang hang ntle le tlhoko ea ho tseba boholo ba litšoantšo.

Lazy Loading

Ho kenya feela litšoantšo tse sebakeng sa pono se bonahalang, latela mehato ena:

Kenya litšoaneleho tsa width le height joalo ka ha ho hlalositsoe ka holimo (etsa bonnete ba hore u sebelisa litekanyetso tse nepahetseng)
Tlosa litšobotsi tsohle tsa src ka data-gridzylazysrc joalokaha ho bontšitsoe ka tlase (haeba u na le litšobotsi tsa srcset hape, li nkele sebaka ka 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>

Ka mor'a mehato ena litšoantšo li tla laela hang ha li le haufi kapa li le ka har'a sebaka sa ho shebella.

Sesupo sa Tshebetso

Letšoao la ts'ebetso ke lets'oao le lenyane la animated le hlahang ha setšoantšo se ntse se kenya. Haeba u sebelisa li-caption & matlalo , letšoao la ts'ebetso le tla hlahisoa ka bohona. Ho seng joalo, o hloka liphetoho tse ling:

Kenya ntho e 'ngoe le e' ngoe img ho karolo ea div
(kapa nthong efe kapa efe - bona HTML ea semantic bakeng sa tse ling)
Kenya gridzyImage ea sehlopha ho karolo ka 'ngoe 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>

Ka mor'a moo o lokela ho bona matšoao a ts'ebetso haeba litšoantšo li nka nako ho kenya.

Lisefe

Lisefe ho Gridzy li bonolo haholo empa li matla. Ho sa tsotelehe hore na u hloka sefe ea mofuta ofe, ho ka etsahala hore e ka etsahala. Seo u se hlokang feela ke, CSS e nyane le likarolo tse 'maloa tsa HTML…

Mona ke mohlala o sebetsang:

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

Ha re e Haheng Mohato ka Mohato

1. Pele re hloka sebopeho se tloaelehileng sa HTML sa Gridzy mme re behe mabitso a sehlopha bakeng sa lintho tsohle tsa gallery e le hore re ka li sefa ka mor'a moo.

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

Mohlaleng ona re sebelisa sehlopha se le seng feela bakeng sa element ka 'ngoe. Empa o ka boela oa beha lihlopha tse ngata bakeng sa ntho e le 'ngoe, haeba ntho eo e ka fumaneha ka li-filters tse ngata.

2. Ebe re eketsa likonopo tse ling tseo ka tsona re ka fetolang li-filters ka nako eo

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

Sebakeng sa likonopo, o ka sebelisa likarolo tse ling tsa sebopeho joalo ka li-checkbox, likonopo tsa seea-le-moea, khetha masimo joalo-joalo.

Joalokaha u ka bona, litekanyetso tsa likonopo ke likhetho tse tloaelehileng tsa CSS. Hang ha re qeta, ho tobetsa konopo e joalo ho tla hlahisa litšoantšo tse lumellanang le sekhetho sa CSS. Ka botekgeniki e beha feela khetho ea filter ho boleng bona.

U ka boela ua sebelisa likhetho tse rarahaneng haholo. Mohlala :not(.animals) le eona e ka sebetsa, hammoho le .animals.people le .animals, .people .

3. Qetellong, re kenya likonopo ka har'a sets'oants'o div ebe re li tlamella ho Gridzy gallery, ka ho beha khetho ea 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>

Joalo ka ha u bona, re boetse re sebelisa khetho ea CSS bakeng sa khetho ea filterControls . Sets'oants'o sa div se nang le tšobotsi id se sebetsa feela ho etsa hore likonopo li be bonolo ho li khetha ka khetho eo ea CSS.

Ho felile ke lehlohonolo!

Haeba u khetha tharollo ea JavaScript, sheba API .

API

Leha Gridzy e na le API ea eona, lintho tse ngata li ka etsoa ntle le eona, feela ka ho qhekella DOM. Gridzy o tla e hlokomela ebe o lokisa marang-rang. Empa ho boetse ho na le API e matla haholo ...

Ho tsamaisa DOM

Bakeng sa maano ohle a Document Object Model (DOM) re hloka pele ntho ea setshelo:

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

Kenya Litšoantšo

Ho bohlokoa ho haha le ho tlatsa ntho e ncha ea ngoana pele u e kenya karolong ea setshelo. Ho seng joalo Gridzy ha e khone ho bona litekanyo tse nepahetseng.

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

Tlosa Litšoantšo

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

Fetola Likhetho

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

Tse ling mabapi le ho qhekella DOM u ka li fumana ho MDN web docs . Ho boetse ho na le Selelekela sa DOM se fumanehang.

Proprietary API

Ho sebelisa API, re hloka pele mohlala oa Gridzy, o tlamahaneng le karolo ea setshelo sa Gridzy:

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

Fumana Khetho

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

Fumana Likhetho Tsohle

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

Seta Dikgetho

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

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

Kenya Sefe

Ho sebelisa sefe ke feela ho beha filter ea khetho eo e ka bang khetho efe kapa efe e nepahetseng ea 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'
});

Kenya Mesebetsi ea ho letsa

E HLAHILE ho tloha ho mofuta oa 2.4.0
Sebelisa Liketsahalo tsa sejoale-joale le tse feto-fetohang ho e-na le hoo. Sheba karolo e latelang bakeng sa lintlha.

~~Gridzy.js 2 e ts'ehetsa likhetho tse ling bakeng sa lits'ebetso tsa callback. Li ka hlophisoa feela ka API ea thepa, empa joalo ka likhetho tse ling:~~

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

	~~Tlhaloso~~
~~`onBeforeOptionsChanged`~~	~~Tshebetso ya callback e bitswang ka kotloloho pele o seta dikgetho.~~
~~`onOptionsChanged`~~	~~Tshebetso ya callback e bitswang ka kotloloho kamora ho seta dikgetho.~~
~~`onBeforeRender`~~	~~Tshebetso ya callback e bitswang ka kotloloho pele o e etsa.~~
~~`onRender`~~	~~Tshebetso ya callback e bitswang ka kotloloho kamora ho fana.~~

Sebelisa Liketsahalo

ho tloha phetolelong ea 2.4.0

U ka sebelisa liketsahalo tsa Gridzy hantle joalo ka liketsahalo tse tloaelehileng tsa 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.
});

Liketsahalo tse ling li lelekoa karolong ea sets'oants'o sa Gridzy 'me liketsahalo tse ling li lelekoa ka har'a karolo ea sets'oants'o.

Liketsahalo tse thuntsoeng karolong ea setshelo sa Gridzy:

	Tlhaloso
`gridzyBeforeInit`	Mello pele ho qalisoa la gallery.
`gridzyInit`	Mello ka mor'a ho qalisoa ha gallery.
`gridzyBeforeOptionsChanged`	Mello pele u beha likhetho.
`gridzyOptionsChanged`	Mello ka mor'a ho beha likhetho.
`gridzyBeforeRender`	Ho chesa pele ho etsoa.
`gridzyRender`	Mello ka mor'a ho fana.

Haeba u hloloheloa liketsahalo leha e le life mona, ka kopo romela kopo ea tšehetso .

event.target se fana ka karolo ya setshelo sa Gridzy.
event.detail.instance e fana ka mohlala oa Gridzy.

Liketsahalo tse hlahisitsoeng ka lintlha tsa lintlha:

	Tlhaloso
`gridzyItemBeforeInit`	Mello pele ntho e qala.
`gridzyItemInit`	Mello ka mor'a ho qala ntho.
`gridzyItemLoading`	E chesa ha ntho e qala ho kenya.
`gridzyItemReady`	E chesa ha ntho e se e loketse ho baloa ka marang-rang. Kahoo palo ea likarolo e tsejoa, empa setšoantšo se ntse se ka hlaha.
`gridzyItemComplete`	E chesa ha setšoantšo sa ntho se kentsoe ka botlalo.

Haeba u hloloheloa liketsahalo leha e le life mona, ka kopo romela kopo ea tšehetso .

event.target se fana ka ntlha e amehang.
event.detail.instance e fana ka mohlala oa Gridzy.

API - Global

Ho na le mesebetsi e ikemetseng ntle le maemo a Gridzy. Kahoo ha ho hlokahale hore re fumane mohlala pele.

Fumana khetho ea kamehla

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

Fumana 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 Likhetho tsa kamehla

Sena ha se behe likhetho tsa maemo a Gridzy a seng a qalile, empa se hlalosa motheo oa maemo a macha. Leha ho le joalo, haeba khetho ea ketsahalo e teng e ka tsosolosoa ka bohlokoa null , e tla sebelisa boleng bo bocha ba kamehla.

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

U ka sebelisa sena ho beha likhetho lefatšeng ka bophara, haeba u li letsetsa pele DOM e se e lokile. Kahoo ha u sa tla hlola u hloka ho beha likhetho e le litšoaneleho.

Automatism

Ha feela li-automatisms tsohle tsa Gridzy.js 2 li ntse li sebetsa, ha ho hlokahale mekhoa e ka tlase. Empa li-automatisms li ka tima ho sebelisa Gridzy ka mokhoa oa setso:

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

Tse ling tsa likhetho tsena li ke ke tsa hlophisoa ka data-gridzy- litšobotsi kapa ka setOptions() , ka lebaka la mabaka a utloahalang:

	Boleng ba kamehla	Tlhaloso
`autoInitOnDomReady`	`true`	E lemoha likarolo tse nang le `gridzy` ea sehlopha ho kenya leqephe ebe oa li qala. E ka hlophisoa ka `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	E fumana likarolo tse ncha tse nang le `gridzy` ea sehlopha hang ha li hlaha ho DOM le ho li qala. (mohlala, ka ho sebelisa phetiso ea maqephe) E ka hlophisoa ka `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	E lemoha hore na likarolo tsa bana (litšoantšo) lia eketsoa kapa lia tlosoa, 'me e ntlafatsa grid ka bo eona. E ka hlophisoa ka `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	E hlalosa hore na litšobotsi tsa `data-gridzy-` li sebelisoa hangata kapa che. Haeba sena e le likhetho `false` li ka hlophisoa feela ho sebelisa API. E ka hlophisoa ka `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	E lemoha liphetoho tsa litšobotsi tsa `data-gridzy-` , 'me e ntlafatsa marang-rang ka bo eona. E boetse e lemoha haeba sehlopha sa `gridzyAnimated` se eketsoa kapa se tlosoa, 'me haeba liphetoho tsa `style` li etsahala. Haeba `useOptionAttributes` e `false` , e bona feela liphetoho tsa `style` . E ka hlophisoa ka `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	E lemoha liphetoho tsa litšobotsi tsa `class` sa likarolo tsohle tsa bana (litšoantšo). E amanang le li-filters. E ka hlophisoa ka `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver ho tloha phetolelong ea 2.5.0	`true`	E lemoha liphetoho tsa litšobotsi tsa `src` tsa litšoantšo tsohle. E bohlokoa ha e sebelisoa le React kapa lilaebrari tse tšoanang. E ka hlophisoa ka `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver ho tloha phetolelong ea 2.6.0	`true`	E lemoha liphetoho tsa bophara ba element. E amanang le moralo o arabelang. (Pele ho mofuta oa 2.6.0 ho ne ho sebelisoa bamameli ba ketsahalo ea ho fetola boholo ba fensetere) E ka hlophisoa ka `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Qala ka letsoho

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

Senya Mohlala

Ho thoe, ho fapana le ho qala Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Kopanya Lenane la Bana ka Bowena

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

Kopanya Karolo ea Ngoana a le Mong ka Botsona

Hangata ha e hlokehe, ntle le maemong a sa tloaelehang haholo.

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

Sync Litšobotsi ka Bowena

Hlokomela hore khetho ea useOptionAttributes e tlameha ho ba true bakeng sa sena.

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

Ho Fana ka Matla

Hangata ha e hlokehe, le haeba li-automatism tsohle li tingoa

gridzyInstance.render();