PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

Accueil | Connexion | Français FR
  • Présentation
  • Zoom automatique d'une image dans une popup
  • Zoom automatique dans un champ Image présent dans une cellule ou dans une popup
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
WEBDEV propose plusieurs moyens pour zoomer une image :
Zoom automatique d'une image dans une popup
Pour réaliser un zoom automatique d'une image dans une popup :
  1. Créez si nécessaire un champ Image, Image cliquable ou Vignette. Ce champ contient l'image à zoomer.
  2. Affichez l'onglet "Détail" de la fenêtre de description du champ Image.
  3. Dans la zone "Zoom au survol", spécifiez :
    • le mode d'affichage : "Zoom dans une popup automatique".
    • la position de la popup. Cette position est relative au champ Image. Les options possibles sont : Dessus, Dessous, A gauche, A droite.
    • le facteur de zoom à appliquer.
  4. Validez. La zone de la popup apparaît en pointillé sous l'éditeur de pages. Il est possible de redimensionner si nécessaire cette zone.
Attention : Si la zone ne peut pas être affichée entièrement à la position indiquée, le moteur WEBDEV pourra la déplacer en exécution.
Zoom automatique dans un champ Image présent dans une cellule ou dans une popup
Dans la solution précédente, le zoom de l'image est réalisé dans une popup qui est obligatoirement "collée" à l'image originale. Dans certains cas, il peut être intéressant de laisser un espace entre l'image originale et le zoom réalisé.
Pour réaliser un zoom d'une image dans une cellule :
  1. Créez si nécessaire un champ Image, Image cliquable ou Vignette. Ce champ contient l'image à zoomer.
  2. Créez une cellule et insérez un nouveau champ Image dans cette cellule.
    Remarques :
    • Cette cellule peut être créée à n'importe que position dans la page.
    • La cellule doit être superposable (option "Le champ peut être superposé" cochée dans l'onglet "UI" de la fenêtre de description de la cellule).
    • L'espace présent entre le contour de la cellule et le contour du champ Image détermine l'espace entre l'image originale et l'image du zoom.
  3. Affichez l'onglet "Détail" de la fenêtre de description du champ Image (champ contenant l'image à zoomer).
  4. Dans la zone "Zoom au survol", spécifiez :
    • le mode d'affichage : "Zoom dans une popup personnalisée". Indiquez la cellule et l'image à utiliser (WEBDEV propose par défaut les éléments trouvés dans la page).
    • la position de la popup. Cette position est relative au champ Image. Les options possibles sont : Dessus, Dessous, A gauche, A droite.
    • le facteur de zoom à appliquer.
  5. Validez.
Pour réaliser un zoom d'une image dans une popup :
  1. Créez si nécessaire un champ Image, Image cliquable ou Vignette. Ce champ contient l'image à zoomer.
    Remarques :
    • Le mode d'affichage de l'image doit être "100%" (onglet "Général").
    • Le débordement doit être invisible (onglet "Style").
  2. Créez une popup :
    • Sous le volet "Création", dans le groupe "Conteneurs", cliquez sur "Popup".
    • Donnez un nom et enregistrez cette popup.
  3. Créez un champ Image dans la popup : sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "Image".
    Remarque : L'espace présent entre le contour de la popup et le contour du champ Image détermine l'espace entre l'image originale et l'image du zoom.
  4. Affichez l'onglet "Détail" de la fenêtre de description du champ Image (champ contenant l'image à zoomer).
  5. Dans la zone "Zoom automatique", spécifiez :
    • le mode d'affichage : "Zoom dans une popup personnalisée". Indiquez la popup et l'image à utiliser (WEBDEV propose par défaut les éléments trouvés dans la page).
    • la position de la popup. Cette position est relative au champ Image. Les options possibles sont : Dessus, Dessous, A gauche, A droite.
    • le facteur de zoom à appliquer.
  6. Validez.
Liste des exemples associés :
eCommerce Exemples complets (WEBDEV) : eCommerce
[ + ] Le projet eCommerce est un site complet de commerce en ligne personnalisable via une interface d'administration Web.
- La partie vitrine / paiement du site est réalisée en AWP afin de permettre un référencement optimal des produits.
- La partie administration du site est réalisée en session classique WB pour garantir une sécurité optimale.
Voir Aussi
Version minimum requise
  • Version 17
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire