|
|
|
|
|
|
|
|
- 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
Zoomer une image (WEBDEV)
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 : - Créez si nécessaire un champ Image, Image cliquable ou Vignette. Ce champ contient l'image à zoomer.
- Affichez l'onglet "Détail" de la fenêtre de description du champ Image.
- 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.
- 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 : - Créez si nécessaire un champ Image, Image cliquable ou Vignette. Ce champ contient l'image à zoomer.
- Créez une cellule et insérez un nouveau champ Image dans cette cellule.
Remarques : - Cette cellule peut être créée à n'importe quelle 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.
- Affichez l'onglet "Détail" de la fenêtre de description du champ Image (champ contenant l'image à zoomer).
- 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.
- Validez.
Pour réaliser un zoom d'une image dans une popup : - 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").
- Créez une popup :
- Sous le volet "Création", dans le groupe "Conteneurs", cliquez sur "Popup".
- Donnez un nom et enregistrez cette popup.
- 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. - Affichez l'onglet "Détail" de la fenêtre de description du champ Image (champ contenant l'image à zoomer).
- 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.
- Validez.
Liste des exemples associés :
|
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.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|