Lupa

La «Lupa» es una aplicación que te permite generar un lente zoom sobre una imagen.

Agregar webpart y configuración

1. Ve a la página donde deseas agregar el webpart «Lupa».

2. Si la página aún no está en modo de edición, haz clic en Editar en la parte superior derecha de la página.

3. Coloca el cursor sobre o debajo de un webpart y en el centro de la sección donde deseas agregar el webpart para ver una línea con un + dentro de un círculo, como este:

4. Haz clic en + y luego selecciona «Lupa» del selector de componentes de página para agregar tu webpart.

5. Observa cómo se renderiza el webpart en ese momento. En este punto, el usuario necesita configurarlo para ingresar datos y definir otros parámetros.

6. Haz clic en «configurar» para abrir el panel de configuración del contador.

7. Para configurar la webpart, el usuario tiene dos secciones: configuración de la imagen y configuración de lente.

Configuración de la imagen

Imagen visible (Poco detalle) – seleccione una imagen de baja resolución o poco detalle. Esta imagen es la principal y siempre será visible para los usuarios. Cuando los usuarios utilizan «Desde enlace», debe contener una de las siguientes extensiones: JPG, JPEG, PNG o BMP Ancho de la imagen 1 poco detalle (px): ancho en píxeles para imagen con poco detalle o baja calidad (calculado automáticamente) Alto de la imagen 1 poco detalle (px): altura en píxeles de la imagen con poco detalle o de baja calidad (calculada automáticamente)

Imagen usado en el lente de zoom (Amplio detalle) – seleccione una imagen de alta resolución, de gran detalle o ampliada. Esta imagen se muestra dentro de la lente del zoom (lupa) cuando el mouse está sobre la imagen 1. Cuando los usuarios usan «Desde enlace», debe contener una de las siguientes extensiones: JPG, JPEG, PNG o BMP. Ancho de la imagen 2 alto detalle (px): ancho en píxeles para imagen con alto detalle o alta calidad (calculado automáticamente) Alto de la imagen 2 alto detalle (px): altura en píxeles para imagen con alto detalle o alta calidad (calculada automáticamente)

Configuración del lente

Ancho del lente (px): ingrese un ancho en píxeles al marco de la lupa Alto del lente (px): ingrese una altura en píxeles al marco de la lupa Radio del lente (%): seleccione una proporción porcentual con respecto al marco de la lupa (50 para el marco circular, 25 para elipse y 1 para cuadrado) El desplazamiento del lente desde el cursor X (px): ingrese una posición de desplazamiento de la lente desde el cursor El desplazamiento del lente desde el cursor Y (px): ingrese una posición de desplazamiento de la lente desde el cursor Proporción zoom en móvil (%): seleccione un porcentaje de la lente de aumento en el dispositivo móvil Lente visible: seleccione una opción entre «Siempre» y «Solo en móvil»

 8. Guarda los cambios en la página con el webpart.

Imagen 2: lente zoom
(Amplio detalle)

Configuración mínima

Para probar esta add-in con la configuración mínima, debes seleccionar 2 imágenes obligatorias. La primera es la imagen principal y visible, y la segunda se muestra dentro de la lente de zoom (lupa):

1. Abre la sección (acordeón) “Imagen 1: Visible”.
2. Selecciona la imagen 1 haciendo clic en “se requiere una imagen, haz clic aquí”.

Si utilizas la opción «Desde un enlace», debes asegurarte de que la URL que copies contenga una de las siguientes extensiones: JPG, JPEG, PNG o BMP.

3. Abre la sección (acordeón) “Imagen 2: Lente de zoom”.
4. Selecciona la imagen 2 haciendo clic en “se requiere una imagen, haz clic aquí”.

Si utilizas la opción «Desde un enlace», debes asegurarte de que la URL que copies contenga una de las siguientes extensiones: JPG, JPEG, PNG o BMP.

5. Para cambiar cualquiera de las dos imágenes, debes ir a la sección “Imagen 1: Visible” o a la sección “Imagen 2: Lente de zoom” y hacer clic en “Haz clic aquí para cambiar la imagen” para seleccionar otra.

6. Haz clic en el botón “Aplicar”.