Miércoles, 11 Enero 2012 16:12

Zoom de Imágenes en artículos

Escrito por 
CMS:  Joomla! |  Versión:  1.5.x |  Nivel de dificultad:  Básico |  Tiempo estimado de lectura:  10 minutos


icozoomimagenEl cargar imágenes grandes en un sitio web puede ser un problema para el diseño, incluso para la carga; es por este motivo que se suelen usar miniaturas que nos brindan una idea de la imagen final.

En el siguiente artículo veremos una opción para la carga de imágenes grandes a través del zoom de la imagen miniatura mostrando el detalle de las partes deseadas de la imagen.

 

 

Instalando la extensión

Desde el centro de extensiones de Joomla al buscar una extensión de estas características encontramos los siguientes resultados, la mayoría de ellas son de tipo comercial y trabajan incluso con las imágenes de productos de virtuemart. En este tutorial veremos la extensión gratuita RD Cloud Zoom.

img1

 

Configurando la extensión

Debemos habilitar la extensión, la cual es un pluging, desde el backend de Joomla 1.5 => extensiones => gestor de pluging => filtramos por el término zoom.

Un parámetro importante a considerar es la carga de la librería jquery la cual podemos habilitar o deshabilitar, por defecto esta habilitada, pero si tenemos alguna otra extensión que hace uso de jquery deberiamos deshabilitar la carga ya que se cargaría dos veces.

img2

 

Utilizando el plugin

Debemos tener dos versiones de una imagen, una imagen grande y otra que se mostrará como miniatura, la imagen grande debe tener en el nombre un prefijo "big_" y debe encontrarse en la misma ruta que la imagen pequeña, luego simplemente insertamos la imagen en el artículo y colocamos una clase CSS la cual el pluging utilizará para hacer el zoom.

 

Resultado Final

Finalmente obtendremos el siguiente resultado

imgfinal

 

En el siguiente video se explica de manera práctica cada uno de los puntos explicados anteriormente.

 


¿Te ha resultado interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop