DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Développer une application ou un site / Champs, fenêtres et pages / Champs : Types disponibles / Champ Zone Répétée
  • Présentation
  • Galerie en lignes
  • Présentation
  • Création d'une galerie en lignes
  • Caractéristiques de la galerie en lignes
  • Galerie en colonnes
  • Présentation
  • Création d'une galerie en colonnes
  • Caractéristiques de la galerie en colonnes
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Présentation
Le champ Zone répétée "Galerie d'images" permet de gérer sans programmation l'affichage d'un ensemble d'images. Les images peuvent être de taille et proportion différentes : le champ Galerie d'images se charge d'offrir un affichage harmonieux.
La navigation entre les images est automatiquement gérée. Le champ affiche des images présentes dans un répertoire ou provenant d'une base de données ou encore fixées par programmation.
Galerie en lignes

Présentation

Une galerie d'images en lignes propose une même hauteur pour chaque image de la même ligne. Les lignes n'ont pas forcément la même hauteur : cette hauteur est déterminée automatiquement en fonction des images de la ligne.
La Galerie en lignes adapte automatiquement la largeur de chaque répétition pour respecter les proportions de l'image.
Exemple :
Un champ Galerie en lignes est conseillé si vous devez afficher uniquement des images (sans texte en dessous par exemple).

Création d'une galerie en lignes

WEBDEV - Code Serveur Pour créer une galerie d'images en lignes à partir d'un champ prédéfini :
  1. Sous le volet "Création", dans le groupe "Données", déroulez "Zone Répétée" et sélectionnez "Galerie en lignes".
  2. Cliquez dans la page à la position où le champ doit être créé.
    Le champ Galerie en lignes est composé par défaut :
    • d'un champ Zone répétée classique de type "Galerie en lignes".
    • d'un champ Image dynamique utilisant le mode d'affichage navigateur "Homothétique centré sans agrandissement".
    • d'un champ Libellé permettant d'afficher des informations.
    • d'une réglette permettant d'afficher les différentes pages de la zone répétée.
    • de trois boutons (favoris, commenter, partager).
  3. Vous pouvez personnaliser le champ Galerie créé. Aucun code n'est associé aux différents éléments du champ Galerie.
Remarque : Il est également possible de créer un champ Zone répétée standard, puis de le configurer pour obtenir une galerie en lignes.
WINDEVWINDEV Mobile Pour créer une galerie d'images en lignes à partir d'un champ prédéfini :
  1. Sous le volet "Création", dans le groupe "Données", déroulez "Zone Répétée" et sélectionnez "Galerie en lignes".
  2. Cliquez dans la fenêtre à la position où le champ doit être créé.
    Le champ Galerie en lignes est composé par défaut :
    • d'un champ Zone répétée de type "Galerie en lignes".
    • d'un champ Image.
    • d'un champ Libellé permettant d'afficher des informations.
  3. Vous pouvez personnaliser le champ Galerie créé. Aucun code n'est associé aux différents éléments du champ Galerie.
Remarque : Il est également possible de créer un champ Zone répétée standard, puis de le configurer pour obtenir une galerie en lignes.

Caractéristiques de la galerie en lignes

  • Champ de référence : Une galerie en lignes est composée de répétitions. Chaque répétition contient au moins un champ de référence. Ce champ de référence correspond à un champ Image, un champ Image cliquable ou un champ Vignette. Ce champ de référence permet de définir une taille de référence (une taille minimale).
    Ce champ de référence est défini dans l'onglet "Détail" de la fenêtre de description du champ Zone répétée.
  • Popup de défilement : Il est possible d'ouvrir automatiquement une popup de défilement lors du clic sur le champ de référence :
    • WEBDEV - Code Serveur Dans la fenêtre de description du champ Zone répétée, dans l'onglet "Détail", cochez l'option "Au clic, ouvrir une popup de défilement automatique".
    • WINDEVWINDEV Mobile Dans la fenêtre de description du champ Zone répétée, dans l'onglet "Détail", cochez l'option "Afficher une popup au clic".
  • En exécution, la hauteur de chaque ligne s'adapte au contenu affiché dans les répétitions de la ligne.
    Attention : le mode d'affichage du champ Image est très important.
    • Si l'image source est plus petite que le champ Image de référence, en exécution, le mode d'affichage de l'image s'applique.
    • Si l'image source est plus haute que large par rapport au champ Image de référence, la hauteur de la ligne pourra être augmentée.
Galerie en colonnes

Présentation

Une galerie d'images en colonnes propose une même largeur pour chaque répétition de la même colonne. Dans chaque colonne, la hauteur de la répétition peut être variable : cette hauteur est déterminée automatiquement en fonction des images affichées.
Exemple :

Création d'une galerie en colonnes

WEBDEV - Code Serveur Pour créer une galerie d'images en colonnes à partir d'un champ prédéfini :
  1. Sous le volet "Création", dans le groupe "Données", déroulez "Zone Répétée" et sélectionnez "Galerie en colonnes".
  2. Cliquez dans la page à la position où le champ doit être créé.
    Le champ Galerie en colonnes est composé par défaut :
    • d'un champ Zone répétée classique de type "Galerie en colonnes".
    • d'un champ Image dynamique utilisant le mode d'affichage navigateur "Homothétique centré sans agrandissement".
    • d'un champ Libellé permettant d'afficher des informations.
    • d'une réglette permettant d'afficher les différentes pages de la zone répétée.
    • de trois boutons (favoris, commenter, partager).
  3. Vous pouvez personnaliser le champ Galerie créé. Aucun code n'est associé aux différents éléments du champ Galerie.
WINDEVWINDEV Mobile Pour créer une galerie d'images en colonnes à partir d'un champ prédéfini :
  1. Sous le volet "Création", dans le groupe "Données", déroulez "Zone Répétée" et sélectionnez "Galerie en colonnes".
  2. Cliquez dans la page à la position où le champ doit être créé.
    Le champ Galerie en colonnes est composé par défaut :
    • d'un champ Zone répétée de type "Galerie en colonnes".
    • d'un champ Image.
    • d'un champ Libellé permettant d'afficher des informations.
  3. Vous pouvez personnaliser le champ Galerie créé. Aucun code n'est associé aux différents éléments du champ Galerie.

Caractéristiques de la galerie en colonnes

  • WEBDEV - Code Serveur Paramétrage du nombre de colonnes (onglet "Détail" de la description du champ) : Il est possible de paramétrer le mode d'affichage des colonnes de la galerie :
    • Nombre de colonnes fixe et largeur variable : Si la largeur de la zone répétée permet l'affichage d'une colonne supplémentaire, le nombre de colonnes n'est pas modifié. Seule la largeur des colonnes est modifiée.
    • Nombre de colonnes variable et largeur fixe : Si la largeur de la zone répétée permet l'affichage d'une colonne supplémentaire, alors elle est ajoutée. Avant d'ajouter la colonne, les répétitions sont centrées horizontalement.
    • Nombre de colonnes variable et largeur variable : Si la largeur de la zone répétée permet l'affichage d'une colonne supplémentaire, alors elle est ajoutée. Avant d'ajouter la colonne, les répétitions sont étirées horizontalement.
  • WINDEVWINDEV Mobile Paramétrage du nombre de colonnes (onglet "Détail" de la description du champ) : Il est possible de paramétrer le mode d'affichage des colonnes de la galerie :
    • Largeur de colonnes variable : Si la largeur de la zone répétée permet l'affichage d'une colonne supplémentaire, le nombre de colonnes n'est pas modifié. Seule la largeur des colonnes est modifiée.
    • Largeur et nombre de colonnes variables : Si la largeur de la zone répétée permet l'affichage d'une colonne supplémentaire, alors elle est ajoutée. Avant d'ajouter la colonne, les répétitions sont étirées horizontalement.
    • Nombre de colonnes variable (à gauche) : Si la largeur de la zone répétée permet l'affichage d'une colonne supplémentaire, alors elle est ajoutée. Les images sont alignées à gauche. Avant d'ajouter la colonne, une zone vide peut apparaître à droite.
    • Nombre de colonnes variable (centrées) : Si la largeur de la zone répétée permet l'affichage d'une colonne supplémentaire, alors elle est ajoutée. Avant d'ajouter la colonne, les colonnes sont centrées et une zone vide peut apparaître de part et d'autre des colonnes centrées.
    • Largeur et nombre de colonnes fixes (à gauche) : Le nombre de colonnes et la largeur des colonnes ne sont pas modifiés. Les colonnes sont alignées à gauche.
    • Largeur et nombre de colonnes fixes (centrées) : Le nombre de colonnes et la largeur des colonnes ne sont pas modifiés. Les colonnes sont centrées.
  • Champ de référence : Une galerie en colonnes est composée de répétitions. Chaque répétition contient au moins un champ Image. Le champ Zone répétée "Galerie en colonnes" est associé à ce champ Image (ou un champ Image cliquable ou un champ Vignette). Ce champ permet de définir une taille de référence.
    Ce champ de référence est défini dans l'onglet "Détail" de la fenêtre de description du champ Zone répétée.
  • Popup de défilement : Il est possible d'ouvrir automatiquement une popup de défilement lors du clic sur le champ de référence :
    • WEBDEV - Code Serveur Dans la fenêtre de description du champ Zone répétée, dans l'onglet "Détail", cochez l'option "Au clic, ouvrir une popup de défilement automatique".
    • WINDEVWINDEV Mobile Dans la fenêtre de description du champ Zone répétée, dans l'onglet "Détail", cochez l'option "Afficher une popup au clic".
  • En exécution, la hauteur de chaque répétition s'adapte au contenu affiché.
    Attention : le mode d'affichage et les options d'ancrage du champ Image sont très importantes.
    • Si l'image source est plus petite que le champ Image de référence, en exécution, les dimensions du champ de référence sont appliquées à l'image.
    • Si l'image source est plus large que haute par rapport au champ Image de référence, la largeur de la colonne sera augmentée.
Liste des exemples associés :
Galerie_Photos Exemples complets (WEBDEV) : Galerie_Photos
[ + ] Cet exemple est un site de galerie photos et se compose de 2 parties principales :
- la partie "visiteur", réalisée en mode AWP et référençable.
- la partie administration réalisée en mode WEBDEV classique et sécurisée.  
 
Parmi les fonctionnalités proposées, vous y trouverez :
- une organisation par albums de vos photos
- un lien vers les réseaux sociaux
- la possibilité pour les visiteurs de commenter vos publications
- la connexion des utilisateurs est gérée via le GPU de WEBDEV
- un formulaire de contact
- au niveau de l’administration du site, vous pourrez bien évidemment uploader vos photos, les classer par album et aussi les décrire
WD Champ Galerie Exemples didactiques (WINDEV) : WD Champ Galerie
[ + ] Cet exemple montre l'utilisation du Champ "Galerie d'images".
WM Champ Galerie Exemples multiplateforme (WINDEV Mobile) : WM Champ Galerie
[ + ] Cet exemple montre l'utilisation du Champ "Galerie d'images".
Version minimum requise
  • Version 23
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 26/06/2023

Signaler une erreur ou faire une suggestion | Aide en ligne locale