Detail Loupe

Comment ça marche.

Étape 1 sur 6 **Une photo pleine de petits détails** Une carte, un plan ou un document de votre visite contient des détails trop petits pour être lus dans le popup.

Pointez un détail — Étape 1 sur 6 **Une photo pleine de petits détails** Une carte, un plan ou un document de votre visite contient des détails trop petits pour être lus dans le popup.

Vos visiteurs veulent voir les petits détails des photos affichées dans vos popups, mais krpano n'a pas de loupe pour les calques d'image. Detail Loupe ajoute une lentille qui suit la souris sur ordinateur et le doigt sur smartphone et tablette, avec zoom par pincement et image source haute résolution en option. Chaque réglage est un attribut de l'élément plugin dans le XML de votre visite ; le fichier du plugin reste inchangé.

Installation.

1
Copiez le fichier

Copiez detailloupe.js dans le dossier plugins de votre visite.
2
Ajoutez l'élément plugin

Ajoutez un élément <plugin> au XML de votre visite et indiquez dans target le nom du calque d'image.
3
Affinez

Définissez des attributs comme zoom, size, shape ou hires, ou modifiez-les pendant la visite avec set() et tween().

Ce qui fait la différence.

Pensé pour le tactile

La lentille apparaît au-dessus du doigt, pour que le doigt ne la cache pas, et deux doigts changent le zoom sans bouger le panorama.

Tout dans votre XML

Chaque option est un attribut de l'élément plugin. Les événements onshow, onhide et onzoomchange permettent à votre visite de réagir avec ses propres actions.

Des détails nets

Associez la lentille à une copie haute résolution de la photo et montrez des détails que le popup ne peut pas afficher.

Captures d'écran.

Essayer la démo

**Smartphone** La lentille au-dessus du doigt sur un smartphone.

**Détail** Lentille arrondie à bordure orange.

Paramètres.

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

Paramètre	Type	Par défaut	Description
`target`	Texte	—	Nom du calque d'image que la lentille grossit, par ex. showcase_photo.
`zoom`	Nombre	`2.5`	Grossissement par rapport à la photo affichée, par ex. 2.5. Contient toujours le zoom actuel.
`min_zoom`	Nombre	`1.5`	Zoom minimal atteint par pincement, molette, touches et set().
`max_zoom`	Nombre	`8`	Zoom maximal atteint par pincement, molette, touches et set().
`size`	Nombre	`180`	Largeur et hauteur de la lentille en pixels, bordure comprise.
`shape`	Liste	`circle`	Forme de la lentille : circle (ronde), rounded (arrondie) ou square (carrée). `circleroundedsquare`
`border`	Nombre	`3`	Épaisseur de la bordure en pixels ; 0 supprime la bordure.
`border_color`	Couleur	`0xFFFFFF`	Couleur de la bordure, par ex. 0xFF9F0A.
`shadow`	Oui / Non	`true`	Ombre sous la lentille.
`background`	Couleur	`0x000000`	Couleur affichée dans la lentille au-delà des bords de la photo, ou transparent.
`touch_offset`	Texte	`auto`	Distance en pixels entre le doigt et le centre de la lentille ; auto place la lentille juste au-dessus du doigt.
`trigger`	Liste	`hover`	Souris et stylet : afficher la lentille au survol ou seulement bouton enfoncé. `hoverpress`
`lens_cursor`	Liste	`crosshair`	Pointeur de la souris sur la photo ; keep conserve le pointeur du calque. `crosshairzoom-innonekeep`
`pinch`	Oui / Non	`true`	Deux doigts changent le zoom.
`wheel`	Oui / Non	`true`	La molette change le zoom de la lentille visible au lieu de zoomer le panorama.
`keyboard`	Oui / Non	`true`	La photo peut recevoir le focus clavier ; les flèches déplacent la lentille, + et - zooment.
`animation`	Oui / Non	`true`	Court fondu à l'apparition de la lentille ; toujours désactivé si le visiteur préfère réduire les animations.
`hires`	Texte	—	Suffixe d'une copie haute résolution, par ex. _hd charge showcase_hd.jpg pour showcase.jpg.
`hires_url`	Texte	—	Chemin d'une copie haute résolution portant un autre nom ; prioritaire sur hires.
`lens_enabled`	Oui / Non	`true`	false désactive la lentille et la photo se comporte comme sans le plugin (sauf le pointeur) ; true la réactive.
`lens_visible`	Oui / Non	`false`	Lecture seule : true tant que la lentille est visible.
`onshow`	Texte	—	Actions appelées quand la lentille apparaît.
`onhide`	Texte	—	Actions appelées quand la lentille disparaît.
`onzoomchange`	Texte	—	Actions appelées à chaque changement de zoom ; get(zoom) renvoie le nouveau zoom.

Exemple

<plugin name="loupe_showcase"
        url="%CURRENTXML%/plugins/detailloupe.js"
        keep="true"
        target="showcase_photo"
        zoom="3" size="220" shape="rounded"
        hires="_hd"
        onzoomchange="trace('zoom=', get(zoom));" />

Fonctionnalités

Une seule lentille pour souris, stylet et toucher (Pointer Events)
Lentille au-dessus du doigt, à côté au bord de l'écran
Zoom par pincement, molette et clavier – le panorama ne bouge pas
Image source haute résolution en option (suffixe de fichier ou URL)
Lentille ronde, arrondie ou carrée ; taille, bordure, ombre et couleurs
Plusieurs photos avec leurs propres réglages ; URL d'image qui changent, popups qui s'ouvrent et se ferment, crop
Chaque réglage modifiable pendant la visite avec set() et tween()
Événements onshow, onhide et onzoomchange pour vos propres actions
Accès au clavier et prise en charge du mouvement réduit
Un seul fichier pour krpano 1.23.2–1.24, viewers enregistrés ou non
Limites : calques d'image uniquement (pas de hotspots, de VR ni de calques pivotés) ; les viewers créés avec l'option -pplg du Protect Tool ne sont pas pris en charge

Contenu

plugins/detailloupe.js – le plugin pour krpano 1.23.2–1.24
Visite de démonstration avec un panorama et deux photos (ajoutez votre propre viewer krpano)
Manuel (anglais)

Autres produits pour krpano.

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 €