Astuce WebAcappella : l’effet FancyBox pour vos images

L’effet FancyBox vous donne la possibilité, pour la photo de votre choix, d’afficher la photo en plus grand dans une fenêtre flottante sur simple clic. Un effet sympa pour mettre en valeur certaines des images de votre site ! Zoom sur cet outil arrivé avec WebAcappella 4.

Activer l’option FancyBox sur une image

Ouvrez votre site dans WebAcappella et sur la page de votre choix, insérer un élément « image » depuis le menu « Insertion ».

fancyboxAvec l’inspecteur de propriétés de l’image, choisissez dans un premier temps une photo JPEG ou PNG dans votre bibliothèque de ressources puis, une fois la sélection effectuée pour le mode « normal », cliquez ensuite sur l’onglet « Propriétés FancyBox de l’image » pour cocher « Activer FancyBox sur l’image ».

Vous allez maintenant pouvoir « éditer les propriétés par défaut » de l’option FancyBox, paramètres qui seront identiques pour toutes les images utilisant FancyBox sur votre site :

  • choix de la taille maximale d’affichage de vos images dans la fenêtre flottante
  • sélection du type d’animation (élastique, fondu, translation simple ou aucun)
  • la position du titre de votre image (incrusté, flottant, à l’intérieur)
  • activer ou non le défilement en boucle si vous regroupez plusieurs images fancybox dans une même galerie.

Si vous définissez un lien pour votre image, ce dernier s’affichera comme votre titre dans la fenêtre flottante.

N’hésitez pas à tester votre site pour voir les différents effets d’animation des images FancyBox.

Créer une galerie photos dans une fenêtre FancyBox

fancybox-galerieAvec WebAcappella, vous avez désormais la possibilité de créer une galerie d’images qui sera affichée, elle aussi, sur un simple clic, dans une fenêtre flottante.

Pour ce faire, ajoutez plusieurs photos sur votre page et activez, pour toutes vos photos, l’option FancyBox selon la méthode expliquée plus haut dans l’article.

Pour chaque photo, cliquez dans l’inspecteur de propriétés sur l’onglet « Propriétés FancyBox de l’image » puis sur « Regrouper les images dans une galerie ». Définissez ensuite un « groupe » (groupe n°1 par exemple puis un ordre d’affichage (1, 2, 3, 4, etc) différent pour toutes les photos.

Pour information, vous pouvez créer jusqu’à 10 galeries (correspondant à un groupe différent) qui proposeront cette fonctionnalité FancyBox.

Une fois satisfait du résultat, vous n’avez plus qu’à publier votre site internet.

Voilà une fonctionnalité toute simple qui saura mettre en valeur les images sur votre site !

8 Comments

  1. ANTOINE Hervé

    Pourquoi, si j’importe une image en 530*2xx ne s’affiche t elle pas dans une autre taille que celle importée ?

    • Team WebAcappella

      Bonjour Antoine !
      Vous pouvez accéder aux dimensions d’affichage pour l’image avec l’effet FancyBox à partir du bouton « éditer les propriétés par défaut », en dessous de la case d’activation FancyBox. Vous aurez accès alors à un menu déroulant avec différentes dimensions pour la taille maximale à afficher.
      Les limites restent tout de même les dimensions de l’image d’origine. Si votre image d’origine fait 530×250 pixels elle ne pourra pas s’afficher en plus grand.
      Si vous souhaitez que votre image s’affiche en plus grand avec l’effet FancyBox, vous pouvez, par exemple, réduire les dimensions de l’image en affichage normal sur votre site, et laisser les dimensions d’origine (plus grande) pour la FancyBox. 😉

  2. romano97002

    J’adore cette effet et je l’utilise pour toutes mes images.

    Par contre j’ai une question :

    J’ai 10 groupes maximum pour créer différentes galeries. Si j’attain le 10ème groupe, est-ce-que j’aurais droit à 10 nouveau groupes et ainsi de suite ?

    Merci d’avance pour votre réponse et votre aide.

    Bonne journée.

    • Team WebAcappella

      Bonjour Romano,
      Il est possible de créer 10 groupes maximum pour les galeries Fancy Box.

  3. noobactu

    Merci c’est cool d’avoir pensé a sa se sot des détaille qui fait le charme du logiciel malgré encore tellement de chose a voir. Merci a vous.

  4. Guilet

    Ou trouvze t-on FancyBox?

    • Team WebAcappella

      Bonjour Guilet !
      Vous trouverez l’effet FancyBox dans le deuxième onglet de l’inspecteur des propriétés des images. 🙂

  5. Paul Chenevier

    C’est vraiment une fonctionnalité remarquable: bravo! Et toujours cette simplicité de programmation…quel bonheur!

Commentaires fermés