Version 2.x – Gridzy.Gallery

Le site a été traduit automatiquement. Si quelque chose n'est pas clair, veuillez consulter la documentation en anglais.

Utilisation de base

Téléchargez les fichiers Gridzy sur votre serveur et ajoutez-les à votre site Web (généralement dans la section d'en-tête) :

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

Ajoutez le code HTML (n'importe où dans la section corps) :

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

Voilà ! C'est un exemple entièrement fonctionnel. Aucune initialisation supplémentaire n'est requise.

Configuration

La façon la plus simple de configurer Gridzy est d'utiliser simplement des attributs HTML. Il vous suffit de préfixer les noms d'options avec data-gridzy- . Ainsi, pour définir l'option spaceBetween , ajoutez simplement 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>

Options principales

	Valeur par défaut	Description
`animate`	`true`	Détermine si les animations doivent être utilisées lorsque la grille change (par exemple, lors du redimensionnement de la fenêtre du navigateur ou lors de la définition d'un filtre).
`layout`	`justified`	Définit la mise en page utilisée. Gridzy.js 2 prend en charge les deux mises en page différentes `justified` et `waterfall` . Chacun d'eux possède ses propres paramètres d'option supplémentaires, que vous pouvez trouver sous ce tableau.
`filter`	`*`	Détermine les images à afficher. N'importe quel sélecteur CSS peut être utilisé comme valeur ici. Généralement défini automatiquement via `filterControls` (voir option suivante). Découvrez les filtres
`filterControls`		Détermine les éléments de formulaire qui peuvent être utilisés pour filtrer les images. N'importe quel sélecteur CSS qui sélectionne des éléments de formulaire HTML peut être utilisé comme valeur ici. Découvrez les filtres
`autoConsiderScrollBars`	`true`	Pour prédire la largeur disponible si des barres de défilement apparaissent ou disparaissent. Il est toujours recommandé de le laisser sur `true` à moins que cet automatisme ne pose problème.

Justified Options de mise en page

	Valeur par défaut	Description
`autoFontSize`	`false`	Met à jour automatiquement la propriété font-size de chaque boîte en fonction de la taille de boîte d'origine. Par défaut, la propriété font-size n'est pas définie explicitement.
`desiredHeight`	`190`	Définit la hauteur souhaitée des lignes d'éléments. La hauteur réelle sera calculée en fonction de la largeur disponible et des éléments de la ligne.
`hideOnMissingImage`	`true`	Masque les cases contenant des images qui n'ont pas pu être chargées.
`spaceBetween`	`4`	Définit la distance entre les éléments en pixels.
`lastRowAlign` depuis la version 2.3.0	`justified`	Définit le comportement de la dernière ligne. Les valeurs autorisées sont `left` , `center` , `right` et `justified` .
`singleRowAlign` depuis la version 2.3.0	`justified`	Définit le comportement s'il n'y a qu'une seule ligne. Les valeurs autorisées sont `left` , `center` , `right` et `justified` .
~~`fillLastRow`~~ ~~depuis la version 2.1.0~~	~~`true`~~	SUPPRIMÉ depuis la version 2.4.0 (OBSOLÈTE depuis la version 2.3.0 ) Organise les images de manière à ce que la dernière ligne soit toujours entièrement remplie. Si vous prévoyez d'ajouter des images de manière dynamique, il peut être judicieux de désactiver cette option. N'a aucun effet sur les lignes simples (voir `fillSingleRow` ).
`fillSingleRow` depuis la version 2.1.0	~~`true`~~	SUPPRIMÉ depuis la version 2.4.0 (OBSOLÈTE depuis la version 2.3.0 ) S'il n'y a qu'une seule ligne, les images sont disposées de manière à ce que la ligne soit toujours entièrement remplie. S'il arrive que vous n'ayez qu'une ou deux images dans la galerie, il peut être judicieux de désactiver cette option.

Waterfall Options de mise en page

	Valeur par défaut	Description
`autoFontSize`	`false`	Met à jour automatiquement la propriété font-size de chaque boîte en fonction de la taille de boîte d'origine. Par défaut, la propriété font-size n'est pas définie explicitement.
`desiredWidth`	`250`	Définit la largeur souhaitée des colonnes. La largeur réelle sera calculée en fonction de la largeur disponible et du nombre de colonnes.
`hideOnMissingImage`	`true`	Masque les cases contenant des images qui n'ont pas pu être chargées.
`horizontalOrder`	`false`	Définit que les éléments sont placés strictement un élément dans chaque colonne de gauche à droite, puis recommence dans la colonne la plus à gauche, indépendamment de la colonne dans laquelle se trouve le plus de place. Par défaut, les éléments seront toujours placés dans la colonne avec la plus petite hauteur.
`spaceBetween`	`4`	Définit la distance entre les éléments en 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`.

Options plus avancées

Pour des options plus avancées, consultez l' API .

HTML sémantique

La structure HTML la plus simple de Gridzy est la suivante :

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

Cependant, Gridzy est très flexible et vous pouvez utiliser presque n'importe quelle autre structure HTML. Il y a seulement quelques points à prendre en compte :

Chaque enfant de l’élément conteneur représente un élément dans la grille.
L'élément conteneur et ses enfants peuvent être de n'importe quel type de balise, comme ul et li (pensez simplement à réinitialiser les paramètres par défaut du navigateur).
Si un élément img n'est pas lui-même un enfant direct, il a besoin de la classe gridzyImage .

Il s’agit donc également d’une structure HTML fonctionnelle :

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

Surtout si vous souhaitez ajouter des légendes, vous avez besoin d'une structure HTML avancée. Pour en savoir plus, consultez Légendes et skins .

Légendes et skins

Si vous souhaitez ajouter des légendes à votre galerie, vous devez définir l'apparence. Par conséquent, certains skins prédéfinis sont disponibles. Chaque skin est constitué d'un fichier CSS. Vous devez ajouter ce fichier en plus des fichiers Gridzy principaux (généralement dans la section head) :

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

De plus, vous avez besoin d’une structure HTML avancée :

<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 vous vous posez des questions sur la structure HTML, jetez un œil à HTML sémantique .

Pour la légende, vous pouvez utiliser n'importe quel type de balise, assurez-vous simplement qu'elle possède la classe gridzyCaption . L'élément img a besoin de la classe gridzyImage .

L'exemple ci-dessus vous montre le skin gridzySkinClassic . Pour en utiliser un autre, remplacez simplement le nom du skin par l'un des suivants :

Skins inclus

	Cours disponibles
gridzySkinBlank un bon point de départ pour créer son propre skin aperçu en direct	`gridzySkinBlank`
gridzySkinClassic aperçu en direct	`gridzySkinClassic` `gridzySkinClassicLight`(OBSOLÈTE depuis la version 2.6.0)
gridzySkinFullOverlay aperçu en direct	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(OBSOLÈTE depuis la version 2.6.0)
gridzySkinLift aperçu en direct	`gridzySkinLift` `gridzySkinLiftLight`(OBSOLÈTE depuis la version 2.6.0)
gridzySkinMagnifier fonctionnalité de zoom non incluse aperçu en direct	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(OBSOLÈTE depuis la version 2.6.0)

Tous les skins ci-dessus n'ont besoin que d'un fichier CSS, mais il existe des skins supplémentaires qui nécessitent également un fichier JavaScript :

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

	Cours disponibles
gridzySkinBlur ne fonctionne pas dans IE aperçu en direct	`gridzySkinBlur` `gridzySkinBlurLight`(OBSOLÈTE depuis la version 2.6.0)
gridzySkinCard aperçu en direct	`gridzySkinCard` `gridzySkinCardLight`(OBSOLÈTE depuis la version 2.6.0)

Options de skin

Depuis la version 2.6.0, il existe des options pour configurer les skins intégrés. En fonction du skin spécifique, vous pouvez définir la couleur d'arrière-plan, la couleur du texte et l'ombre du texte. Il vous suffit d'utiliser les propriétés CSS personnalisées comme vous pouvez le voir ici :

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

Consultez les variables prises en charge et les valeurs par défaut pour chaque skin ici :

gridzySkinClassic

Variable	Valeur par défaut	Information
`--background`	`rgba(0, 0, 0, .7)`	autorise n'importe quelle valeur d'arrière-plan CSS
`--color`	`rgb(255, 255, 255)`	permet n'importe quelle valeur de couleur CSS
`--text-shadow`	`none`	autorise n'importe quelle valeur d'ombre de texte CSS

gridzySkinFullOverlay

Variable	Valeur par défaut	Information
`--background`	`rgba(0, 0, 0, .7)`	autorise n'importe quelle valeur d'arrière-plan CSS
`--color`	`rgb(255, 255, 255)`	permet n'importe quelle valeur de couleur CSS
`--text-shadow`	`none`	autorise n'importe quelle valeur d'ombre de texte CSS

gridzySkinLift

Variable	Valeur par défaut	Information
`--background`	`rgba(0, 0, 0, .7)`	autorise n'importe quelle valeur d'arrière-plan CSS
`--color`	`rgb(255, 255, 255)`	permet n'importe quelle valeur de couleur CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	autorise n'importe quelle valeur d'ombre de texte CSS

gridzySkinMagnifier

Variable	Valeur par défaut	Information
`--background`	`rgba(0, 0, 0, .7)`	autorise n'importe quelle valeur d'arrière-plan CSS
`--color`	`rgb(255, 255, 255)`	permet n'importe quelle valeur de couleur CSS

Ce skin ne prend pas en charge --text-shadow

gridzySkinBlur

Variable	Valeur par défaut	Information
`--background`	`rgba(0, 0, 0, .7)`	autorise n'importe quelle valeur d'arrière-plan CSS
`--color`	`rgb(255, 255, 255)`	permet n'importe quelle valeur de couleur CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	autorise n'importe quelle valeur d'ombre de texte CSS

gridzySkinCard

Variable	Valeur par défaut	Information
`--background`	`rgba(0, 0, 0, 1)`	autorise n'importe quelle valeur d'arrière-plan CSS
`--color`	`rgb(255, 255, 255)`	permet n'importe quelle valeur de couleur CSS
`--text-shadow`	`none`	autorise n'importe quelle valeur d'ombre de texte CSS

Tous les skins prédéfinis ne prennent en charge que les légendes de texte simples. Vous pouvez créer vos propres skins plus complexes. Veuillez consulter Style Gridzy .

Style Gridzy

Si aucun skin prédéfini ne correspond à vos besoins, vous pouvez créer le vôtre.

Le moyen le plus simple est de copier d'abord un skin existant et de l'adapter à vos propres besoins. Le skin prédéfini gridzySkinBlank fournirait généralement une bonne base ainsi qu'une bonne documentation dans le fichier 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;
}

Dans le fichier CSS, vous trouverez les classes gridzySkinBlank , gridzyImage et gridzyCaption . Gridzy lui-même n'a pas besoin de ces classes. Elles ne sont utilisées que pour le style et vous pouvez donc les supprimer ou les renommer si vous le souhaitez.

Vous trouverez également la classe CSS gridzyItem . Gridzy définit automatiquement cette classe sur tous les enfants directs de l'élément conteneur principal. Vous pouvez donc utiliser cette classe pour styliser les éléments de votre galerie.

Gardez à l'esprit les choses importantes

Le contenu de l'élément doit être entièrement réactif. Sachez que la taille de l'élément va certainement changer. Utilisez des valeurs en pourcentage au lieu de valeurs en pixels. Et jetez un œil à l'option de mise en page Gridzy autoFontSize , qui lie la taille de la police à la taille de la zone de l'élément.
Chaque élément doit avoir un rapport hauteur/largeur bien défini. Le rapport hauteur/largeur de l'élément ne changera jamais et est nécessaire pour calculer la grille. Donc, si un élément n'a pas automatiquement un rapport hauteur/largeur bien défini, prédéfinissez-le manuellement (par exemple via CSS).

Dans certains cas, il peut être plus simple de styliser le contenu des éléments avant l'initialisation de Gridzy. Pour cela, supprimez simplement temporairement la classe gridzy ou le fichier javascript Gridzy.

Voilà ! C'est tout ce dont vous avez besoin pour créer votre propre skin. La plupart des skins prédéfinis n'en utilisent pas plus.

Mais il pourrait y en avoir plus si vous le souhaitez…

Skins avancés

Gridzy utilise plus de classes CSS que gridzyItem . La plupart d'entre elles seront définies automatiquement et vous pouvez également les utiliser pour le style.

Classes de conteneurs principales

Nom de la classe	Description
`gridzy` à régler manuellement	Gridzy trouve automatiquement les éléments avec cette classe et les initialise.
`gridzyAnimated`	Sera défini automatiquement si l'option `animate` est `true` . Si cette classe est définie manuellement, l'option `animate` sera également automatiquement définie sur `true` (sauf si elle est explicitement définie sur `false` ).

Classes d'objets

Nom de la classe	Description
`gridzyItem`	Sera défini dès que l'élément commencera le processus d'initialisation. Ne sera jamais supprimé.
`gridzyItemInitializing`	Sera défini dès que l'élément démarre le processus d'initialisation. Sera remplacé par `gridzyItemReady` dès que l'élément est entièrement initialisé. Cela ne signifie pas que les images sont entièrement chargées (voir `gridzyItemLoading` ), mais que l'élément est prêt à être visible.
`gridzyItemReady`	Remplacera `gridzyItemInitializing` dès que l'élément sera entièrement initialisé. Ne sera jamais supprimé. Cela signifie non pas que les images sont entièrement chargées (voir `gridzyItemComplete` ), mais que l'élément est prêt à être visible.
`gridzyItemLoading`	Sera défini dès que l'élément commencera le processus d'initialisation. Sera remplacé par `gridzyItemComplete` dès que les images contenues (généralement une seule) seront entièrement chargées.
`gridzyItemComplete`	Remplacera `gridzyItemLoading` dès que les images contenues (généralement une seule) seront entièrement chargées. Ne sera jamais supprimé.
`gridzyItemInitialToVisible`	Sera défini dès que l'élément commencera à apparaître pour la première fois. Sera supprimé dès que l'élément sera complètement visible.
`gridzyItemVisible`	Sera défini dès que l'élément sera entièrement visible. Sera supprimé dès que l'élément commencera à disparaître.
`gridzyItemVisibleToHidden`	Sera défini dès que l'élément commencera à disparaître. Sera supprimé dès que l'élément sera complètement masqué.
`gridzyItemHidden`	Sera défini dès que l'élément sera complètement masqué. Sera supprimé dès que l'élément commencera à apparaître.
`gridzyItemHiddenToVisible`	Sera défini dès que l'élément commence à apparaître (sauf lors de la première apparition – voir la classe `gridzyItemInitialToVisible` ). Sera supprimé dès que l'élément sera complètement visible.
`gridzyItemVisibleToVisible`	Sera défini dès que quelque chose dans la grille aura changé, mais l'élément lui-même était et restera visible. Sera supprimé dès que l'animation de changement sera terminée.

Par défaut, l'indicateur de processus et les animations d'apparition et de disparition des images sont prédéfinis par le fichier CSS principal de Gridzy.

Avec les classes CSS mentionnées ci-dessus, vous pouvez styliser vos propres indicateurs de processus et animations. Jetez un œil au fichier CSS principal de Gridzy pour comprendre ce que vous devez remplacer. Pas de crainte, tout y est bien documenté.

Optimiser le chargement

Si vous utilisez de nombreuses images, cela peut être une bonne idée d'aider Gridzy à construire la grille plus rapidement.

Empêcher les images de sauter

Gridzy a absolument besoin du rapport hauteur/largeur de toutes les images pour calculer la grille. Ce fait a pour conséquence de faire sauter des éléments si certaines images sont prêtes et d'autres non. Plus il y a d'images, plus cet effet peut être gênant.

Pour éviter ce comportement, définissez simplement les attributs width et height pour tous les éléments img . Il est important de définir les valeurs correctes pour chaque image individuelle, sinon les images seraient déformées. Les valeurs correctes sont la largeur et la hauteur d'origine de l'image concernée :

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

Gridzy peut ensuite calculer la grille immédiatement sans avoir besoin de connaître les tailles réelles des images.

Chargement différé

Pour charger uniquement les images qui se trouvent dans la fenêtre d'affichage visible, suivez simplement ces étapes :

Insérez les attributs width et height comme décrit ci-dessus (assurez-vous d’utiliser les valeurs correctes)
Remplacez tous les attributs src par data-gridzylazysrc comme indiqué ci-dessous (si vous avez également des attributs srcset , remplacez-les par 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>

Après ces étapes, les images se chargeront dès qu'elles seront proches ou à l'intérieur de la fenêtre d'affichage.

Indicateur de processus

L'indicateur de processus est la petite icône animée qui apparaît pendant le chargement de l'image. Si vous utilisez des légendes et des skins , l'indicateur de processus s'affichera automatiquement. Sinon, vous aurez besoin de quelques ajustements :

Placez chaque élément img dans un élément div
(ou dans tout autre élément – voir HTML sémantique pour en savoir plus)
Ajoutez la classe gridzyImage à chaque élément 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>

Après cela, vous devriez voir les indicateurs de processus si les images prennent du temps à charger.

Filtres

Les filtres dans Gridzy sont assez simples mais puissants. Quel que soit le type de filtre dont vous avez besoin, il est très probable qu'il soit réalisable. Tout ce dont vous avez besoin, c'est d'un peu de CSS et de quelques éléments de formulaire HTML…

Voici un exemple fonctionnel :

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

Construisons-le étape par étape

1. Nous avons d'abord besoin de la structure HTML habituelle de Gridzy et de définir des noms de classe pour tous les éléments de la galerie afin de pouvoir les filtrer par la suite

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

Dans cet exemple, nous n'utilisons qu'une seule classe pour chaque élément. Mais vous pouvez également définir plusieurs classes pour un seul élément, si cet élément doit pouvoir être trouvé via plusieurs filtres.

2. Ensuite, nous ajoutons quelques boutons grâce auxquels nous pouvons modifier les filtres puis

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

Au lieu des boutons, vous pouvez également utiliser d'autres éléments de formulaire tels que des cases à cocher, des boutons radio, des champs de sélection, etc.

Comme vous pouvez le voir, les valeurs des boutons sont des sélecteurs CSS habituels. Dès que nous avons terminé, un clic sur un tel bouton affichera les images qui correspondent à ce sélecteur CSS. Techniquement, il définit simplement l'option filter sur cette valeur.

Vous pouvez également utiliser des sélecteurs beaucoup plus complexes. Par exemple :not(.animals) fonctionnerait également, ainsi que .animals.people et .animals, .people .

3. Enfin, nous encapsulons les boutons dans un conteneur div et les lions à la galerie Gridzy, en définissant l'option 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>

Comme vous pouvez le voir, nous utilisons également un sélecteur CSS pour l'option filterControls . Le conteneur div avec l'attribut id sert uniquement à rendre les boutons plus faciles à sélectionner via ce sélecteur CSS.

C'est ça!

Si vous préférez une solution JavaScript, consultez l' API .

API

Bien que Gridzy dispose de sa propre API, la plupart des choses peuvent être faites sans elle, simplement en manipulant le DOM. Gridzy le remarquera et ajustera la grille. Mais il existe également une API très puissante…

Manipulation du DOM

Pour toutes les manipulations du Document Object Model (DOM), nous avons d'abord besoin de l'élément conteneur :

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

Ajouter des images

Il est important de construire et de remplir entièrement le nouvel élément enfant avant de l'ajouter à l'élément conteneur. Sinon, Gridzy ne peut pas détecter les dimensions correctes.

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

Supprimer les images

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

Modifier les options

// change the spaceBetween option to a specific value
gridzyElement.setAttribute('data-gridzy-spaceBetween', '10');

// change the layout option to a specific value
gridzyElement.setAttribute('data-gridzy-layout', 'waterfall');

// reset the spaceBetween option to its default value
gridzyElement.removeAttribute('data-gridzy-spaceBetween');

Vous trouverez plus d'informations sur la manipulation du DOM dans la documentation Web de MDN . Une introduction au DOM est également disponible.

API propriétaire

Pour utiliser l'API, nous avons d'abord besoin de l'instance Gridzy, qui est liée à l'élément conteneur Gridzy :

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

Obtenir une option

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

Obtenez toutes les options

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

Définir les options

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

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

Appliquer le filtre

Appliquer un filtre consiste simplement à définir l'option filter qui peut être n'importe quel sélecteur CSS valide :

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

Ajouter des fonctions de rappel

OBSOLÈTE depuis la version 2.4.0
Utilisez plutôt les événements modernes et plus flexibles. Consultez la section suivante pour plus de détails.

~~Gridzy.js 2 prend en charge certaines options pour les fonctions de rappel. Elles ne peuvent être définies que via l'API propriétaire, mais comme les autres options :~~

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

	~~Description~~
~~`onBeforeOptionsChanged`~~	~~Fonction de rappel qui est invoquée directement avant de définir les options.~~
~~`onOptionsChanged`~~	~~Fonction de rappel qui est invoquée directement après la définition des options.~~
~~`onBeforeRender`~~	~~Fonction de rappel qui est invoquée directement avant le rendu.~~
~~`onRender`~~	~~Fonction de rappel qui est invoquée directement après le rendu.~~

Utiliser les événements

depuis la version 2.4.0

Vous pouvez utiliser les événements Gridzy exactement comme les événements JavaScript habituels :

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

Certains événements sont déclenchés sur l'élément conteneur Gridzy et d'autres événements sont déclenchés sur les éléments individuels dans l'élément conteneur.

Événements déclenchés sur l'élément conteneur Gridzy :

	Description
`gridzyBeforeInit`	Se déclenche avant l'initialisation de la galerie.
`gridzyInit`	Se déclenche après l'initialisation de la galerie.
`gridzyBeforeOptionsChanged`	Les incendies avant la définition des options.
`gridzyOptionsChanged`	Se déclenche après avoir défini les options.
`gridzyBeforeRender`	Incendies avant le rendu.
`gridzyRender`	Incendies après rendu.

Si vous manquez des événements ici, veuillez envoyer une demande d'assistance .

event.target fournit l'élément conteneur Gridzy.
event.detail.instance fournit l'instance Gridzy.

Événements déclenchés sur les éléments d'élément :

	Description
`gridzyItemBeforeInit`	Se déclenche avant l'initialisation de l'élément.
`gridzyItemInit`	Se déclenche après l'initialisation de l'élément.
`gridzyItemLoading`	Se déclenche lorsque l'élément commence à se charger.
`gridzyItemReady`	Se déclenche lorsque l'élément est prêt pour le calcul de la grille. Le rapport hauteur/largeur est donc connu, mais l'image peut encore être en cours de chargement.
`gridzyItemComplete`	Se déclenche lorsque l'image de l'élément est entièrement chargée.

Si vous manquez des événements ici, veuillez envoyer une demande d'assistance .

event.target fournit l'élément item correspondant.
event.detail.instance fournit l'instance Gridzy.

API – Global

Certaines fonctions sont indépendantes des instances Gridzy. Nous n'avons donc pas besoin d'obtenir une instance au préalable.

Obtenir l'option par défaut

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

Obtenir toutes les options par défaut

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

Définir les options par défaut

Cela ne définit pas les options de toutes les instances Gridzy déjà initialisées, mais définit la base des nouvelles instances. Cependant, si une option d'une instance existante devait être réinitialisée via la valeur null , elle utiliserait la nouvelle valeur par défaut.

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

Vous pouvez utiliser ceci pour définir des options de manière globale, si vous l'appelez avant que DOM ne soit prêt. Vous n'aurez donc plus besoin de définir des options en tant qu'attributs.

Automatismes

Tant que tous les automatismes de Gridzy.js 2 sont actifs, les méthodes ci-dessous ne sont pas nécessaires. Mais les automatismes peuvent être désactivés pour utiliser Gridzy de manière plus traditionnelle :

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

Certaines de ces options ne peuvent pas être définies via les attributs data-gridzy- ou via setOptions() , pour des raisons logiques :

	Valeur par défaut	Description
`autoInitOnDomReady`	`true`	Détecte les éléments avec la classe `gridzy` lors du chargement de la page et les initialise. Réglable via `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` Observateur de mutation	`true`	Détecte les nouveaux éléments avec la classe `gridzy` dès qu'ils apparaissent dans le DOM et les initialise. (par exemple lors de l'utilisation de transitions de page) Réglable via `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` Observateur de mutation	`true`	Détecte si des éléments enfants (images) sont ajoutés ou supprimés et met à jour la grille automatiquement. Réglable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Définit si les attributs `data-gridzy-` sont généralement utilisés ou non. Si cette option est `false` les options ne peuvent être définies que via l'API propriétaire. Réglable via `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` Observateur de mutation	`true`	Détecte les modifications des attributs `data-gridzy-` et met à jour la grille automatiquement. Détecte également si la classe `gridzyAnimated` est ajoutée ou supprimée et si des modifications d'attribut `style` se produisent. Si `useOptionAttributes` est `false` , il détecte uniquement les modifications d'attribut `style` . Réglable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` Observateur de mutation	`true`	Détecte les modifications des attributs `class` de tous les éléments enfants (images). Pertinent pour les filtres. Réglable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` Observateur de mutation depuis la version 2.5.0	`true`	Détecte les modifications des attributs `src` de toutes les images. Pertinent lorsqu'il est utilisé avec React ou des bibliothèques similaires. Réglable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` RedimensionnerObserver depuis la version 2.6.0	`true`	Détecte les changements de largeur de l'élément. Pertinent pour la conception réactive. (Avant la version 2.6.0, un écouteur d'événement de redimensionnement de fenêtre était utilisé) Réglable via `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Initialiser manuellement

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

Détruire l'instance

En gros, c'est l'opposé de l'initialisation de Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Synchroniser la liste des enfants manuellement

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

Synchroniser manuellement un seul élément enfant

Habituellement pas nécessaire, sauf dans de très rares cas.

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

Synchroniser les attributs manuellement

Notez que l'option useOptionAttributes doit être true pour cela.

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

Rendu forcé

Généralement pas nécessaire, même si tous les automatismes sont désactivés

gridzyInstance.render();

Plugin WordPress

Bibliothèque JavaScript

Service