Verżjoni 2.x – Gridzy.Gallery

Il-websajt ġiet tradotta awtomatikament. Jekk xi ħaġa mhix ċara, jekk jogħġbok agħti ħarsa lejn id-dokumentazzjoni bl-Ingliż.

Użu Bażiku

Tella l-fajls Gridzy fis-server tiegħek u żidhom mal-websajt tiegħek (ġeneralment fit-taqsima tar-ras):

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

Żid il-kodiċi HTML (kull post fit-taqsima tal-ġisem):

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

Dak hu! Dak huwa eżempju kompletament funzjonali. Mhi meħtieġa l-ebda inizjalizzazzjoni żejda.

Konfigurazzjoni

L-eħfef mod biex jiġi kkonfigurat Gridzy huwa li tuża biss attributi HTML. Għandek bżonn biss li tipprefissa l-ismijiet tal-għażliet b'data data-gridzy- . Allura, biex tissettja l-għażla spaceBetween , żid biss l-attribut 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>

Għażliet Prinċipali

	Valur Default	Deskrizzjoni
`animate`	`true`	Jiddetermina jekk l-animazzjonijiet għandhomx jintużaw meta l-grilja tinbidel (pereżempju, meta tbiddel id-daqs tat-tieqa tal-browser jew meta tissettja filtru).
`layout`	`justified`	Jiddefinixxi t-tqassim użat. Gridzy.js 2 jappoġġja ż-żewġ layouts differenti `justified` u `waterfall` . Kull wieħed minnhom għandu l-parametri ta 'għażla addizzjonali tiegħu stess, li tista' ssib taħt din it-tabella.
`filter`	`*`	Jiddetermina liema immaġini għandhom jintwerew. Kull CSS-selector jista' jintuża bħala valur hawnhekk. Normalment issettjat awtomatikament permezz `filterControls` (ara l-għażla li jmiss). Iċċekkja l-Filtri
`filterControls`		Jiddetermina liema elementi tal-forma jistgħu jintużaw biex jiffiltraw l-immaġini. Kull selettur CSS, li jagħżel elementi tal-forma HTML, jista' jintuża bħala valur hawnhekk. Iċċekkja l-Filtri
`autoConsiderScrollBars`	`true`	Biex tbassar il-wisa 'disponibbli jekk il-vireg tal-iscroll jidhru jew jisparixxu. Huwa dejjem rakkomandat li tħallih fuq `true` sakemm dan l-awtomatiżmu ma jikkawżax problemi.

Justified Għażliet ta' Layout

	Valur Default	Deskrizzjoni
`autoFontSize`	`false`	Aġġorna awtomatikament il-proprjetà tad-daqs tat-tipa ta 'kull kaxxa bbażata fuq id-daqs tal-kaxxa oriġinali. B'mod awtomatiku, il-proprjetà tad-daqs tat-tipa mhix issettjata b'mod espliċitu.
`desiredHeight`	`190`	Jiddefinixxi l-għoli mixtieq tar-ringieli tal-elementi. L-għoli attwali se jiġi kkalkulat skont il-wisa 'disponibbli u l-elementi fir-ringiela.
`hideOnMissingImage`	`true`	Jaħbi kaxxi li fihom immaġini li ma setgħux jitgħabbew.
`spaceBetween`	`4`	Jiddefinixxi d-distanza bejn l-elementi f'pixels.
`lastRowAlign` mill-verżjoni 2.3.0	`justified`	Jiddefinixxi l-imġieba tal-aħħar ringiela. Il-valuri permessi huma `left` , `center` , `right` u `justified` .
`singleRowAlign` mill-verżjoni 2.3.0	`justified`	Jiddefinixxi l-imġieba jekk ikun hemm ringiela waħda biss. Il-valuri permessi huma `left` , `center` , `right` u `justified` .
~~`fillLastRow`~~ ~~mill-verżjoni 2.1.0~~	~~`true`~~	MNEĦĦA mill-verżjoni 2.4.0 (DEPREKAT mill-verżjoni 2.3.0 ) Jirranġa l-immaġini sabiex l-aħħar ringiela tkun dejjem mimlija kompletament. Jekk qed tippjana li tehmeż immaġini b'mod dinamiku, tista' tkun idea tajba li tiddiżattiva dan. Ma jieħu l-ebda effett fuq ringieli singoli (ara `fillSingleRow` ).
`fillSingleRow` mill-verżjoni 2.1.0	~~`true`~~	MNEĦĦA mill-verżjoni 2.4.0 (DEPREKAT mill-verżjoni 2.3.0 ) Jekk ikun hemm ringiela waħda biss, tirranġa l-immaġini sabiex ir-ringiela tkun dejjem mimlija kompletament. Jekk jista 'jiġri li għandek immaġini waħda jew tnejn biss fil-gallerija, tista' tkun idea tajba li tiddiżattiva din.

Waterfall Għażliet ta' Layout

	Valur Default	Deskrizzjoni
`autoFontSize`	`false`	Aġġorna awtomatikament il-proprjetà tad-daqs tat-tipa ta 'kull kaxxa bbażata fuq id-daqs tal-kaxxa oriġinali. B'mod awtomatiku, il-proprjetà tad-daqs tat-tipa mhix issettjata b'mod espliċitu.
`desiredWidth`	`250`	Jiddefinixxi l-wisa' mixtieqa tal-kolonni. Il-wisa 'attwali se tiġi kkalkulata skont il-wisa' disponibbli u n-numru ta 'kolonni.
`hideOnMissingImage`	`true`	Jaħbi kaxxi li fihom immaġini li ma setgħux jitgħabbew.
`horizontalOrder`	`false`	Jiddefinixxi li l-elementi jitqiegħdu strettament element wieħed f'kull kolonna mix-xellug għal-lemin, imbagħad jerġa 'jibda fl-aktar kolonna tax-xellug indipendenti f'liema kolonna hija aktar post. B'mod awtomatiku l-elementi dejjem jitqiegħdu fil-kolonna bl-iżgħar għoli.
`spaceBetween`	`4`	Jiddefinixxi d-distanza bejn l-elementi f'pixels.
`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`.

Għażliet Aktar Avvanzati

Għal għażliet aktar avvanzati, iċċekkja l- API .

HTML semantiku

L-aktar struttura HTML sempliċi ta' Gridzy hija din:

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

Madankollu, Gridzy huwa flessibbli ħafna u tista 'tuża kważi kull struttura HTML oħra. Hemm biss ftit punti li għandek tikkonsidra:

Kull tifel tal-element tal-kontenitur jirrappreżenta oġġett wieħed fil-grilja.
Kemm l-element tal-kontenitur kif ukoll it-tfal tiegħu jistgħu jkunu kwalunkwe tip ta 'tikketta, bħal ul u li (biss ikkunsidra li tirrisettja l-inadempjenzi tal-browser).
Jekk element img mhuwiex tifel dirett innifsu, jeħtieġ il-klassi gridzyImage .

Allura din hija wkoll struttura HTML li taħdem:

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

Speċjalment jekk trid iżżid captions, għandek bżonn struttura HTML avvanzata. Biex titgħallem aktar dwarha, agħti ħarsa lejn Captions & Skins .

Captions u Ġlud

Jekk trid iżżid captions mal-gallerija tiegħek, trid tiddefinixxi d-dehra. Għalhekk, xi ġlud predefiniti huma disponibbli. Kull ġilda li tikkonsisti f'fajl CSS. Għandek bżonn iżżid dan il-fajl flimkien mal-fajls Gridzy prinċipali (ġeneralment fit-taqsima tar-ras):

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

Barra minn hekk għandek bżonn struttura HTML avvanzata:

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

Jekk qed tistaqsi dwar l-istruttura HTML, agħti ħarsa lejn Semantic HTML .

Għall-caption tista' tuża kwalunkwe tip ta' tikketta, aċċerta ruħek li għandha l-klassi gridzyCaption . L-element img jeħtieġ il-klassi gridzyImage .

L-eżempju ta 'hawn fuq jurik il-ġilda gridzySkinClassic . Biex tuża waħda differenti, ibdel l-isem tal-ġilda b'wieħed minn dawn:

Ġlud Inklużi

	Klassijiet Disponibbli
gridzySkinBlank punt ta 'tluq tajjeb għall-ħolqien ta' ġilda stess preview live	`gridzySkinBlank`
gridzySkinClassic preview live	`gridzySkinClassic` `gridzySkinClassicLight`(DEPREKAT mill-verżjoni 2.6.0)
gridzySkinFullOverlay preview live	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(DEPREKAT mill-verżjoni 2.6.0)
gridzySkinLift preview live	`gridzySkinLift` `gridzySkinLiftLight`(DEPREKAT mill-verżjoni 2.6.0)
gridzySkinMagnifier Funzjonalità taż-żum mhux inkluża preview live	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(DEPREKAT mill-verżjoni 2.6.0)

Il-ġlud kollha ta 'hawn fuq jeħtieġu biss fajl CSS, iżda hemm ġlud addizzjonali li jeħtieġu wkoll fajl JavaScript:

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

	Klassijiet Disponibbli
gridzySkinBlur ma taħdimx fl-IE preview live	`gridzySkinBlur` `gridzySkinBlurLight`(DEPREKAT mill-verżjoni 2.6.0)
gridzySkinCard preview live	`gridzySkinCard` `gridzySkinCardLight`(DEPREKAT mill-verżjoni 2.6.0)

Għażliet tal-ġilda

Mill-verżjoni 2.6.0 hemm Għażliet biex jiġi kkonfigurat il-ġlud integrati. Skont il-ġilda speċifika tista 'tissettja l-kulur tal-isfond, il-kulur tat-test u l-dell tat-test. Trid tuża biss proprjetajiet personalizzati CSS kif tista' tara hawn:

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

Iċċekkja l-varjabbli appoġġjati u l-valuri awtomatiċi għal kull ġilda hawn:

gridzySkinClassic

Varjabbli	Valur Default	Informazzjoni
`--background`	`rgba(0, 0, 0, .7)`	jippermetti kwalunkwe valur fl-isfond CSS
`--color`	`rgb(255, 255, 255)`	jippermetti kwalunkwe valur tal-kulur CSS
`--text-shadow`	`none`	jippermetti kwalunkwe valur CSS test-shadow

gridzySkinFullOverlay

Varjabbli	Valur Default	Informazzjoni
`--background`	`rgba(0, 0, 0, .7)`	jippermetti kwalunkwe valur fl-isfond CSS
`--color`	`rgb(255, 255, 255)`	jippermetti kwalunkwe valur tal-kulur CSS
`--text-shadow`	`none`	jippermetti kwalunkwe valur CSS test-shadow

gridzySkinLift

Varjabbli	Valur Default	Informazzjoni
`--background`	`rgba(0, 0, 0, .7)`	jippermetti kwalunkwe valur fl-isfond CSS
`--color`	`rgb(255, 255, 255)`	jippermetti kwalunkwe valur tal-kulur CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	jippermetti kwalunkwe valur CSS test-shadow

gridzySkinMagnifier

Varjabbli	Valur Default	Informazzjoni
`--background`	`rgba(0, 0, 0, .7)`	jippermetti kwalunkwe valur fl-isfond CSS
`--color`	`rgb(255, 255, 255)`	jippermetti kwalunkwe valur tal-kulur CSS

Din il-ġilda ma tappoġġjax --text-shadow

gridzySkinBlur

Varjabbli	Valur Default	Informazzjoni
`--background`	`rgba(0, 0, 0, .7)`	jippermetti kwalunkwe valur fl-isfond CSS
`--color`	`rgb(255, 255, 255)`	jippermetti kwalunkwe valur tal-kulur CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	jippermetti kwalunkwe valur CSS test-shadow

gridzySkinCard

Varjabbli	Valur Default	Informazzjoni
`--background`	`rgba(0, 0, 0, 1)`	jippermetti kwalunkwe valur fl-isfond CSS
`--color`	`rgb(255, 255, 255)`	jippermetti kwalunkwe valur tal-kulur CSS
`--text-shadow`	`none`	jippermetti kwalunkwe valur CSS test-shadow

Il-ġlud kollha predefiniti jappoġġaw biss it-testi sempliċi. Tista 'toħloq ġlud tiegħek stess u aktar kumplessi. Jekk jogħġbok agħti ħarsa lejn Style Gridzy .

Stil Gridzy

Jekk l-ebda ġilda predefinita ma taqbilx mal-bżonnijiet tiegħek, tista 'tistilja waħda tiegħek.

L-eħfef mod huwa li l-ewwel tikkopja ġilda eżistenti u tadattaha għall-bżonnijiet tiegħek. Il gridzySkinBlank tal-ġilda predefinita normalment tipprovdi pedament tajjeb kif ukoll dokumentazzjoni tajba fil-fajl 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;
}

Fil-fajl CSS issib il-klassijiet gridzySkinBlank , gridzyImage u gridzyCaption . Gridzy innifsu m'għandux bżonn dawn il-klassijiet. Jintużaw biss għall-grafika u għalhekk tista' tneħħihom jew tibdel isimhom jekk tixtieq.

Barra minn hekk għandek issib il-klassi CSS gridzyItem . Gridzy jistabbilixxi din il-klassi awtomatikament għat-tfal diretti kollha tal-element prinċipali tal-kontenitur. Allura, tista 'tuża din il-klassi biex tfassal l-oġġetti tal-gallerija tiegħek.

Moħħ Affarijiet Importanti

Il-kontenut tal-oġġett għandu jkun kompletament responsiv. Ikkunsidra li d-daqs tal-element definittivament se jinbidel. Uża valuri perċentwali minflok valuri tal-pixel. U agħti ħarsa lejn l-għażla tat-tqassim tal-Gridzy autoFontSize , li torbot id-daqs tat-tipa mad-daqs tal-kaxxa tal-oġġett.
Kull oġġett għandu jkollu proporzjon tal-aspett definit tajjeb. Il-proporzjon tal-aspett tal-oġġett qatt mhu se jinbidel u huwa meħtieġ biex tiġi kkalkulata l-grilja. Mela jekk oġġett ma jkollux awtomatikament proporzjon tal-aspett definit tajjeb, iddefinih minn qabel manwalment (eż. permezz ta' css).

F'xi każijiet, jista 'jkun aktar faċli li tfassal il-kontenut tal-oġġetti qabel ma Gridzy qed jinizjalizza. Sempliċement neħħi l gridzy tal-klassi jew il-fajl javascript Gridzy temporanjament għal dan.

Dak hu! Dak kollu li għandek bżonn biex tibni l-ġilda tiegħek stess. Ħafna mill-ġlud predefiniti ma jużax aktar minn dan.

Imma jista' jkun hemm aktar jekk tixtieq...

Ġlud Avvanzati

Gridzy juża aktar klassijiet CSS milli gridzyItem biss. Ħafna minnhom se jiġu stabbiliti awtomatikament u tista 'tużahom għall-grafika wkoll.

Klassijiet tal-Kontenituri Ewlenin

Isem tal-Klassi	Deskrizzjoni
`gridzy` biex tissettja manwalment	Gridzy awtomatikament isib elementi b'din il-klassi u jinizjalizzahom.
`gridzyAnimated`	Se jiġi ssettjat awtomatikament jekk l-għażla `animate` hija `true` . Jekk din il-klassi tiġi ssettjata manwalment, l-għażla `animate` awtomatikament issir `true` wkoll (ħlief jekk tkun issettjata b'mod espliċitu għal `false` ).

Klassijiet tal-Oġġetti

Isem tal-Klassi	Deskrizzjoni
`gridzyItem`	Se jiġi ssettjat hekk kif l-oġġett jibda l-proċess ta 'inizjalizzazzjoni. Qatt mhu se jitneħħa.
`gridzyItemInitializing`	Se jiġi ssettjat hekk kif l-oġġett jibda l-proċess ta 'inizjalizzazzjoni. Se jiġi sostitwit minn `gridzyItemReady` hekk kif l-oġġett ikun inizjalizzat għal kollox. Ifisser mhux li l-immaġini huma mgħobbija bis-sħiħ (ara `gridzyItemLoading` ), iżda l-oġġett huwa lest biex isir viżibbli.
`gridzyItemReady`	Se jissostitwixxi `gridzyItemInitializing` hekk kif l-oġġett ikun inizjalizzat għal kollox. Qatt mhu se jitneħħa. Ifisser mhux li l-immaġini huma mgħobbija bis-sħiħ (ara `gridzyItemComplete` ), iżda l-oġġett huwa lest biex isir viżibbli.
`gridzyItemLoading`	Se jiġi ssettjat hekk kif l-oġġett jibda l-proċess ta 'inizjalizzazzjoni. Se jiġi sostitwit minn `gridzyItemComplete` hekk kif l-immaġini li jinsabu (ġeneralment waħda biss) ikunu mgħobbija bis-sħiħ.
`gridzyItemComplete`	Se jissostitwixxi `gridzyItemLoading` hekk kif l-immaġini li jinsabu (ġeneralment waħda biss) ikunu mgħobbija bis-sħiħ. Qatt mhu se jitneħħa.
`gridzyItemInitialToVisible`	Se jiġi stabbilit hekk kif l-oġġett jibda jidher l-ewwel darba. Se jitneħħa hekk kif l-oġġett ikun kompletament viżibbli.
`gridzyItemVisible`	Se jiġi ssettjat hekk kif l-oġġett ikun viżibbli għal kollox. Se jitneħħa hekk kif l-oġġett jibda jisparixxi.
`gridzyItemVisibleToHidden`	Se jiġi stabbilit hekk kif l-oġġett jibda jisparixxi. Se jitneħħa hekk kif l-oġġett ikun kompletament moħbi.
`gridzyItemHidden`	Se jiġi stabbilit hekk kif l-oġġett ikun kompletament moħbi. Se jitneħħa hekk kif l-oġġett jibda jidher.
`gridzyItemHiddenToVisible`	Se jiġi ssettjat hekk kif l-oġġett jibda jidher (ħlief li jidher l-ewwel darba – ara l-klassi `gridzyItemInitialToVisible` ). Se jitneħħa hekk kif l-oġġett ikun kompletament viżibbli.
`gridzyItemVisibleToVisible`	Se jiġi ssettjat hekk kif xi ħaġa fil-grilja tinbidel, iżda l-oġġett innifsu kien u jibqa 'viżibbli. Se titneħħa hekk kif titlesta l-animazzjoni tal-bidla.

B'mod awtomatiku l-indikatur tal-proċess u l-animazzjonijiet għall-immaġini li jidhru u li jisparixxu huma predefiniti mill-fajl CSS ewlieni ta 'Gridzy.

B'dawn il-klassijiet CSS imsemmija hawn fuq tista 'tistil l-indikatur tal-proċess u l-animazzjonijiet tiegħek stess. Ażżard ħarsa lejn il-fajl CSS prinċipali ta 'Gridzy, biex tifhem dak li jkollok tegħleb. L-ebda biża ', kollox huwa dokumentat tajjeb hemmhekk.

Itejb it-Tagħbija

Jekk tuża ħafna stampi, tista 'tkun idea tajba li tgħin lil Gridzy jibni l-grilja aktar malajr.

Prevenzjoni Jaqbeż Stampi

Gridzy jeħtieġ assolutament il-proporzjon tal-aspett tal-immaġini kollha biex tikkalkula l-grilja. Dan il-fatt jirriżulta f'elementi jaqbżu jekk xi stampi jkunu lesti u oħrajn le. Iktar ma jkun hemm immaġini, aktar jista 'jkun tedjanti dan l-effett.

Biex tevita din l-imġieba, issettja biss l-attributi width u height għall-elementi kollha img . Huwa importanti li jiġu stabbiliti l-valuri korretti għal kull immaġini individwali, inkella l-immaġini jkunu mgħawġa. Il-valuri korretti huma l-wisa 'u l-għoli oriġinali tal-immaġni rispettivi:

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

Minn hemm 'il quddiem Gridzy jista' jikkalkula l-grilja immedjatament mingħajr il-ħtieġa li tkun taf id-daqsijiet attwali tal-immaġini.

Tagħbija għażżien

Biex tagħbija immaġini biss li huma fil-vetrina viżibbli, segwi dawn il-passi biss:

Daħħal l-attributi width u height kif deskritt hawn fuq (kun żgur li tuża l-valuri korretti)
Ibdel l-attributi src kollha data-gridzylazysrc kif muri hawn taħt (jekk għandek attributi srcset ukoll, ibdelhom 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>

Wara dawn il-passi l-immaġini jitgħabbew hekk kif ikunu qrib jew ġewwa l-vetrina.

Indikatur tal-Proċess

L-indikatur tal-proċess huwa l-ikona animata żgħira li tidher waqt li tkun qed titgħabba l-immaġni. Jekk tuża captions u ġlud , l-indikatur tal-proċess jintwera awtomatikament. Inkella għandek bżonn xi aġġustamenti:

Poġġi kull element img f'element div
(jew fi kwalunkwe element ieħor - ara HTML semantiku għal aktar)
Żid il-klassi gridzyImage ma' kull element 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>

Wara dan għandek tara l-indikaturi tal-proċess jekk l-immaġini jieħdu ż-żmien biex jitgħabbew.

Filtri

Il-filtri f'Gridzy huma pjuttost sempliċi iżda b'saħħithom. Ma jimpurtax liema tip ta 'filtru għandek bżonn, huwa probabbli ħafna li huwa realizzabbli. Kulma għandek bżonn huwa, daqsxejn CSS u ftit elementi tal-forma HTML...

Hawn eżempju funzjonali:

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

Ejja Nibnuha Pass Pass

1. L-ewwel neħtieġu l-istruttura HTML tas-soltu ta 'Gridzy u ssettja l-ismijiet tal-klassi għall-oġġetti kollha tal-gallerija sabiex inkunu nistgħu niffiltrawhom wara

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

F'dan l-eżempju nużaw biss klassi waħda għal kull element. Imma tista 'wkoll tissettja klassijiet multipli għal element wieħed, jekk dak l-element għandu jkun jista' jinstab permezz ta 'filtri multipli.

2. Imbagħad inżidu xi buttuni li permezz tagħhom nistgħu nibdlu l-filtri imbagħad

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

Minflok il-buttuni, tista 'wkoll tuża elementi oħra tal-forma bħal kaxxi ta' kontroll, buttuni tar-radju, oqsma tagħżel eċċ.

Kif tistgħu taraw, il-valuri tal-buttuni huma selettivi tas-CSS tas-soltu. Hekk kif lestejna, ikklikkja fuq buttuna bħal din turi l-immaġini li jaqblu ma' dak is-selettur tas-CSS. Teknikament hija sempliċement tistabbilixxi l-għażla filter għal dan il-valur.

Tista 'wkoll tuża seletturi ħafna aktar kumplessi. Per eżempju :not(.animals) tkun taħdem ukoll, kif ukoll .animals.people u .animals, .people .

3. Fl-aħħar nett, aħna nkapsulaw il-buttuni f'kontenitur div u norbtuhom mal-gallerija Gridzy, billi nissettjaw l-għażla 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>

Kif tistgħu taraw, nużaw ukoll selettur CSS għall-għażla filterControls . Il-kontenitur div bl-attribut id iservi biss biex jagħmel il-buttuni aktar faċli biex jintgħażlu permezz ta' dak is-selettur tas-CSS.

Dak hu!

Jekk tippreferi soluzzjoni JavaScript, iċċekkja l -API .

API

Għalkemm Gridzy għandu l-API tiegħu stess, ħafna mill-affarijiet jistgħu jsiru mingħajrha, sempliċement billi timmanipula d-DOM. Gridzy jinduna bih u jaġġusta l-grilja. Iżda hemm ukoll API qawwija ħafna...

Manipulazzjoni tad-DOM

Għall-manipulazzjonijiet kollha tal-Mudell tal-Oġġetti tad-Dokument (DOM) għandna l-ewwel bżonn l-element tal-kontenitur:

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

Żid Stampi

Huwa importanti li tibni kompletament u timla l-element tat-tifel il-ġdid qabel ma żżidu mal-element tal-kontenitur. Inkella Gridzy ma jistax jiskopri d-dimensjonijiet korretti.

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

Neħħi Stampi

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

Ibdel l-Għażliet

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

Aktar dwar il-manipulazzjoni tad-DOM tista' ssib fuq MDN web docs . Hemm ukoll Introduzzjoni għad-DOM disponibbli.

API proprjetarja

Biex nużaw l-API, l-ewwel neħtieġu l-istanza Gridzy, li hija marbuta mal-element tal-kontenitur Gridzy:

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

Get Għażla

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

Ikseb l-Għażliet Kollha

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

Issettja Għażliet

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

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

Applika Iffiltra

L-applikazzjoni ta' filtru hija biss issettjar tal filter tal-għażla li jista' jkun kwalunkwe selettur CSS validu:

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

Żid Funzjonijiet ta' Callback

DEPREKAT mill-verżjoni 2.4.0
Uża l -Avvenimenti moderni u aktar flessibbli minflok. Ara t-taqsima li jmiss għad-dettalji.

~~Gridzy.js 2 jappoġġja xi għażliet għal funzjonijiet ta 'callback. Jistgħu jiġu stabbiliti biss permezz tal-API proprjetarja, iżda bħal għażliet oħra:~~

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

	~~Deskrizzjoni~~
~~`onBeforeOptionsChanged`~~	~~Funzjoni ta 'callback li hija invokata direttament qabel ma jiġu stabbiliti l-għażliet.~~
~~`onOptionsChanged`~~	~~Funzjoni ta 'callback li tiġi invokata direttament wara li jiġu stabbiliti l-għażliet.~~
~~`onBeforeRender`~~	~~Funzjoni ta' callback li tiġi invokata direttament qabel ma tingħata.~~
~~`onRender`~~	~~Funzjoni ta 'callback li tiġi invokata direttament wara l-għoti.~~

Uża Avvenimenti

mill-verżjoni 2.4.0

Tista' tuża l-avvenimenti Gridzy eżattament bħall-avvenimenti JavaScript tas-soltu:

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

Xi avvenimenti jiġu sparati fuq l-element tal-kontenitur Gridzy u avvenimenti oħra jiġu sparati fuq l-elementi tal-oġġett individwali fi ħdan l-element tal-kontenitur.

Avvenimenti sparati fuq l-element tal-kontenitur Gridzy:

	Deskrizzjoni
`gridzyBeforeInit`	Nirien qabel l-inizjalizzazzjoni tal-gallerija.
`gridzyInit`	Nirien wara l-inizjalizzazzjoni tal-gallerija.
`gridzyBeforeOptionsChanged`	Nirien qabel ma jiġu stabbiliti l-għażliet.
`gridzyOptionsChanged`	Nirien wara l-issettjar tal-għażliet.
`gridzyBeforeRender`	Nirien qabel l-għoti.
`gridzyRender`	Nirien wara l-għoti.

Jekk titlef xi avveniment hawn, jekk jogħġbok ibgħat talba għall-appoġġ .

event.target jipprovdi l-element tal-kontenitur Gridzy.
event.detail.instance jipprovdi l-istanza Gridzy.

Avvenimenti sparati fuq elementi tal-oġġett:

	Deskrizzjoni
`gridzyItemBeforeInit`	Nirien qabel l-inizjalizzazzjoni tal-oġġett.
`gridzyItemInit`	Nirien wara l-inizjalizzazzjoni tal-oġġett.
`gridzyItemLoading`	Nirien meta l-oġġett jibda jgħabbi.
`gridzyItemReady`	Nirien meta l-oġġett ikun lest għall-kalkolu tal-grilja. Allura l-proporzjon tal-aspett huwa magħruf, iżda l-immaġni tista 'xorta tkun qed titgħabbi.
`gridzyItemComplete`	Nirien meta l-immaġni tal-oġġett tkun kompletament mgħobbija.

Jekk titlef xi avveniment hawn, jekk jogħġbok ibgħat talba għall-appoġġ .

event.target jipprovdi l-element rispettiv tal-oġġett.
event.detail.instance jipprovdi l-istanza Gridzy.

API – Globali

Hemm xi funzjonijiet li huma indipendenti mill-istanzi ta' Gridzy. Allura m'għandniex bżonn niksbu istanza qabel.

Ikseb Għażla Default

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

Ikseb l-Għażliet Default Kollha

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

Issettja Għażliet Default

Dan ma jistabbilixxix l-għażliet tal-istanzi Gridzy kollha diġà inizjalizzati, iżda jiddefinixxi l-bażi għal istanzi ġodda. Madankollu, jekk għażla ta 'istanza eżistenti tiġi reset permezz tal-valur null , hija tuża l-valur default ġdid.

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

Tista' tuża dan biex tissettja l-għażliet globalment, jekk issejjaħlu qabel ma DOM ikun lest. Allura ma jkollokx bżonn li tissettja l-għażliet bħala attributi aktar.

Awtomatiżmi

Sakemm l-awtomatiżmi kollha ta 'Gridzy.js 2 huma attivi, m'hemmx bżonn għall-metodi ta' hawn taħt. Iżda l-awtomatiżmi jistgħu jintfew biex jużaw Gridzy b'mod aktar tradizzjonali:

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

Xi wħud minn dawn l-għażliet ma jistgħux jiġu stabbiliti permezz ta' data-gridzy- attributes jew permezz ta' setOptions() , minħabba raġunijiet loġiċi:

	Valur Default	Deskrizzjoni
`autoInitOnDomReady`	`true`	Jiskopri elementi bi klassi `gridzy` fit-tagħbija tal-paġna u jinizjalizzahom. Issettjabbli permezz ta' `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	Jiskopri elementi ġodda bil-klassi `gridzy` hekk kif jidhru fid-DOM u jinizjalizzahom. (eż. meta tuża t-tranżizzjonijiet tal-paġna) Issettjabbli permezz ta' `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Jiskopri jekk elementi tfal (immaġini) humiex miżjuda jew imneħħija, u jaġġorna l-grilja awtomatikament. Issettjabbli permezz `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Jiddefinixxi jekk id `data-gridzy-` attributi humiex ġeneralment użati jew le. Jekk dan huwa għażliet `false` jistgħu jiġu stabbiliti biss permezz tal-API proprjetarja. Issettjabbli permezz `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	Jiskopri bidliet ta ' `data-gridzy-` attributi, u jaġġorna l-grid awtomatikament. Jiskopri wkoll jekk il-klassi `gridzyAnimated` hijiex miżjuda jew imneħħija u jekk iseħħux bidliet fl-attribut `style` . Jekk `useOptionAttributes` hija `false` , tiskopri biss bidliet fl-attributi `style` . Issettjabbli permezz `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Jiskopri bidliet fl-attributi `class` tal-elementi tfal kollha (immaġini). Rilevanti rigward filtri. Issettjabbli permezz `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver mill-verżjoni 2.5.0	`true`	Jiskopri bidliet fl-attributi `src` tal-immaġini kollha. Rilevanti meta jintuża ma' React jew libreriji simili. Issettjabbli permezz `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver mill-verżjoni 2.6.0	`true`	Jiskopri bidliet fil-wisa 'tal-element. Rilevanti rigward disinn responsive. (Qabel il-verżjoni 2.6.0 kien użat is-semmiegħ tal-avveniment tar-ridimensionar tat-tieqa) Issettjabbli permezz `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Inizjalizza manwalment

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

Eqred l-Istanza

Bejn wieħed u ieħor qal, l-oppost tal-inizjalizzazzjoni ta 'Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Issinkronizza l-Lista tat-Tfal Manwalment

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

Issinkronizza Element Tfal Uniku Manwalment

Normalment mhux meħtieġ, ħlief f'każijiet rari ħafna.

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

Issinkronizza l-Attributi Manwalment

Innota li l-għażla useOptionAttributes għandha tkun true għal dan.

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

Forza Rendiment

Normalment mhux meħtieġ, anke jekk l-awtomatiżmi kollha huma mitfija

gridzyInstance.render();

WordPress Plugin

Librerija JavaScript

Servizz