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 Vignette
  • Présentation du champ Vignette
  • Créer un champ Vignette
  • Créer un champ Vignette
  • Description d'un champ Vignette
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 du champ Vignette
Le champ Vignette permet de gérer automatiquement l'affichage des images sous forme de vignettes.
Lors d'un clic sur la vignette, l'image originale sera automatiquement affichée :
  • soit dans une nouvelle fenêtre du navigateur soit dans un nouvel onglet du navigateur (selon la configuration du navigateur).
  • soit sous forme de popup (automatique ou dans un champ Image d'une cellule).
    La popup suit le redimensionnement du navigateur, et une transition est automatiquement effectuée lors de l'affichage de la popup.
    Cette popup présente les fonctionnalités suivantes :
    • Fermeture via un clic sur le fond, la touche Echap ou la croix de fermeture.
    • Barre d'outils en affichage en fondu avec délai et effet foncé au survol, avec un bouton de rotation et des boutons de zoom +/-
    • Rotation par paliers de 90 degrés.
    • Possibilité de zoom via la molette de la souris double-clic pour effectuer un zoom 2.5x.
    • Zoom par cran de 100%.
    • Déplacement de l'image via Drag and Drop.
Aucune ligne de code n'est nécessaire.
Ce type de champ simplifie beaucoup la création de pages "Catalogue".
Créer un champ Vignette

Créer un champ Vignette

Pour créer un champ Vignette :
  1. Sous le volet "Création", dans le groupe "Champs usuels", déroulez "Image" et sélectionnez "Vignette".
  2. Cliquez dans la page à la position où le champ doit être créé. Le champ est automatiquement créé.
Pour afficher les caractéristiques du champ, sélectionnez l'option "Description" dans le menu contextuel du champ.

Description d'un champ Vignette

Voici les caractéristiques importantes de la description d'un champ Vignette. Ces caractéristiques sont présentes dans les différents onglets de la fenêtre description du champ.
Onglet "Général" :
  • Source de l'image :
    • Image : Permet d'indiquer le chemin de l'image grand format associée au champ Vignette. Cette image sera automatiquement affichée lors du clic sur la vignette.
    • Vignette. Permet d'indiquer le chemin de l'image qui sera utilisée comme vignette. Il est ainsi possible d'afficher dans le champ Vignette une image différente de l'image originale. Si ce champ n'est pas renseigné, l'image de la vignette est automatiquement générée par WEBDEV à partir de l'image originale.
  • Paramètres d'affichage :
    • Mode d'affichage. Pour plus de détails, consultez Choisir le mode d'affichage de l'image. Seuls les modes "Homothétique centré" et "Etiré" sont disponibles.
    • Transparence. Pour plus de détails, consultez Choisir le mode d'affichage de l'image.
    • Affichage grand format : Cette option permet de choisir l'endroit où l'image originale doit être affichée lors du clic sur la vignette (nouvel onglet du navigateur par défaut).
      Plusieurs destinations permettent un affichage spécifique de l'image de la vignette :
      • Popup Automatique : l'image de la vignette est affichée sous forme de popup dans la page (le fond de la page est grisé). Le style de la popup automatique peut être défini dans l'onglet "Style" du champ Vignette (élément "Popup automatique").
      • Popup personnalisée :
        • si votre page contient une cellule et un champ Image dans la cellule, il est possible d'afficher l'image dans cette cellule. Il suffit de sélectionner le nom de la cellule et du champ Image. L'image de la vignette est affichée dans la cellule sous forme de popup dans la page (le fond de la page est grisé).
        • si votre page contient une popup et un champ Image dans la popup, il est possible d'afficher l'image dans cette popup. Il suffit de sélectionner le nom de la popup et du champ Image. L'image de la vignette est affichée dans le champ Image de la popup.
Onglet "UI" :
  • Transition : Lorsque la valeur du champ vignette est modifiée, une transition peut être sélectionné comme par exemple Fondu, Recouvrement ou Balayage pour rendre le changement d'image plus harmonieux. Pour plus de détails, consultez Animer une image.
  • Défilement automatique : Cette option est accessible uniquement pour les images de type "dynamiques" ou de type "depuis une base de données : chemin". Pour plus de détails, consultez Image avec défilement automatique.
Onglet "Détail" :
  • Chargement différé : L'option "Charger l'image lorsque le champ est à l'écran" permet de différer le chargement de l'image. En effet, quand un navigateur réalise le rendu d'une page, il charge depuis le serveur la page et ses images. Dans certains cas, ce temps de chargement peut s'avérer long. Cette option permet au navigateur de charger l'image uniquement lorsque celle-ci apparaît dans la partie visible de la page. Il est possible de spécifier également l'image d'attente, utilisée pendant le chargement différé de l'image.
  • Zoom au survol : Cette option permet d'afficher l'image originale dans une popup lors du survol de la vignette. Il est possible de choisir :
    • Popup Automatique : l'image de la vignette est affichée sous forme de popup dans la page (le fond de la page est grisé). Le style de la popup automatique peut être défini dans l'onglet "Style" du champ Vignette (élément "Popup automatique").
    • Popup personnalisée :
      • si votre page contient une cellule et un champ Image dans la cellule, il est possible d'afficher l'image dans cette cellule. Il suffit de sélectionner le nom de la cellule et du champ Image. L'image de la vignette est affichée dans la cellule sous forme de popup dans la page (le fond de la page est grisé).
      • si votre page contient une popup et un champ Image dans la popup, il est possible d'afficher l'image dans cette popup. Il suffit de sélectionner le nom de la popup et du champ Image. L'image de la vignette est affichée dans le champ Image de la popup.
    Pour plus de détails, consultez Zoomer une image.
  • Options :
    • Support des indirections (ralentit l'exécution) : Cette option permet de manipuler le champ via des indirections. Pour plus de détails, consultez Opérateurs d'indirection.
    • Désactiver la sauvegarde de l'image dans le menu contextuel du navigateur : Si cette option est cochée, le menu contextuel de la vignette ne pourra pas être affiché dans le navigateur. Toutes les manipulations de la vignette disponibles au niveau du navigateur (enregistrement, impression, ...) ne pourront pas être réalisées.
      Attention : seule l'image affichée en vignette est protégée. L'image ouverte dans le nouveau navigateur n'est pas protégée. Le menu contextuel de cette image sera affiché.
  • Compatibilité avec les versions précédentes : Ces options reprennent les options de configuration des images disponibles dans la version 23 et précédentes. Ces options sont disponibles pour compatibilité. Désormais, le type de l'image est déduit automatiquement. Pour plus de détails sur les options disponibles par compatibilité, consultez Choisir le type d'image : dynamique, statique, générée, ....
Version minimum requise
  • Version 10
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 11/07/2022

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