Media Gallery

Comment ça marche.

Étape 1 sur 6 **Un repère dans la visite** Un repère en forme d’appareil photo dans la scène du musée signale qu’il y a plus à voir.

Un clic ouvre la galerie — Étape 1 sur 6 **Un repère dans la visite** Un repère en forme d’appareil photo dans la scène du musée signale qu’il y a plus à voir.

Les hotspots qui ouvrent une photo dans un nouvel onglet font sortir les visiteurs de la visite. Media Gallery ouvre photos, vidéos MP4 et vidéos YouTube ou Vimeo dans une lightbox au-dessus du panorama : les visiteurs zooment dans les détails, balaient l’écran sur téléphone et retrouvent la même vue en fermant la galerie. Les sons, les vidéos et la rotation automatique de la visite sont mis en pause tant que la galerie est ouverte, et chaque réglage est un attribut d’un seul élément XML.

Installation.

1
Copiez un dossier

Placez le dossier chiffré du plugin dans votre visite et ajoutez un élément plugin à votre XML.
2
Décrivez vos galeries

Indiquez photos, vidéos, légendes et traductions dans un fichier JSON ou dans des éléments <data> de votre XML.
3
Ouvrez depuis n’importe quel hotspot

Appelez plugin[z360_media_gallery].open() depuis un hotspot ou votre propre bouton de skin ; choisissez apparence et comportement avec des attributs et six variables CSS.

Ce qui fait la différence.

Les visiteurs restent dans la visite

La galerie s’ouvre au-dessus du panorama et se referme sur la même vue ; sons, vidéos et rotation automatique de la visite se mettent en pause puis reprennent.

Des détails lisibles

Zoom jusqu’à 4× avec la molette, un double-clic, le clavier ou deux doigts ; un fichier haute résolution ne se charge que lorsque le visiteur zoome.

YouTube et Vimeo seulement après un clic

YouTube et Vimeo ne se chargent qu’après le clic du visiteur, puis en mode de confidentialité renforcée de YouTube et avec le paramètre do-not-track de Vimeo. C’est un verrou technique, pas une conformité juridique : vos obligations d’exploitant du site restent les vôtres.

Captures d'écran.

Essayer la démo

**Ordinateur** La lightbox au-dessus de la visite du musée : le plan de Rome de 1748 avec sa légende et la bande de vignettes.

**Smartphone** L’affichage plein écran sur un téléphone.

**Détail** Zoom dans le plan de Rome : le détail provient du fichier haute résolution.

Paramètres.

À définir comme attributs dans le XML de votre visite.

Paramètre	Type	Par défaut	Description
`active`	Oui / Non	`true`	Active ou désactive la galerie pendant la visite ; désactivée, elle se ferme et refuse toute ouverture (par défaut true).
`source`	Texte	—	URL d’un fichier JSON de galeries, relative au premier fichier XML de la visite ; vide (par défaut), seules les galeries <data> sont utilisées.
`deeplink`	Liste	`read`	Liens de galerie dans l’adresse de la page : off, read (par défaut : ouvre au démarrage une photo liée) ou readwrite (garde aussi l’élément affiché dans l’adresse). `offreadreadwrite`
`close_on_scene_change`	Oui / Non	`true`	Ferme la galerie lors d’un changement de scène (par défaut true).
`loop`	Oui / Non	`false`	Après le dernier élément, le premier suit (par défaut false).
`thumbnails`	Oui / Non	`true`	Affiche la bande de vignettes (par défaut true) ; elle reste masquée pour un seul élément et dans les viewers de moins de 500 px de haut.
`zoom`	Oui / Non	`true`	Zoom et déplacement des photos jusqu’à 4× (par défaut true).
`fullscreen`	Liste	`maximize`	Bouton plein écran : maximize (par défaut, média bord à bord dans le viewer), browser (plein écran du navigateur) ou off. `maximizebrowseroff`
`pause_tour`	Oui / Non	`true`	Met en pause sons, vidéos et rotation automatique de la visite tant que la galerie est ouverte, puis reprend ce qu’elle a mis en pause (par défaut true).
`theme`	Liste	`dark`	Thème de couleurs sombre (par défaut) ou clair. `darklight`
`accent_color`	Couleur	`#3D8BFF`	Couleur de l’anneau de focus, de la vignette active et du bouton de consentement vidéo (par défaut #3D8BFF).
`vr`	Oui / Non	`true`	Affiche la galerie comme panneau en VR (par défaut true) ; false refuse l’ouverture de la galerie en VR.
`vr_videoplayer`	Texte	`%VIEWER%/plugins/videoplayer.js`	Chemin du fichier officiel videoplayer.js de krpano utilisé pour les éléments MP4 en VR (par défaut %VIEWER%/plugins/videoplayer.js).
`debug`	Oui / Non	`false`	Affiche dans la console du navigateur le nombre de galeries et d’éléments ainsi que les textes alternatifs manquants (par défaut false).
`text_gallery`	Texte	`Gallery`	Nom de la fenêtre de galerie pour les lecteurs d’écran quand la galerie n’a pas de titre (par défaut « Gallery ») ; une clé <languages> ou un texte littéral.
`text_close`	Texte	`Close`	Libellé du bouton fermer (par défaut « Close »).
`text_prev`	Texte	`Previous`	Libellé du bouton précédent (par défaut « Previous »).
`text_next`	Texte	`Next`	Libellé du bouton suivant (par défaut « Next »).
`text_fullscreen`	Texte	`Full screen`	Libellé du bouton plein écran (par défaut « Full screen »).
`text_counter`	Texte	`%1 / %2`	Compteur d’éléments ; %1 est la position, %2 le nombre d’éléments (par défaut « %1 / %2 »).
`text_more`	Texte	`More`	Bouton qui déplie une légende longue sur téléphone (par défaut « More »).
`text_consent`	Texte	`This video is loaded from %1, which may store data in your browser.`	Avis affiché avant le chargement d’une vidéo YouTube ou Vimeo ; %1 est le nom du service (par défaut « This video is loaded from %1, which may store data in your browser. »).
`text_consent_button`	Texte	`Play video`	Bouton qui charge et lance une vidéo YouTube ou Vimeo (par défaut « Play video »).
`text_load_error`	Texte	`This item could not be loaded.`	Affiché quand une photo ou une vidéo ne peut pas être chargée (par défaut « This item could not be loaded. »).
`text_vr_unavailable`	Texte	`This video is available outside VR.`	Affiché en VR à la place des vidéos YouTube et Vimeo (par défaut « This video is available outside VR. »).

Exemple

<plugin name="z360_media_gallery"
        url="plugins/z360_media_gallery/z360_media_gallery.js"
        keep="true"
        source="media/galleries.json"
        theme="dark"
        accent_color="#3D8BFF" />

<scene name="scene_hall" ...>
  <hotspot name="hs_photos" type="text" html="Photos" ath="30" atv="0"
           onclick="plugin[z360_media_gallery].open(rome_1748);" />
</scene>

Fonctionnalités

Photos, vidéos MP4, vidéos YouTube et Vimeo dans une seule galerie
Lightbox sur grand écran, affichage plein écran sur téléphone
Zoom et déplacement jusqu’à 4× avec molette, double-clic ou double tap, deux doigts et clavier ; fichier haute résolution optionnel chargé au zoom
Balayage vers l’élément suivant, balayage vers le bas pour fermer sur écran tactile
Bande de vignettes, légendes avec gras, italique et liens, mentions de crédit
Met en pause sons, vidéos et rotation automatique de la visite et ne reprend que ce qu’elle a mis en pause
YouTube et Vimeo ne se chargent qu’après le clic du visiteur (confidentialité renforcée / do-not-track)
Galeries depuis un fichier JSON ou des éléments <data>, textes en plusieurs langues
Liens qui ouvrent une galerie sur une photo précise : ?z360-media-gallery=galerie/element
Panneau VR pour les images avec le plugin WebVR de krpano
Vidéos MP4 dans le panneau VR via le lecteur vidéo officiel de krpano
Commande au clavier, focus maintenu dans la galerie et annonces pour lecteurs d’écran
Actions, attributs d’état en lecture seule et événements pour votre XML
Fichier du plugin chiffré, chaque réglage en attribut XML

Contenu

plugins/z360_media_gallery/z360_media_gallery.js (chiffré)
Manuel (anglais)

Autres produits pour krpano.

Plugin Nouveau

Detail Loupe

Une loupe pour les photos des visites krpano – à la souris, au stylet et au toucher.

29 €

Plugin Nouveau

Info Cards

Des fiches d'information pour votre visite krpano : panneau latéral sur ordinateur, feuille en bas d'écran sur mobile et fiche d'accueil, avec photos, vidéo, informations clés et boutons.

39 €