Versio 2.x - Gridzy.Gallery

La retejo estas aŭtomate tradukita. Se io ne estas klara, bonvolu rigardi la anglan dokumentadon.

Baza Uzado

Alŝutu la Gridzy-dosierojn al via servilo kaj aldonu ilin al via retejo (kutime en la ĉefsekcio):

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

Aldonu la HTML-kodon (ie ajn en la korposekcio):

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

Jen ĝi! Tio estas plene funkcia ekzemplo. Neniu ekstra inicialigo estas bezonata.

Agordo

La plej facila maniero agordi Gridzy estas nur uzi HTML-atributojn. Vi nur bezonas antaŭfiksi la opcionomojn per data-gridzy- . Do, por agordi la opcion spaceBetween , simple aldonu la atributon 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>

Ĉefaj Opcioj

	Defaŭlta Valoro	Priskribo
`animate`	`true`	Determinas ĉu kuraĝigoj devas esti uzataj kiam la krado ŝanĝiĝas (ekzemple, dum regrandigo de la retumila fenestro aŭ kiam agordas filtrilon).
`layout`	`justified`	Difinas la uzatan aranĝon. Gridzy.js 2 subtenas la du malsamajn aranĝojn `justified` kaj `waterfall` . Ĉiu el ili havas siajn proprajn aldonajn opcioparametrojn, kiujn vi povas trovi sub ĉi tiu tabelo.
`filter`	`*`	Determinas kiuj bildoj devus esti montritaj. Ajna CSS-elektilo povas esti uzata kiel valoro ĉi tie. Kutime agordita aŭtomate per `filterControls` (vidu sekvan opcion). Rigardu Filtrilojn
`filterControls`		Determinas kiuj formalementoj povas esti uzataj por filtri la bildojn. Ĉiu CSS-elektilo, kiu elektas HTML-formelementojn, povas esti uzata kiel valoro ĉi tie. Rigardu Filtrilojn
`autoConsiderScrollBars`	`true`	Por antaŭdiri la disponeblan larĝon, se aperos aŭ malaperas rultabloj. Ĉiam rekomendas lasi ĝin `true` krom se ĉi tiu aŭtomatismo kaŭzas problemojn.

Justified Aranĝopcioj

	Defaŭlta Valoro	Priskribo
`autoFontSize`	`false`	Aŭtomate ĝisdatigas la tipargrandan posedaĵon de ĉiu skatolo laŭ la originala skatolo. Defaŭlte la posedaĵo font-size ne estas agordita eksplicite.
`desiredHeight`	`190`	Difinas la deziratan altecon de elementvicoj. La reala alteco estos kalkulita depende de la disponebla larĝo kaj la elementoj en la vico.
`hideOnMissingImage`	`true`	Kaŝas skatolojn kiuj enhavas bildojn kiuj ne povus esti ŝarĝitaj.
`spaceBetween`	`4`	Difinas la distancon inter elementoj en pikseloj.
`lastRowAlign` ekde versio 2.3.0	`justified`	Difinas la konduton de la lasta vico. Permesitaj valoroj estas `left` , `center` , `right` kaj `justified` .
`singleRowAlign` ekde versio 2.3.0	`justified`	Difinas la konduton se estas nur unu vico. Permesitaj valoroj estas `left` , `center` , `right` kaj `justified` .
~~`fillLastRow`~~ ~~ekde versio 2.1.0~~	~~`true`~~	FORIGITA ekde versio 2.4.0 (Malaprobita ekde versio 2.3.0 ) Aranĝas la bildojn tiel ke la lasta vico estas ĉiam plene plenigita. Se vi planas almeti bildojn dinamike, povus esti bona ideo malaktivigi ĉi tion. Ne efikas sur unuopaj vicoj (vidu `fillSingleRow` ).
`fillSingleRow` ekde versio 2.1.0	~~`true`~~	FORIGITA ekde versio 2.4.0 (Malaprobita ekde versio 2.3.0 ) ~~Se estas nur unu vico, ĝi aranĝas la bildojn tiel, ke la vico ĉiam estas tute plenigita. Se povas okazi, ke vi havas nur unu aŭ du bildojn en la galerio, povus esti bona ideo malaktivigi ĉi tion.~~

Waterfall Aranĝopcioj

	Defaŭlta Valoro	Priskribo
`autoFontSize`	`false`	Aŭtomate ĝisdatigas la tipargrandan posedaĵon de ĉiu skatolo laŭ la originala skatolo. Defaŭlte la posedaĵo font-size ne estas agordita eksplicite.
`desiredWidth`	`250`	Difinas la deziratan larĝon de kolumnoj. La fakta larĝo estos kalkulita depende de la disponebla larĝo kaj la nombro da kolumnoj.
`hideOnMissingImage`	`true`	Kaŝas skatolojn kiuj enhavas bildojn kiuj ne povus esti ŝarĝitaj.
`horizontalOrder`	`false`	Difinas ke la elementoj estas metitaj strikte unu elementon en ĉiu kolumno de maldekstre dekstren, tiam komenciĝas denove en la plej maldekstra kolumno sendependa en kiu kolumno estas pli loko. Defaŭlte la elementoj estos ĉiam metitaj en la kolumnon kun la plej malgranda alteco.
`spaceBetween`	`4`	Difinas la distancon inter elementoj en pikseloj.
`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`.

Pli Altnivelaj Opcioj

Por pli altnivelaj opcioj, kontrolu la API .

Semantika HTML

La plej simpla HTML-strukturo de Gridzy estas ĉi tiu:

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

Tamen, Gridzy estas tre fleksebla kaj vi povas uzi preskaŭ ajnan alian HTML-strukturon. Estas nur kelkaj punktoj por konsideri:

Ĉiu infano de la ujo-elemento reprezentas unu objekton en la krado.
Kaj la ujo-elemento kaj ĝiaj infanoj povas esti ajna tipo de etikedo, kiel ul kaj li (nur pripensu restarigi retumilon defaŭltajn).
Se img -elemento ne estas rekta infano mem, ĝi bezonas la klason gridzyImage .

Do ĉi tio ankaŭ estas funkcianta HTML-strukturo:

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

Precipe se vi volas aldoni subtitolojn, vi bezonas altnivelan HTML-strukturon. Por lerni pli pri ĝi, rigardu Captions & Skins .

Subtitoloj & Haŭtoj

Se vi volas aldoni apudskribojn al via galerio, vi devas difini la aspekton. Tial, kelkaj antaŭdifinitaj haŭtoj estas haveblaj. Ĉiu haŭto konsistanta el CSS-dosiero. Vi devas aldoni ĉi tiun dosieron aldone al la ĉefaj Gridzy-dosieroj (kutime en la ĉefsekcio):

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

Krome vi bezonas altnivelan HTML-strukturon:

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

Se vi scivolas pri la HTML-strukturo, rigardu Semantikan HTML .

Por la bildoteksto vi povas uzi ajnan tipon de etikedo, nur certigu, ke ĝi havas la klason gridzyCaption . La img elemento bezonas la klason gridzyImage .

La supra ekzemplo montras al vi la haŭton gridzySkinClassic . Por uzi alian, simple anstataŭigu la haŭtnomon per unu el ĉi tiuj:

Inkluditaj Haŭtoj

	Disponeblaj Klasoj
gridzySkinBlank bona deirpunkto por krei propran haŭton viva antaŭrigardo	`gridzySkinBlank`
gridzySkinClassic viva antaŭrigardo	`gridzySkinClassic` `gridzySkinClassicLight`(Malrekomendita ekde versio 2.6.0)
gridzySkinFullOverlay viva antaŭrigardo	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(Malrekomendita ekde versio 2.6.0)
gridzySkinLift viva antaŭrigardo	`gridzySkinLift` `gridzySkinLiftLight`(Malrekomendita ekde versio 2.6.0)
gridzySkinMagnifier zoom funkcio ne inkluzivita viva antaŭrigardo	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(Malrekomendita ekde versio 2.6.0)

Ĉiuj ĉi-supraj haŭtoj nur bezonas CSS-dosieron, sed estas pliaj haŭtoj, kiuj ankaŭ postulas JavaScript-dosieron:

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

	Disponeblaj Klasoj
gridzySkinBlur ne funkcias en IE viva antaŭrigardo	`gridzySkinBlur` `gridzySkinBlurLight`(Malrekomendita ekde versio 2.6.0)
gridzySkinCard viva antaŭrigardo	`gridzySkinCard` `gridzySkinCardLight`(Malrekomendita ekde versio 2.6.0)

Haŭtaj Opcioj

Ekde versio 2.6.0 ekzistas Opcioj por agordi la enkonstruitajn haŭtojn. Depende de la specifa haŭto vi povas agordi la fonkoloron, tekstokoloron kaj tekstan ombron. Vi nur devas uzi CSS-propraĵojn, kiel vi povas vidi ĉi tie:

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

Rigardu la subtenatajn variablojn kaj defaŭltajn valorojn por ĉiu haŭto ĉi tie:

gridzySkinClassic

Variablo	Defaŭlta Valoro	Informoj
`--background`	`rgba(0, 0, 0, .7)`	permesas ajnan CSS-fonvaloron
`--color`	`rgb(255, 255, 255)`	permesas ajnan CSS-kolorvaloron
`--text-shadow`	`none`	permesas ajnan CSS teksto-ombra valoro

gridzySkinFullOverlay

Variablo	Defaŭlta Valoro	Informoj
`--background`	`rgba(0, 0, 0, .7)`	permesas ajnan CSS-fonvaloron
`--color`	`rgb(255, 255, 255)`	permesas ajnan CSS-kolorvaloron
`--text-shadow`	`none`	permesas ajnan CSS teksto-ombra valoro

gridzySkinLift

Variablo	Defaŭlta Valoro	Informoj
`--background`	`rgba(0, 0, 0, .7)`	permesas ajnan CSS-fonvaloron
`--color`	`rgb(255, 255, 255)`	permesas ajnan CSS-kolorvaloron
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	permesas ajnan CSS teksto-ombra valoro

gridzySkinMagnifier

Variablo	Defaŭlta Valoro	Informoj
`--background`	`rgba(0, 0, 0, .7)`	permesas ajnan CSS-fonvaloron
`--color`	`rgb(255, 255, 255)`	permesas ajnan CSS-kolorvaloron

Ĉi tiu haŭto ne subtenas --text-shadow

gridzySkinBlur

Variablo	Defaŭlta Valoro	Informoj
`--background`	`rgba(0, 0, 0, .7)`	permesas ajnan CSS-fonvaloron
`--color`	`rgb(255, 255, 255)`	permesas ajnan CSS-kolorvaloron
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	permesas ajnan CSS teksto-ombra valoro

gridzySkinCard

Variablo	Defaŭlta Valoro	Informoj
`--background`	`rgba(0, 0, 0, 1)`	permesas ajnan CSS-fonvaloron
`--color`	`rgb(255, 255, 255)`	permesas ajnan CSS-kolorvaloron
`--text-shadow`	`none`	permesas ajnan CSS teksto-ombra valoro

Ĉiuj antaŭdifinitaj haŭtoj nur subtenas simplajn tekstajn subtitolojn. Vi povas krei viajn proprajn kaj pli kompleksajn haŭtojn. Bonvolu rigardi Style Gridzy .

Stilo Gridzy

Se neniu antaŭdifinita haŭto taŭgas por viaj bezonoj, vi povas stiligi vian propran.

La plej facila maniero estas unue kopii ekzistantan haŭton kaj adapti ĝin al viaj propraj bezonoj. La antaŭdifinita haŭto gridzySkinBlank kutime disponigus bonan fundamenton kaj ankaŭ bonan dokumentadon en la CSS-dosiero:

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

En la CSS-dosiero vi trovos la klasojn gridzySkinBlank , gridzyImage kaj gridzyCaption . Gridzy mem ne bezonas ĉi tiujn klasojn. Ili estas uzataj nur por stilado kaj do vi povas forigi aŭ renomi ilin se vi volas.

Aldone vi trovos la CSS-klason gridzyItem . Gridzy agordas ĉi tiun klason aŭtomate al ĉiuj rektaj infanoj de la ĉefa ujo-elemento. Do, vi povas uzi ĉi tiun klason por stiligi la erojn de via galerio.

Atentu Gravajn Afojn

La enhavo de la objekto devas esti plene respondema. Konsideru, ke la elemento grandeco certe ŝanĝiĝos. Uzu procentajn valorojn anstataŭ pikselaj valoroj. Kaj rigardu la opcion de aranĝo de Gridzy autoFontSize , kiu ligas la tiparon-grandecon al la ero-skatolo grandeco.
Ĉiu objekto devus havi bone difinitan bildformaton. La proporcio de la objekto neniam ŝanĝiĝos kaj necesas por kalkuli la kradon. Do se ero ne aŭtomate havas bone difinitan bildformaton, antaŭdifinu ĝin permane (ekz. per css).

En kelkaj kazoj, povas esti pli facile stiligi la enhavon de la eroj antaŭ ol Gridzy pravaloriĝas. Por tio simple forigu la klason gridzy aŭ la javaskripto-dosieron de Gridzy provizore.

Jen ĝi! Tio estas ĉio, kion vi bezonas por konstrui vian propran haŭton. La plej multaj el la antaŭdifinitaj haŭtoj ne uzas pli ol ĉi tio.

Sed povus esti pli, se vi ŝatas...

Altnivelaj Haŭtoj

Gridzy uzas pli da CSS-klasoj ol nur gridzyItem . Plej multaj el ili estos aŭtomate agordita kaj vi povas uzi ilin ankaŭ por stilado.

Ĉefaj Ujklasoj

Klaso Nomo	Priskribo
`gridzy` por agordi permane	Gridzy aŭtomate trovas elementojn kun ĉi tiu klaso kaj pravalorigas ilin.
`gridzyAnimated`	Estos aŭtomate agordita se opcio `animate` estas `true` . Se ĉi tiu klaso estas agordita permane, ankaŭ la opcio `animate` aŭtomate fariĝos `true` (krom se ĝi estas eksplicite agordita al `false` ).

Item Klasoj

Klaso Nomo	Priskribo
`gridzyItem`	Estos agordita tuj kiam la elemento komencos la pravalorigan procezon. Neniam estos forigita.
`gridzyItemInitializing`	Estos agordita tuj kiam la elemento komencos la pravalorigon. Estos anstataŭigita per `gridzyItemReady` tuj kiam la ero estas plene pravigita. Ne signifas, ke bildoj estas plene ŝarĝitaj (vidu `gridzyItemLoading` ), sed objekto estas preta por iĝi videbla.
`gridzyItemReady`	Anstataŭigos `gridzyItemInitializing` tuj kiam la ero estas plene pravigita. Neniam estos forigita. Ne signifas, ke bildoj estas plene ŝarĝitaj (vidu `gridzyItemComplete` ), sed objekto estas preta por iĝi videbla.
`gridzyItemLoading`	Estos agordita tuj kiam la elemento komencos la pravalorigon. Estos anstataŭigita per `gridzyItemComplete` tuj kiam la enhavitaj bildoj (kutime nur unu) estas plene ŝargitaj.
`gridzyItemComplete`	Anstataŭigos `gridzyItemLoading` tuj kiam la enhavitaj bildoj (kutime nur unu) estas plene ŝargitaj. Neniam estos forigita.
`gridzyItemInitialToVisible`	Estos agordita tuj kiam la objekto komencos aperi la unuan fojon. Estos forigita tuj kiam la objekto estos tute videbla.
`gridzyItemVisible`	Estos agordita tuj kiam la objekto estos plene videbla. Estos forigita tuj kiam la objekto komencos malaperi.
`gridzyItemVisibleToHidden`	Estos agordita tuj kiam la objekto komencos malaperi. Estos forigita tuj kiam la objekto estas tute kaŝita.
`gridzyItemHidden`	Estos fiksita tuj kiam la objekto estas tute kaŝita. Estos forigita tuj kiam la objekto komencas aperi.
`gridzyItemHiddenToVisible`	Estos agordita tuj kiam la ero komencas aperi (krom aperanta la unuan fojon - vidu klason `gridzyItemInitialToVisible` ). Estos forigita tuj kiam la objekto estos tute videbla.
`gridzyItemVisibleToVisible`	Estos agordita tuj kiam io en la krado ŝanĝiĝis, sed la objekto mem estis kaj restu videbla. Estos forigita tuj kiam la ŝanĝanimacio finiĝos.

Defaŭlte la procezindikilo kaj la kuraĝigoj por aperantaj kaj malaperantaj bildoj estas antaŭdifinitaj de la ĉefa CSS-dosiero de Gridzy.

Kun ĉi tiuj supre menciitaj CSS-klasoj vi povas stiligi vian propran procezindikilon kaj kuraĝigojn. Kuracu rigardi la ĉefan CSS-dosieron de Gridzy, por kompreni, kion vi devus superregi. Ne timu, ĉio estas bone dokumentita tie.

Optimumigi Ŝargadon

Se vi uzas multajn bildojn, povus esti bona ideo helpi Gridzy konstrui la kradon pli rapide.

Malhelpi Saltajn Bildojn

Gridzy nepre bezonas la bildformaton de ĉiuj bildoj por kalkuli la kradon. Ĉi tiuj faktoj rezultigas saltajn elementojn se iuj bildoj estas pretaj kaj aliaj ne. Ju pli da bildoj estas, des pli ĝena povas esti ĉi tiu efiko.

Por malhelpi ĉi tiun konduton, simple agordu atributojn width kaj height por ĉiuj img elementoj. Gravas agordi la ĝustajn valorojn por ĉiu individua bildo, alie la bildoj estus distorditaj. La ĝustaj valoroj estas la originaj larĝo kaj alto de la respektiva bildo:

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

Poste Gridzy povas kalkuli la kradon tuj sen bezono scii la efektivajn grandecojn de la bildoj.

Maldiligenta Ŝargado

Por ŝargi nur bildojn kiuj estas en la videbla vidfenestro, simple sekvu ĉi tiujn paŝojn:

Enigu atributojn width kaj height kiel priskribite supre (certu uzi la ĝustajn valorojn)
Anstataŭigu ĉiujn src atributojn per data-gridzylazysrc kiel montrite sube (se vi ankaŭ havas srcset atributojn, anstataŭigu ilin per 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>

Post ĉi tiuj paŝoj la bildoj ŝargiĝos tuj kiam ili estos proksime aŭ ene de la vidfenestro.

Proceza Indikilo

La proceza indikilo estas la malgranda vigla ikono, kiu aperas dum la bildo ŝarĝas. Se vi uzas subtitolojn kaj haŭtojn , la proceza indikilo aperos aŭtomate. Alie vi bezonas kelkajn ĝustigojn:

Metu ĉiun img elementon en div -elementon
(aŭ en ajnan alian elementon - vidu semantikan HTML por pli)
Aldonu la klason gridzyImage al ĉiu img elemento

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

Post tio vi devus vidi la procezindikilojn se la bildoj bezonas tempon por ŝargi.

Filtriloj

Filtriloj en Gridzy estas sufiĉe simplaj sed potencaj. Ne gravas kian filtrilon vi bezonas, estas tre verŝajne ke ĝi estas realigebla. Vi nur bezonas iom CSS kaj kelkajn HTML-formajn elementojn ...

Jen funkcia ekzemplo:

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

Ni Konstruu Ĝin Paŝon post Paŝo

1. Unue ni bezonas la kutiman HTML-strukturon de Gridzy kaj agordi klasnomojn por ĉiuj galeriaj eroj por ke ni povu filtri ilin poste

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

En ĉi tiu ekzemplo ni nur uzas unu klason por ĉiu elemento. Sed vi ankaŭ povas agordi plurajn klasojn por ununura elemento, se tiu elemento devus esti trovebla per pluraj filtriloj.

2. Poste ni aldonas kelkajn butonojn per kiuj ni povas ŝanĝi la filtrilojn tiam

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

Anstataŭ la butonoj, vi ankaŭ povus uzi aliajn formelementojn kiel markobutonojn, radiobutonojn, elektajn kampojn ktp.

Kiel vi povas vidi, la valoroj de la butonoj estas kutimaj CSS-elektiloj. Tuj kiam ni finos, klako sur tia butono montros la bildojn, kiuj kongruas kun tiu CSS-elektilo. Teknike ĝi simple fiksas la filter opcion al ĉi tiu valoro.

Vi ankaŭ povas uzi multe pli kompleksajn elektilojn. Ekzemple :not(.animals) funkcius ankaŭ, same kiel .animals.people kaj .animals, .people .

3. Finfine, ni enkapsuligas la butonojn en div -ujo kaj ligas ilin al la galerio Gridzy, agordante la opcion 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>

Kiel vi povas vidi, ni ankaŭ uzas CSS-elektilon por la opcio filterControls . La div ujo kun la id atributo nur servas por fari la butonojn pli facile elekteblajn per tiu CSS-elektilo.

Jen ĝi!

Se vi preferas JavaScript-solvon, kontrolu la API .

API

Kvankam Gridzy havas sian propran API, plej multaj aferoj povas esti faritaj sen ĝi, simple manipulante la DOM. Gridzy rimarkos ĝin kaj alĝustigos la kradon. Sed ekzistas ankaŭ tre potenca API ...

Manipulado de la DOM

Por ĉiuj manipuladoj de Dokumentobjekta Modelo (DOM) ni unue bezonas la ujan elementon:

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

Aldonu Bildojn

Gravas plene konstrui kaj plenigi la novan filan elementon antaŭ ol vi aldoni ĝin al la uja elemento. Alie Gridzy ne povas detekti la ĝustajn dimensiojn.

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

Forigi Bildojn

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

Ŝanĝi Opciojn

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

Pli pri manipulado de la DOM vi povas trovi ĉe MDN-retaj dokumentoj . Ekzistas ankaŭ Enkonduko al la DOM havebla.

Propra API

Por uzi la API, ni unue bezonas la ekzemplon de Gridzy, kiu estas ligita al la ujo de Gridzy:

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

Akiru Opcion

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

Akiru Ĉiuj Opcioj

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

Agordi Opciojn

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

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

Apliki Filtrilon

Apliki filtrilon estas nur agordi la filter kiu povas esti iu ajn valida CSS-elektilo:

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

Aldonu Funkciojn de Revoko

MALPROKROMATITA ekde versio 2.4.0
Uzu la modernajn kaj pli flekseblajn Eventojn anstataŭe. Vidu la sekvan sekcion por detaloj.

~~Gridzy.js 2 subtenas kelkajn opciojn por revokfunkcioj. Ili povas agordi nur per la proprieta API, sed same kiel aliaj opcioj:~~

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

	~~Priskribo~~
~~`onBeforeOptionsChanged`~~	~~Revoka funkcio, kiu estas alvokita rekte antaŭ ol agordi opciojn.~~
~~`onOptionsChanged`~~	~~Revoka funkcio, kiu estas alvokita rekte post fiksado de opcioj.~~
~~`onBeforeRender`~~	~~Revoka funkcio kiu estas alvokita rekte antaŭ bildigo.~~
~~`onRender`~~	~~Revoka funkcio kiu estas alvokita rekte post bildigo.~~

Uzu Eventojn

ekde versio 2.4.0

Vi povas uzi Gridzy-okazaĵojn ĝuste kiel kutimaj JavaScript-okazaĵoj:

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

Kelkaj eventoj estas pafitaj sur la Gridzy-ujo-elemento kaj aliaj eventoj estas pafitaj sur la individuaj eroj ene de la ujo-elemento.

Eventoj pafitaj sur la Gridzy-ujo-elemento:

	Priskribo
`gridzyBeforeInit`	Fajroj antaŭ galerio inicializado.
`gridzyInit`	Fajroj post galerio inicializado.
`gridzyBeforeOptionsChanged`	Fajroj antaŭ ol agordi eblojn.
`gridzyOptionsChanged`	Fajroj post agordo de opcioj.
`gridzyBeforeRender`	Fajroj antaŭ bildigo.
`gridzyRender`	Fajroj post bildigo.

Se vi maltrafas iujn ajn eventojn ĉi tie, bonvolu sendi subtenpeton .

event.target provizas la Gridzy-ujo-elementon.
event.detail.instance provizas la ekzemplon de Gridzy.

Eventoj pafitaj sur eroj elementoj:

	Priskribo
`gridzyItemBeforeInit`	Fajroj antaŭ la inicialigo de objekto.
`gridzyItemInit`	Fajroj post inicialigo de objekto.
`gridzyItemLoading`	Pafas kiam la objekto komencas ŝargi.
`gridzyItemReady`	Pafas kiam la objekto estas preta por kradkalkulo. Do la bildformato estas konata, sed la bildo ankoraŭ povas ŝarĝi.
`gridzyItemComplete`	Pafas kiam la objektobildo estas plene ŝarĝita.

Se vi maltrafas iujn ajn eventojn ĉi tie, bonvolu sendi subtenpeton .

event.target provizas la respektivan ero-elementon.
event.detail.instance provizas la ekzemplon de Gridzy.

API - Tutmonda

Estas kelkaj funkcioj kiuj estas sendependaj de Gridzy-kazoj. Do ni ne bezonas ricevi ekzemplon antaŭe.

Akiru Defaŭltan Opcion

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

Akiru Ĉiujn Defaŭltajn Opciojn

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

Agordu Defaŭltajn Opciojn

Ĉi tio ne fiksas la eblojn de ĉiuj jam pravigitaj Gridzy-instancoj, sed difinas la bazon por novaj okazoj. Tamen, se opcio de ekzistanta kazo estus rekomencigita per la valoro null , ĝi uzus la novan defaŭltan valoron.

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

Vi povas uzi ĉi tion por agordi eblojn tutmonde, se vi nomas ĝin antaŭ ol DOM estas preta. Do vi ne plu bezonus agordi opciojn kiel atributojn.

Aŭtomatismoj

Dum ĉiuj aŭtomatismoj de Gridzy.js 2 estas aktivaj, ne necesas la subaj metodoj. Sed la aŭtomatismoj povas esti malŝaltitaj por uzi Gridzy en pli tradicia maniero:

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

Kelkaj el ĉi tiuj opcioj ne povas esti agorditaj per data-gridzy- atributoj aŭ per setOptions() , pro logikaj kialoj:

	Defaŭlta Valoro	Priskribo
`autoInitOnDomReady`	`true`	Detektas elementojn kun klaso `gridzy` sur paĝa ŝarĝo kaj pravigigas ilin. Agordigebla per `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	Detektas novajn elementojn kun klaso `gridzy` tuj kiam ili aperas en la DOM kaj pravalorigas ilin. (ekz. pri uzado de paĝtransiroj) Agordigebla per `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Detektas ĉu infanelementoj (bildoj) estas aldonitaj aŭ forigitaj, kaj ĝisdatigas la kradon aŭtomate. Agordigebla per `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Difinas ĉu la atributoj `data-gridzy-` estas ĝenerale uzataj aŭ ne. Se ĉi tio estas `false` opcioj povas esti agorditaj nur per la proprieta API. Agordigebla per `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	Detektas ŝanĝojn de `data-gridzy-` atributoj, kaj ĝisdatigas la kradon aŭtomate. Ankaŭ detektas ĉu la `gridzyAnimated` -klaso estas aldonita aŭ forigita kaj ĉu `style` atributoŝanĝoj okazas. Se `useOptionAttributes` estas `false` , ĝi detektas nur `style` atributajn ŝanĝojn. Agordigebla per `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Detektas ŝanĝojn de `class` atributoj de ĉiuj infanaj elementoj (bildoj). Rilate al filtriloj. Agordigebla per `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver ekde versio 2.5.0	`true`	Detektas ŝanĝojn de `src` atributoj de ĉiuj bildoj. Rilata kiam uzata kun React aŭ similaj bibliotekoj. Agordigebla per `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` RegrandigiObserver ekde versio 2.6.0	`true`	Detektas ŝanĝojn de la elemento-larĝo. Rilata pri respondema dezajno. (Antaŭ versio 2.6.0 fenestra regrandigo de evento-aŭskultilo estis uzata) Agordigebla per `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Komencu Mane

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

Detruu la Kazon

Malglate dirite, la malo de komencado de Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sinkronigi Infanan Liston permane

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

Sinkronigi Unuan Infanan Elementon Mane

Kutime ne necesas, krom en tre maloftaj kazoj.

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

Sinkronigi Atributojn Mane

Notu, ke la opcio useOptionAttributes devas esti true por ĉi tio.

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

Forto Rendering

Kutime ne necesas, eĉ se ĉiuj aŭtomatismoj estas malŝaltitaj

gridzyInstance.render();

WordPress Kromaĵo

Biblioteko JavaScript

Servo