Gridzy.Gallery

webLatina

Version 2.x

Pagina automatice translata est. Si res non liquet, documenta Anglica vide sis.

Basic Ritus

Fasciculi Gridzy ad servo tuo fasciculos oneres et eas ad tuum locum adde (plerumque in sectione capitis):

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

Adde codicem HTML (ubicumque in sectione corporis);

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

Id est! Ut eget enim ipsum. Extra initialization non requiritur.

Configurationis

Facillima via ad Gridzy configurandi est, iuste attributis HTML. Tantum opus est nominibus optionis praeponere cum data-gridzy- . Ita ut optionem spaceBetween interponeret, attributum data-gridzy-spaceBetween addas.

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

Praecipua Options

Default ValueDescriptio
animatetrueDecernit utrum animationes adhibeantur cum mutationibus eget (exempli gratia, cum resiciens fenestram navigatrum vel cum filtrum ponens).
layoutjustifiedUsus definit layout. Gridzy.js 2 duas propositiones diversas sustinet justified et waterfall . Uterque eorum ambitum optionis adiectis habet, quas infra hanc tabulam invenire potes.
filter*Decernit utra imagines ostendantur. Quilibet CSS-selector hic adhiberi potest pro valore. Solet automatice per filterControls (vide altera optio).
Reprehendo sicco Filtra
filterControlsDecernit quae elementa formare possint ad imagines columendas. Elector quivis CSS, qui elementa formantia HTML deligit, hic pro valore adhiberi potest.
Reprehendo sicco Filtra
autoConsiderScrollBarstruePraedicere latitudinem praesto, si libri vectes appareant vel evanescant. Semper commendatur eam relinquere in true nisi haec automatismus problemata causat.

Justified Layout Options

Default ValueDescriptio
autoFontSizefalseAutomatarie proprietatem fontis amplitudinis cuiuslibet arcae innixa in magnitudine archa primitiva. Defalta proprietas fontis amplitudo expresse non ponitur.
desiredHeight190Optatam altitudinem definit elementum antes. Ipsa altitudo computabitur secundum praesto latitudinem et elementa in ordine.
hideOnMissingImagetrueCoria pixides continentes imagines quae onerari non possunt.
spaceBetween4Distantiam elementorum elementorum definit.
lastRowAlign
quia versio 2.3.0		justifiedMores ultimi ordinis definit. Valores permissae sunt left , center , right et justified .
singleRowAlign
quia versio 2.3.0		justifiedMores definit, si est unus tantum ordo. Valores permissae sunt left , center , right et justified .
fillLastRow
quoniam versio 2.1.0		trueREDUCTUS quia versio 2.4.0 Deprecatus cum versione 2.3.0
Imagines disponit ut ultimus ordo semper compleatur. Si imagines dynamice vis appendere, posset esse utilem hanc deactivate.
Nullam effectum in singulis ordinibus (vide fillSingleRow ).
fillSingleRow
quoniam versio 2.1.0		trueREDUCTUS quia versio 2.4.0 Deprecatus cum versione 2.3.0
Si unus tantum est ordo, imagines disponit ut semper ordine compleantur. Si fieri potest, ut unam tantum vel duas imagines habeas in porticu, utilem esse poterit hanc deactivate.

Waterfall Layout Options

Default ValueDescriptio
autoFontSizefalseAutomatarie proprietatem fontis amplitudinis cuiuslibet arcae innixa in magnitudine archa primitiva. Defalta proprietas fontis amplitudo expresse non ponitur.
desiredWidth250Desideratam columnarum latitudinem definit. Ipsa latitudo computabitur secundum latitudinem et numerum columnarum.
hideOnMissingImagetrueCoria pixides continentes imagines quae onerari non possunt.
horizontalOrderfalseElementa definita in unaquaque columna a sinistra ad dextram ponuntur stricte unum elementum, deinde rursus incipit maxime in columna sinistra independens, in qua columna est magis locus. Semper elementa per defaltam ponentur in columna cum minima altitudine.
spaceBetween4Distantiam elementorum elementorum definit.
singleRowAlign
since version 2.7.0		justifiedDefines the behavior when not all columns can be filled due to too few images. Allowed values are left, center, right and justified.

Plus Provectus Optiones

Pro melioribus optionibus, API reprehendo sicco.

Semantic HTML

Simplicissima HTML structura Gridzy haec est:

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

Sed Gridzy valde flexibile est ac fere quavis alia HTML structura uti potes. Pauca tantum sunt consideranda;

  • Quisque gravida elementum quam, eget elementum ipsum.
  • Tum elementum continens et filii eius quodlibet tag genus esse possunt, sicut ul et li (modo considera ut defaltis navigatri reset).
  • Si elementum img elementum ipsum gravida non est, eget class gridzyImage .

Haec igitur est etiam structura HTML operativa;

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

Praesertim si titulos addere vis, HTML structuram provecta desideras. Ut plura de eo discas, vide Captions & Pelles .

Captions & Skins

Si titulos addere vis in porticu tuo, speciem definire debes. Ergo pelliculae praefinitae quaedam praesto sunt. Quaelibet pellicula constans fasciculi CSS. Hoc fasciculum addere debes praeter tabulas principales Gridzy (plerumque in sectione capitis):

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

Praeterea opus est structuram HTML progressam:

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

Si miraris de structura HTML, vide Semantic HTML .

Captionis enim cuiuslibet generis tag uti potes, iustus curandi genus gridzyCaption habet. Elementum img eget class gridzyImage .

Exemplum superius ostendit tibi pellem gridzySkinClassic . Altero utar, mox repone nomen utris cum uno horum;

inclusa pellibus

Praesto Classes
gridzySkinBlank
bonum principium ad partum in cute sua
Vivamus preview		gridzySkinBlank
gridzySkinClassic
Vivamus preview		gridzySkinClassic
gridzySkinClassicLight(DEPRECATUS quia versio 2.6.0)
gridzySkinFullOverlay
Vivamus preview		gridzySkinFullOverlay
gridzySkinFullOverlayLight(DEPRECATED cum versione 2.6.0)
gridzySkinLift
Vivamus preview		gridzySkinLift
gridzySkinLiftLight(DEPRECATED cum versione 2.6.0)
gridzySkinMagnifier
zoom functionality non includitur
Vivamus preview		gridzySkinMagnifier
gridzySkinMagnifierLight(DEPRECATED cum versione 2.6.0)

Omnes superiores pellibus tantum fasciculi CSS indigent, sed adiectis pellibus quae etiam fasciculum JavaScript requirunt:

<link rel="stylesheet" href="gridzy/skins/gridzySkinBlur/style.min.css" />
<script src="gridzy/skins/gridzySkinBlur/script.min.js"></script>
Praesto Classes
gridzySkinBlur
non operatur in III
Vivamus preview		gridzySkinBlur
gridzySkinBlurLight(DEPRECATED cum versione 2.6.0)
gridzySkinCard
Vivamus preview		gridzySkinCard
gridzySkinCardLight(DEPRECATED cum versione 2.6.0)

Cutis Options

Cum versione 2.6.0 Optiones constructas in pellibus configurare possunt. Secundum speciem cutem potes ponere subiectum colorem, textum colorem et textum umbram. CSS consuetudine proprietatibus uti potes ut hic videre potes:

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

Reprehendo sicco variabilium variabilium sustentationem et valores defaltam pro unaquaque pellicula hic:

gridzySkinClassic
VariabilisDefault ValueInformationes
--backgroundrgba(0, 0, 0, .7)quis patitur background valorem css
--colorrgb(255, 255, 255)quis color valorem concedit css
--text-shadownonepermittit aliquem css text-umbra valorem
gridzySkinFullOverlay
VariabilisDefault ValueInformationes
--backgroundrgba(0, 0, 0, .7)quis patitur background valorem css
--colorrgb(255, 255, 255)quis color valorem concedit css
--text-shadownonepermittit aliquem css text-umbra valorem
gridzySkinLift
VariabilisDefault ValueInformationes
--backgroundrgba(0, 0, 0, .7)quis patitur background valorem css
--colorrgb(255, 255, 255)quis color valorem concedit css
--text-shadow0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)permittit aliquem css text-umbra valorem
gridzySkinMagnifier
VariabilisDefault ValueInformationes
--backgroundrgba(0, 0, 0, .7)quis patitur background valorem css
--colorrgb(255, 255, 255)quis color valorem concedit css

Haec pellis non sustinet --text-shadow

gridzySkinBlur
VariabilisDefault ValueInformationes
--backgroundrgba(0, 0, 0, .7)quis patitur background valorem css
--colorrgb(255, 255, 255)quis color valorem concedit css
--text-shadow0 0 10px rgb(0, 0, 0)permittit aliquem css text-umbra valorem
gridzySkinCard
VariabilisDefault ValueInformationes
--backgroundrgba(0, 0, 0, 1)quis patitur background valorem css
--colorrgb(255, 255, 255)quis color valorem concedit css
--text-shadownonepermittit aliquem css text-umbra valorem

Omnes pelliculae praefinitae solum textum simplicem captiones sustinent. Pelles suas et implicatiores facere potes. Vide quaeso ad Style Gridzy .

Style Gridzy

Si nulla praefinita pellis ad necessitates tuas aptat, unam tuam dicere potes.

Via facillima est imprimis exsistens cutem effingere et ad usus tuos aptare. Cutis praedefinita gridzySkinBlank solet praebere fundamentum bonum et documenta bona in fasciculo 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;
}

In the file CSS you'll find the classes gridzySkinBlank , gridzyImage and gridzyCaption . Gridzy ipsum his generibus non indiget. Tantum adhibentur ad stylum et ideo eas removere vel nominare, si placet, potes.

Additionally you'll find the CSS class gridzyItem . Gridzy hoc genus automatice ad omnes filios directos elementi principalis continens. Ita uti potes hoc genus ad vasa gallery tui styli.

Animus Rerum momenti

  1. Item contenta plene respondeant. Intellige elementum magnitudine definite mutare. Recipis valores pro pixel values. Et inspice in Gridzy layout optionis autoFontSize , quae ligat magnitudinem fontis amplitudinis super item arca.
  2. Quaeque item rationem aspectum bene definitum habere debent. Ratio item aspectus numquam mutatur et opus est ad craticulam computandam. Si item res automatice non habet rationem bene definitae rationis, eam manually definiunt (eg via css).

In quibusdam, facilius potest dicere materiam rerum antequam Gridzy initializing est. Simpliciter removere fasciculum classium gridzy vel Gridzy html ad tempus ad hoc.

Id est! Hoc totum opus est cutem tuam aedificare. Maxime pelliculis praefinitis hoc non utitur.

Sed plus esse potest si placet ...

Provectus Pelles

Gridzy uses more CSS classes quam only gridzyItem . Pleraque ex eis sponte ponentur et iis etiam ad ita uti potes.

Pelagus continens Classes

Classis NomenDescriptio
gridzy
ut manually		Gridzy elementa cum hoc genere statim invenit et ea initializet.
gridzyAnimatedSponte ponetur si optio animate true est. Si hoc genus manually positum est, optio animate automatice true quoque obtinebit (nisi si false expresse positum est).

Item Classes

Classis NomenDescriptio
gridzyItemPonetur primum item incipit processus initializing. Numquam amovebitur.
gridzyItemInitializingPonetur primum item incipit processus initializing. Reponendum erit a gridzyItemReady simul ac item plene initialized. Significat non imagines plene oneratas (vide gridzyItemLoading ), sed item paratas ad visibiles.
gridzyItemReadyRepone gridzyItemInitializing simul ac item plene initialized. Numquam amovebitur. Significat non imagines plene oneratas (vide gridzyItemComplete ), sed item paratas ad visibiles.
gridzyItemLoadingPonetur primum item incipit processus initializing. Reponentur gridzyItemComplete simul ac imagines contentae (plerumque una tantum) plene onerata sunt.
gridzyItemCompletegridzyItemLoading restituet simulac imagines contentae (plerumque una tantum) plene onerata sunt. Numquam amovebitur.
gridzyItemInitialToVisiblePonetur ut primum item apparere incipit primum. Item statim amovebitur penitus visibile.
gridzyItemVisibleConstituetur ut primum item plene conspicuum est. Item mox evanescere incipit.
gridzyItemVisibleToHiddenPonetur simul atque item incipit evanescere. Amovebitur item statim ut lateat.
gridzyItemHiddenPonetur simul atque item celatur. Item primum apparere incipit.
gridzyItemHiddenToVisiblePonetur simul ac primum apparebit (nisi primum apparens - vide genus gridzyItemInitialToVisible ). Item statim amovebitur penitus visibile.
gridzyItemVisibleToVisiblePonetur ut primum aliquid in malesuada euismod mutatur, sed ipsum item erat ac visibile manere. Mox tolletur mutatio animatio.

Defalta processus indicator et animationes apparandi et evanescentis imagines praefixae sunt a lima Gridzy principale CSS.

Cum his supra scriptis CSS classes, processum tuum indicatum et animationes tuas exprimere potes. Aude inspicere in fasciculum Gridzy principale CSS, intelligere quid debeas delendi. Nullus metus, omnia ibi comprobata sunt.

Optimize Loading

Si multis imaginibus uteris, utilem esse poterit Gridzy adiuvandi eget velocius aedificandi.

Ne Jumping Imagines

Gridzy absolute indiget ratione aspectum omnium imaginum ad rationem malesuada euismod. Haec res evenit in saliendo elementis si imagines quaedam paratae sunt, aliae non sunt. Quo plura imagines, eo molestior hic effectus esse potest.

Ad hoc ne mores, width et height attributa omnibus elementis img . Refert ad singulas singulas imagines rectos valores constituere, alias imagines depravatae sunt. Valores recti sunt latitudinis et altitudo originalis cuiusque imaginis;

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

Deinceps Gridzy euismod computare potest statim sine necessitate cognoscere magnitudinem imaginum actu.

piger Loading

Imagines tantum onerare, quae in prospectu visibili sunt, hos gradus sequi;

  1. width et height attributa inserta ut supra dictum est (facito ut recta values)
  2. Repone omnia src attributa cum data-gridzylazysrc ut infra (si etiam srcset habes, ea repone cum 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 hos gradus imagines onerabunt quamprimum prope vel intra prospectum.

Processus Indicis

Processus indicator est icona animata parva quae apparet dum imaginem oneret. Si captionibus & pellibus uteris, indicator processus automatice ostendetur. Alioquin debes aliquibus servandis;

  1. Quisque elementum posuere img in elementum div
    (vel in aliquo alio elemento - vide semantic HTML pro more)
  2. Classis gridzyImage ad singulas elementorum 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>

Post hoc debes videre processus indices si imagines tempus onerare capiunt.

Filtra

Filtra in Gridzy sunt satis simplicia sed potens. Quodcumque genus colum tibi opus est, valde probabile est quod realizable est. Omnes opus est, paulum CSS et pauca HTML elementa formantia.

Hic exemplum utilitatis est:

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

Gradatim faciamus

1. Primum opus est usitatis HTML structura Gridzy et nomina classium omnium rerum gallery positarum ut ea postea eliquare possimus.

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

In hoc exemplo tantum unum genus ad unumquemque elementum utimur. Sed varia genera pro uno elemento etiam ponere potes, si illud elementum per plures filamenta inveniatur.

2. Addimus tesserae nonnullas per quas tunc filtra mutare possumus

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

Pro globulis, aliis elementis formantibus uti poteris sicut checkboxes, globulis radiophonicis, campis selectis et sic de aliis.

Ut videre potes, valores bullarum selectores solent CSS. Ut primum perfecerimus, strepita in tali globulo ostendet imagines quae congruit quod CSS electrix. Technice simpliciter optionem filter ad hunc valorem ponit.

Multo magis implicatis selectoribus uti potes. Pro exemplo :not(.animals) operaretur etiam, sicut .animals.people et .animals, .people .

3. Postremo bullas in div continens encapsulamus easque ad gallery Gridzy ligamus, optio filterControls ponendo:

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

Ut videre potes, etiam electrix CSS pro optione filterControls utimur. div continens cum id attributo solum inservit ut fibulas facilius eligant per quam CSS electrix.

Id est!

Si JavaScript solutionem mavis, API reprehendo sicco.

API

Etsi Gridzy habet suum API, pleraque sine eo fieri possunt, simpliciter abusiva per dom. Gridzy animadvertet et accommodare malesuada euismod. Sed est etiam potentissimus API …

Domum abusionem

Pro omnibus Documenti Object Exemplar (dom) manipulationes primum elementum continentis indigemus:

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

Imagines addere

Gravis est novum elementum infantis plene aedificare et replere antequam illud elementum continentis addas. Alioquin Gridzy dimensiones rectam deprehendere non potest.

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

Remove Imagines

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

Mutatio Optionum

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

More de manipulatione DOM apud MDN interretialem docs invenire potes. Adest etiam introductio ad dom praesto.

Proprium API

Uti API, primum instantiam Gridzy indigemus, quae ad elementum continens Gridzy ligatur;

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

Adepto Bene

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

Ut omnes Options

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

Set Optiones

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

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

Applicare Filter

Filtrum applicans optionem filter ponens solum quod potest esse validum CSS electrix:

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

Addere functiones Callback

DEPRECATUS cum versione 2.4.0
Utere vice moderna et magis flexibilium eventuum . Vide sequentem sectionem in singulis.

Gridzy.js 2 subsidia quaedam optiones pro functionibus callback. Poni possunt solum per API proprietarium, sed sicut aliae optiones:

// 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.
  }
});
Descriptio
onBeforeOptionsChangedMunus callback quod directe invocatur ante optiones occasum.
onOptionsChangedMunus callback quod immediate post occasum optiones invocatur.
onBeforeRenderMunus callback id quod directe invocatur coram reddendo.
onRenderMunus callback est quod immediate post reddendo invocatur.

Usus Events

quoniam versio 2.4.0

Certe Gridzy uti potes prorsus sicut solet JavaScript eventus:

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

Quaedam certe in Gridzy continente elemento et aliis eventibus accensa sunt in elementis singulis elementis continentis.

Eventus accensus in elementum Gridzy vase:

Descriptio
gridzyBeforeInitIgnes ante gallery initialization.
gridzyInitFires after gallery initialization.
gridzyBeforeOptionsChangedIgnes ante occasum optiones.
gridzyOptionsChangedIgnes ab occasu optiones.
gridzyBeforeRenderIgnibus ante datis.
gridzyRenderIgnibus redditis.
Si aliqua hic eventus desideras , petentibus subsidium mitte .

event.target elementum continens Gridzy praebet.
event.detail.instance praebet Gridzy instantia.

Item elementa in ignem certe:

Descriptio
gridzyItemBeforeInitIgnes ante item initialization.
gridzyItemInitIgnes post item initialization.
gridzyItemLoadingIgnes cum item incipit loading.
gridzyItemReadyIgnes item cum calculis eget paratus. Ratio sic notissima est, sed imago adhuc onerant.
gridzyItemCompleteItem imago Ignes cum plene oneratus est.
Si aliqua hic eventus desideras , petentibus subsidium mitte .

event.target item elementum praebet respectivum.
event.detail.instance praebet Gridzy instantia.

API - Global

Quaedam functiones sunt quae instantiae Gridzy independentiae sunt. Itaque non opus est ut ante instantia.

Default ut Bene

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

Ut omnes 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');

Set Default Options

Hoc optiones omnium instantiarum Gridzy iam initializatarum non ponit, sed fundamentum definit novarum instantiarum. Attamen, si optio instantiae existentis per valorem null reset esset, novo valore default utitur.

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

Hac ad optiones globally collocandas uti potes, si ante DOM nomen parata est. Itaque optiones attributorum amplius ponere non debes.

Automatismi

Quamdiu omnes automatismi Gridzy.js 2 agunt, rationibus inferioribus opus non est. Sed automatismi mutabiles possunt uti Gridzy more maiorum:

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

Quaedam ex his optionibus non possunt per data-gridzy- attributa vel per setOptions() , propter logicas rationes:

Default ValueDescriptio
autoInitOnDomReadytrueElementa detegit cum classe gridzy in pagina oneratisque et initializes ea.

Settable per Gridzy.setDefaultOptions()
autoInitOnDomMutation
MutationObserver		trueNova elementa detegit cum classe gridzy , quam primum apparuerunt in DOMO et ea initializet. (Eg in utens pagina transitus)

Settable per Gridzy.setDefaultOptions()
autoSyncChildListMutation
MutationObserver		trueDetegit utrum pueri elementa (imagines) additae vel remota sint et automatice craticulas updates.

Settable per data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
useOptionAttributestrueDefinit, utrum attributa data-gridzy- vulgo adhibeantur necne. Quae si false sunt optiones tantum per API proprietarium poni possunt.

Settable via new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncAttributesMutation
MutationObserver		trueMutationes data-gridzy- detegit, ac sponte poscit eget. Item detegit, si genus gridzyAnimated additur vel removetur et si mutationes style attributae fiunt. Si useOptionAttributes false est, solum mutationes style detegit.

Settable per data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncChildClassMutation
MutationObserver		trueOmnium infantium elementorum mutationes class attributorum detegit (imagines). Filtra circa.

Settable per data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncImageMutation
MutationObserver

quoniam versio 2.5.0		trueMutationes src attributorum omnium imaginum detegit. Pertinet cum usus est cum React vel similibus bibliothecis.

Settable per data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoRenderOnResize
ResizeObserver

quoniam versio 2.6.0		trueMutationes elementi latitudinem detegit. Responsivum propositum pertinet. (Ante versionem 2.6.0 resize in fenestra res auditor fuit usus)

Settable per data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()

Initialize Manually

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

Perdere Exemplum

Durius, oppositum initialis Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sync Puerum List Manually

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

Sync unum puerum elementum Manually

Solet non opus esse, nisi rarissime.

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

Sync attributa Manually

Nota optionem useOptionAttributes optionis ad hoc true esse.

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

Force Reddere

Plerumque non opus est, etiamsi omnes automatismi avertuntur

gridzyInstance.render();