Detail Loupe

Cómo funciona.

Paso 1 de 6 **Una foto llena de pequeños detalles** Un mapa, un plano o un documento de tu tour tiene detalles demasiado pequeños para leerlos en la ventana emergente.

Apunta a un detalle — Paso 1 de 6 **Una foto llena de pequeños detalles** Un mapa, un plano o un documento de tu tour tiene detalles demasiado pequeños para leerlos en la ventana emergente.

Tus visitantes quieren ver los pequeños detalles de las fotos que muestras en ventanas emergentes, pero krpano no tiene lupa para las capas de imagen. Detail Loupe añade una lente que sigue al ratón en el ordenador y al dedo en móviles y tabletas, con zoom de pellizco y una imagen de alta resolución opcional. Cada ajuste es un atributo del elemento plugin en el XML de tu tour; el archivo del plugin no se toca.

Instalación.

1
Copia el archivo

Copia detailloupe.js en la carpeta plugins de tu tour.
2
Añade el elemento plugin

Añade un elemento <plugin> al XML de tu tour y pon en target el nombre de la capa de imagen.
3
Ajusta los detalles

Define atributos como zoom, size, shape o hires, o cámbialos durante el tour con set() y tween().

Por qué marca la diferencia.

Hecho para el tacto

La lente aparece encima del dedo, para que el dedo no la tape, y con dos dedos cambias el zoom sin mover el panorama.

Todo en tu XML

Cada opción es un atributo del elemento plugin. Con los eventos onshow, onhide y onzoomchange tu tour reacciona con sus propias acciones.

Detalles nítidos

Asocia la lente a una copia de alta resolución de la foto y muestra detalles que la ventana emergente no puede mostrar.

Capturas de pantalla.

Prueba la demo

**Ordenador** La lente amplía un mapa en una ventana emergente en el ordenador.

**Móvil** La lente encima del dedo en un móvil.

**Detalle** Lente redondeada con borde naranja.

Ajustes.

Se configuran como atributos en el XML de tu tour.

Ajuste	Tipo	Predeterminado	Descripción
`target`	Texto	—	Nombre de la capa de imagen que amplía la lente, p. ej. showcase_photo.
`zoom`	Número	`2.5`	Aumento respecto a la foto mostrada, p. ej. 2.5. Siempre contiene el zoom actual.
`min_zoom`	Número	`1.5`	Zoom mínimo que alcanzan el pellizco, la rueda, las teclas y set().
`max_zoom`	Número	`8`	Zoom máximo que alcanzan el pellizco, la rueda, las teclas y set().
`size`	Número	`180`	Ancho y alto de la lente en píxeles, borde incluido.
`shape`	Lista	`circle`	Forma de la lente: circle (redonda), rounded (redondeada) o square (cuadrada). `circleroundedsquare`
`border`	Número	`3`	Grosor del borde en píxeles; 0 quita el borde.
`border_color`	Color	`0xFFFFFF`	Color del borde, p. ej. 0xFF9F0A.
`shadow`	Sí / No	`true`	Sombra bajo la lente.
`background`	Color	`0x000000`	Color que se ve en la lente más allá de los bordes de la foto, o transparent.
`touch_offset`	Texto	`auto`	Distancia en píxeles entre el dedo y el centro de la lente; auto la coloca justo encima del dedo.
`trigger`	Lista	`hover`	Ratón y lápiz: mostrar la lente al pasar por encima o solo con el botón pulsado. `hoverpress`
`lens_cursor`	Lista	`crosshair`	Puntero del ratón sobre la foto; keep mantiene el puntero de la capa. `crosshairzoom-innonekeep`
`pinch`	Sí / No	`true`	Con dos dedos cambias el zoom.
`wheel`	Sí / No	`true`	La rueda del ratón cambia el zoom de la lente visible en lugar de hacer zoom en el panorama.
`keyboard`	Sí / No	`true`	La foto puede recibir el foco del teclado; las flechas mueven la lente y + y - cambian el zoom.
`animation`	Sí / No	`true`	Breve fundido al aparecer la lente; siempre desactivado si el visitante prefiere reducir el movimiento.
`hires`	Texto	—	Sufijo de una copia en alta resolución, p. ej. _hd carga showcase_hd.jpg para showcase.jpg.
`hires_url`	Texto	—	Ruta de una copia en alta resolución con otro nombre; tiene prioridad sobre hires.
`lens_enabled`	Sí / No	`true`	false desactiva la lente y la foto se comporta como sin el plugin (salvo el puntero); true la vuelve a activar.
`lens_visible`	Sí / No	`false`	Solo lectura: true mientras se ve la lente.
`onshow`	Texto	—	Acciones que se ejecutan cuando aparece la lente.
`onhide`	Texto	—	Acciones que se ejecutan cuando desaparece la lente.
`onzoomchange`	Texto	—	Acciones que se ejecutan cuando cambia el zoom; get(zoom) devuelve el nuevo zoom.

Ejemplo

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

Características

Una sola lente para ratón, lápiz y pantalla táctil (Pointer Events)
Lente encima del dedo y a su lado en el borde de la pantalla
Zoom con pellizco, rueda del ratón y teclado; el panorama no se mueve
Imagen de origen en alta resolución opcional (sufijo de archivo o URL)
Lente redonda, redondeada o cuadrada; tamaño, borde, sombra y colores
Varias fotos, cada una con sus ajustes; URL de imagen que cambian, ventanas emergentes que se abren y se cierran, crop
Todos los ajustes se pueden cambiar durante el tour con set() y tween()
Eventos onshow, onhide y onzoomchange para tus propias acciones
Acceso por teclado y soporte de movimiento reducido
Un solo archivo para krpano 1.23.2–1.24, visores registrados y no registrados
Límites: solo capas de imagen (sin hotspots, VR ni capas giradas); no se admiten visores creados con la opción -pplg de Protect Tool

Qué incluye

plugins/detailloupe.js – el plugin para krpano 1.23.2–1.24
Tour de demostración con un panorama y dos fotos (añade tu propio visor de krpano)
Manual (inglés)