Astuce WebAcappella expert : Une galerie flash 3D pour vos photos

Aujourd’hui, la team WebAcappella vous invite à découvrir Tiltviewer, un plugin compatible avec WebAcappella qui vous permettra de créer une galerie photos 3D pour mettre en valeur vos images.

Le plugin Tiltviewer

Si vous souhaitez avoir une galerie de photos flash avec un effet 3D, alors ce plugin est parfait pour vous.

Vous pouvez télécharger et tester Tiltviewer grâce à la version gratuite disponible sur le site SimpleViewer (en anglais). Si vous êtes séduit, allez plus loin dans la configuration et les options de votre galerie avec la version « pro » proposée à 45 $. Vous pourrez définir des couleurs et des effets grâce à des modifications légères que vous apporterez dans le code HTML.

Pour vous aider, une page de support en anglais est à la disposition des utilisateurs.

A noter : comme c’est le cas pour toutes les technologies flash, votre galerie ne sera pas consultable depuis les appareils mobiles, smartphones et tablettes.

Installation du plugin par FTP (utilisateur expert)

Téléchargez dans un premier temps la version démo de Tiltviewer puis décompressez le fichier reçu.

Ouvrez votre client FTP (Filezilla, Cyberduck, etc) et accédez au dossier de votre site hébergé sur le serveur distant. Glissez maintenant le dossier « Tiltviewer » dans le répertoire racine de votre site et renommez-le en effectuant un clic-droit. Choisissez un nom simple car ce nom sera utilisé dans l’url d’accès à votre galerie.

Prenons un exemple : si vous nommez votre dossier « galerie » alors l’url pour accéder à la galerie 3D sera nomdedomaine.fr/galerie.

Une fois cette étape réalisée, supprimez les images contenues par défaut dans le dossier « imgs » et déposez-y vos propres photos. Pour un meilleur effet et une meilleure utilisation du plugin, vos photos doivent suivre les règles suivantes :

  • La largeur de votre photo doit être inférieure à 1000 pixels
  • Votre image doit être en RVB et de qualité 72 DPI
  • N’utilisez de préférence que des fichiers .JPEG ou .PNG sans fond transparent

Le paramétrage de la galerie

Depuis votre client FTP, faites un clic-droit sur le fichier « gallery.xml » pour le télécharger et enregistrez-le sur votre bureau. Ouvrez-le avec un éditeur de texte ou avec Dreamweaver. Vous allez maintenant devoir modifier le code et les options disponibles pour chaque photo :

  • Le lien de votre image : imgs/nomdevotreimage.jpg
  • Url de redirection de votre image : linkurl= « url »
  • Le titre : <title>Titre de votre image</title>
  • La description : <description>Texte de description de votre photo</description>

Vous trouverez dans le fichier gallery.xml original, des exemples de codes html pour activer ou désactiver certaines options comme par exemple enlever l’effet « flip » qui permet de retourner l’image par simple clic pour accéder aux informations de titre et description.

Enregistrez-le puis glissez-le dans le dossier contenant le plugin. Le nouveau fichier gallery.xml écrasera celui d’origine et vos modifications seront alors prises en compte.

Et dans WebAcappella…

Dès que vous avez fini de créer votre galerie, de mettre vos images et de modifier les liens dans le fichier xml, ouvrez WebAcappella.

Pour que vos visiteurs aient accès à votre galerie, vous devez absolument créer un lien vers l’url de la galerie qui sera par exemple votrenomdedomaine.fr/galerie.

Pour cela, ajoutez simplement un onglet dans votre menu dynamique, insérez un « bouton » ou alors mettez un lien hypertexte.

Testez puis une fois satisfait de l’apparence de votre galerie, publiez votre site. Votre galerie photos 3D est maintenant opérationnelle.

Pour plus d’informations sur ce plugin, nous vous invitons à visiter le site de l’éditeur où d’autres applications sont à découvrir.

3 Comments

  1. jpduburcq

    Afin de réduire la taille des images, j’utilise « BorderMaker » qui permet d’ajouter une (ou plusieurs bordures et du texte. Si on n’ajoute ni bordure, ni texte, on réduit simplement la taille des images avec une définition suffisante pour un site internet. Ce logiciel est gratuit.

  2. CAYLA

    Post intéressant. Mais sauf erreur de ma part l’intégration dans webacappella se fait par un lien direct qui ouvre la galerie en nouvelle page. En terme de navigation ce n’est pas ideale. De plus des logiciel de workflow photo comme par exemple Lightroom (La référence chez les photographe) permet de créer cette même galeries ou de très nombreux autre styles directement avec export FTP.

    Pour une meilleur intégration dans webacapella on peux creer un frame qui pointe vers cette page de galerie. Par contre pour eviter de sroller en horizontal et verticale, le frame doit etre au moins plus grand que la galerie en vignette ou que les photos individuel.

    L’idéal et la j’en appel au team de webacapella serai de povoir integrer un frame mais en conservant le lightbox EN PLEINE ECRAN et PAS SEULEMENT DANS LE FRAME

    Un exemple http://www.french-retouch.fr/test2/index.html

    Le Lightbox est limité au frame et n’assombrie pas l’ensemble du site.

    • Team WebAcappella

      Bonjour Cayla !
      Merci pour votre commentaire. En effet la galerie s’ouvre dans une nouvelle page.
      Nous prenons note de votre suggestion pour une idée de nouvel article ! 🙂

Commentaires fermés