06/02/2021
Código para hacer zoom en imágenes con jQuery
Sencillo código jQuery para emular el zoom sobre las imágenes que se presentan en un documento o página HTML.En este artículo te presento un código en JavaScript / jQuery que permite resaltar y presentar las imágenes de un documento HTML tras la interacción del usuario mediante el evento click.
Para comprender el código de la función es necesario conocer lo siguiente:
- Se requieren conocimientos básicos de JavaScript y jQuery.
- El código implementado fue probado con el uso de la versión más reciente de jQuery (jQuery Core - 3.5.x Versions).
- Se establece "use strict".
Primero que nada debemos solicitar la versión más reciente de la biblioteca jQuery.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
El archivo que contiene la función JavaScript puede ser llamado desde el encabezado («HEAD») del documento HTML.
<script src="/demos/scripts/js/__zoomimages__.js"></script>
El script de jQuery consiste en una función que requiere de un único parámetro de tipo JSON, el cual debe estar definido de la siguiente manera:
/* Objeto JSON */
{ cfg :
{ obj : ".zoomimage",
maxWidthDevice : 728,
delay : 1000
}
}
{ cfg :
{ obj : ".zoomimage",
maxWidthDevice : 728,
delay : 1000
}
}
Explicación rápida del JSON:
- «obj» - hace referencia a nuestro objeto marcado con la clase «zoomimage»
- «maxWidthDevice» - hace referencia al ancho máximo del dispositivo
- «delay» - hace referencia al tiempo que transcurrirá antes de completar la animación del nuevo contenedor de la imagen
Las imágenes que se encuentren en el cuerpo del documento HTML deben llevar la clase que fue previamente definida en el JSON, así como te muestro a continuación:
<img class="zoomimage" style="object-fit:cover;" src="/demos/images/image_library_min.jpeg" width="300px" height="300px" alt="Imagen de una biblioteca" title="Imagen de una biblioteca"/>
<img class="zoomimage" style="object-fit:cover;" src="/demos/images/image_labor_exchange.jpeg" width="300px" height="300px" alt="Imagen de una oficina" title="Imagen de una oficina"/>
<img class="zoomimage" style="object-fit:cover;" src="/demos/images/image_hill_min.jpeg" width="300px" height="300px" alt="Imagen de un paisaje" title="Imagen de un paisaje"/>
<img class="zoomimage" style="object-fit:cover;" src="/demos/images/image_labor_exchange.jpeg" width="300px" height="300px" alt="Imagen de una oficina" title="Imagen de una oficina"/>
<img class="zoomimage" style="object-fit:cover;" src="/demos/images/image_hill_min.jpeg" width="300px" height="300px" alt="Imagen de un paisaje" title="Imagen de un paisaje"/>
Para invocar la función «__zoomimages__» desde el cuerpo («BODY») del documento HTML:
<script>$(function(){__zoomimages__({cfg:{obj:".zoomimage",maxWidthDevice:728,delay:1000}});});</script>
Puede accesar al código fuente del archivo JavaScript que he creado con el nombre de: __zoomimages__.js.
Puede visualizar la demostración del código jQuery en un documento HTML para hacer zoom en las imágenes tras la llamada al evento de onClick de JavaScript.
Nota: las extensiones de las imágenes deben ser jpg o jpeg, y puede colocar al final del nombre de cada imagen un «_min», «_med» o «_large» (sin las comillas); por ejemplo para la versión que se muestra en el documento HTML antes de la interacción del usuario use algo como esto: «image_library_min.jpeg» o «image_library.jpeg». Si entre sus archivos tiene dos versiones de una misma imagen (baja y alta resolución) entonces una de ellas debe llevar el nombre sin «_min», «_med» o «_large».
Consulta Lo+ Top de Lenguajes De Programación