Detail Loupe

How it works.

Step 1 of 6 **A photo full of small details** A map, plan or document in your tour has details too small to read in the popup.

Point at a detail — Step 1 of 6 **A photo full of small details** A map, plan or document in your tour has details too small to read in the popup.

Visitors want to see the small details of the photos you show in popups, but krpano has no magnifier for image layers. Detail Loupe adds a lens that follows the mouse on desktop and the finger on phones and tablets, with pinch to zoom and an optional high-resolution source. Every setting is an attribute of the plugin element in your own tour XML – the plugin file stays untouched.

Installation.

1
Copy the file

Copy detailloupe.js into the plugins folder of your tour.
2
Add the plugin element

Add one <plugin> element to your tour XML and set target to the name of the image layer.
3
Fine-tune

Set attributes such as zoom, size, shape or hires, or change them while the tour runs with set() and tween().

Why it makes a difference.

Made for touch

The lens appears above the finger, so the finger does not cover it, and two fingers change the zoom while the panorama stays still.

Everything in your XML

Every option is an attribute of the plugin element. The events onshow, onhide and onzoomchange let your tour react with its own actions.

Sharp details

Point the lens to a high-resolution copy of the photo and show details the popup cannot show.

Screenshots.

Try the demo

**Phone** The lens above the finger on a phone.

**Detail** Rounded lens with an orange border.

Settings.

Set as attributes in your tour XML.

Setting	Type	Default	Description
`target`	Text	—	Name of the image layer the lens magnifies, e.g. showcase_photo.
`zoom`	Number	`2.5`	Magnification relative to the displayed photo, e.g. 2.5. Always contains the current zoom.
`min_zoom`	Number	`1.5`	Smallest zoom that pinch, wheel, keys and set() can reach.
`max_zoom`	Number	`8`	Largest zoom that pinch, wheel, keys and set() can reach.
`size`	Number	`180`	Width and height of the lens in pixels, including the border.
`shape`	List	`circle`	Shape of the lens: circle, rounded or square. `circleroundedsquare`
`border`	Number	`3`	Border width in pixels; 0 removes the border.
`border_color`	Color	`0xFFFFFF`	Border color, e.g. 0xFF9F0A.
`shadow`	Yes / No	`true`	Drop shadow under the lens.
`background`	Color	`0x000000`	Color shown in the lens beyond the edges of the photo, or transparent.
`touch_offset`	Text	`auto`	Distance in pixels between the finger and the lens centre; auto places the lens just above the finger.
`trigger`	List	`hover`	Mouse and pen: show the lens on hover or only while the button is pressed. `hoverpress`
`lens_cursor`	List	`crosshair`	Mouse pointer over the photo; keep leaves the cursor of the layer. `crosshairzoom-innonekeep`
`pinch`	Yes / No	`true`	Two fingers change the zoom.
`wheel`	Yes / No	`true`	The mouse wheel changes the zoom while the lens is shown, instead of zooming the panorama.
`keyboard`	Yes / No	`true`	The photo can get keyboard focus; arrow keys move the lens, + and - zoom.
`animation`	Yes / No	`true`	Short fade when the lens appears; always off when the visitor prefers reduced motion.
`hires`	Text	—	Suffix of a high-resolution copy, e.g. _hd loads showcase_hd.jpg for showcase.jpg.
`hires_url`	Text	—	Path of a high-resolution copy with a different name; has priority over hires.
`lens_enabled`	Yes / No	`true`	false switches the lens off and leaves the photo as without the plugin (except for the cursor); true switches it on again.
`lens_visible`	Yes / No	`false`	Read-only: true while the lens is shown.
`onshow`	Text	—	Actions called when the lens appears.
`onhide`	Text	—	Actions called when the lens disappears.
`onzoomchange`	Text	—	Actions called when the zoom changes; get(zoom) returns the new zoom.

Example

<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));" />

Features

One lens for mouse, pen and touch (Pointer Events)
Lens above the finger, beside it at the screen edge
Pinch, mouse wheel and keyboard change the zoom; the panorama does not move
Optional high-resolution source (file suffix or explicit URL)
Circle, rounded or square lens; size, border, shadow and colors
Several photos, each with its own settings; changing image URLs, popups that open and close, crop
Every setting changeable at runtime with set() and tween()
Events onshow, onhide and onzoomchange for your own actions
Keyboard access and reduced-motion support
One file for krpano 1.23.2–1.24, registered and unregistered viewers
Limits: image layers only (no hotspots, VR or rotated layers); Protect Tool -pplg viewers are not supported