Créer une diaporama web avec XN View

Créer une page web HTML pour afficher ses photos 

XNView n'est pas qu'une simple visionneuse (et catalogueuse) mais permet également de faire des modifications élémentaires sur des images et des publications comme créer une page web de photos

Télécharger XN View portable en version .zip  + tutoriel PDF
Tutoriel pdf créer une page web



XnView permet de créer une page web html  à partir d'un ensemble d'images. Le principe est de créer une page comportant les images en miniatures (petit format). Chacune de celles-ci permet d'afficher l'image d'origine dans sa taille réelle. Dans la partie gauche, sélectionnez le dossier contenant vos images



Tutoriel

  • Sélectionner le dossier à gauche puis cliquer sur les images à placer dans la page web  en maintenant la touche Ctrl du clavier enfoncée afin de les sélectionner.
     (Pour sélectionner l'ensemble des images d'un dossier, appuyer sur Ctrl+ A).

    Ci-dessous les photos sont sélectionnées (fond bleu)
  • Menu Outils  > Page Web
                                                                        ou cliquer sur   l'icône  HTML 
     


  •  S'affiche cette fenêtre à configurer:
  • Modèle: XN view propose des modèles d'affichage très classiques et assez proches.
    Choix du modèle parmi :


  • Divers
    • EnTête  /Titre :  nommer la page Web en donnant  un titre lisible et clair. Il apparaîtra en haut de la page Web. L'affichage variera selon le modèle sélectionné
    • Nombre de colonnes:  permet de définir le tableau qui contiendra les miniatures en indiquant le  nombre de colonnes  affichées pour les miniatures
    • "Trier" permet d'indiquer le type de tri utilisé pour l'affichage des vignettes.
  • Miniature
    • Largeur & Hauteur préciser la taille maxi des miniatures
    • Format  :permet d'indiquer le format dans lequel vous souhaitez que les vignettes / miniatures soient enregistrées : GIF ou JPEG.  
    •  Qualité de compression
  • "Informations" affichées permet d'indiquer les informations que vous voulez faire afficher sous chaque vignette.
  • Image : laisser la configuration par défaut en principe
    • décoché: Pas de page html par image
    • coché : toujours convertir en jpeg
    •  mais ajuster sa taille maximale ex : 1024 pixels  (ce sera  la taille de l'image affichée sur l'écran et qui sera enregistrée dans le sous dossier "original")
  • Destination
    • Dosssier : dossier destiné à recevoir fichiers et dossiers créés par XNView
    • Sous dossiers & Préfixes: laisser  les noms proposés par défaut
    • Cocher 
      • "Copier les images source"   permet de visualiser les images à la taille définie ci-dessus rubrique "image". Ces images sont copiées dans un dossier / répertoire Original'. 
      • "lancer le navigateur" une fois fini permet de lancer le navigateur afin de visualiser l'action de XnView.
  • CREER : Valider en cliquant le bouton Créer. Le processus s'exécute. 


Le navigateur se lance et affiche la page des vignettes / miniatures. Vous pouvez alors fermer XnView.


Que fait XnView lors de cette opération ? 

Il crée dans le dossier choisi
                                      ex: "xnview_diaporama"
  • un fichier "thumb.html : page de démarrage de l'affichage web des photos en vignettes (en cliquant sur la vignette, elle s'affiche en grand avec boutonsde navigation)
  • un fichier "default.css" :nom du modèle d'affichage (sélectionné précédemment
  • un dossier nommé Original contient les images originales (si vous avez laissé la case Copier les images sources dans le répertoire destination cochée et à la taille indiquée).
  •  un dossier / répertoire nommé Thumb contient les images miniatures.
=> Pour un transfert FTP sur un site web, il faudra tranférer ce dossier avec tout son contenu pour affficher vignettes, images et page web.

L'affichage web

Le titre de lapage

L'affichage des vignettes  (et  Titre/en Tête) varie selon le modèle
Modèle "blue"

Modèle simple de base


En cliquant sur une vignette, l' image s'affiche en grande taille avec des flèches de navigation pour créer un diaporama manuel