barra azul

cabecera reducida 1 sin fondo

BLOG - Joomla!

Hilo de Ariadna

Crear una Galería de imágenes con SEBLOD para Joomla - Segunda parte

Hacer Colorbox responsive en SEBLOD

El diseño web adaptativo o sensible (en Inglés RWD, Responsive Web Design) tiene como función adaptar la apariencia y diseño de la página al tamaño de pantalla del dispositivo utilizado para cargarla.

Si estás trabajando con SEBLOD es muy posible que hayas advertido que los modales con miniaturas de imagen no son adaptables, y que mantienen los tamaños que hemos definido.

Hay dos formas de solucionarlo, y de eso trataremos en este artículo.

 

Colorbox es un plugin de "caja de luz" para jQuery, personalizable y ligero que utiliza SEBLOD para mostrar las imágenes del campo "subir imagen".

En otras palabras, el modal en el que aparecen las imágenes cuando las mostramos de mayor tamaño en nuestra Galería de imágenes está hecho con Colorbox. El problema es que no es responsive directamente.
Si has probado a cambiar el tamaño de navegador, o utilizado una Tablet o móvil para visualizar las fotos de la Galería de imágenes que hemos construido, habrás comprobado que no se reajustan y se “salen” manteniendo el tamaño que definimos para ellas.
Hay dos soluciones documentadas y ambas consisten en agregar un código JavaScript, y se diferencian básicamente en dónde hacerlo.


Modificar el fichero “index.php” de nuestra plantilla.


En la sección “HEAD” se debe añadir el siguiente código:

Algunas plantillas permiten añadir código en la cabecera directamente sin editar el fichero, como las plantillas Gantry, facilitando la tarea.
Si editas el “index.php” recuerda que podrías perder los cambios si realizas una actualización de la plantilla.

 

Modificando el fichero "media/cck/scripts/jquery-colorbox/js/jquery.colorbox-min.js”



Este procedimiento me gusta más porque lo que modificamos es el JavaScript de la propia Colorbox, por lo que se cargará sólo cuando esta se use.


Debemos editar el fichero "media/cck/scripts/jquery-colorbox/js/jquery.colorbox-min.js” y agregarle el siguiente código, al final del todo y en una nueva columna:


El inconveniente es el mismo que en el caso anterior, si se actualiza Colorbox podría perderse el cambio.

 

Las dos opciones funcionan bien, aunque puede que la imagen no se readapte automáticamente si cambiamos el tamaño del navegador mientras estamos visualizando la imagen en la caja. Pero si cambiamos de imagen en la caja (a la siguiente o la anterior) comprobarás que se adapta al tamaño perfectamente, igual que si cargas cualquier nueva imagen tras redimensionar el tamaño.
Colorbox tiene una función nueva, salida tras estas soluciones, que es “Reload”. Puedes cambiar “load” por “reload”, pero es posible resultados diferentes en diferentes navegadores.
Ese problema tampoco lo es realmente. Hay que pensar que no es normal redimensionar el navegador mientras se visita un sitio, lo que sí es normal es que distintos usuarios utilicen dispositivos con diferente tamaño de pantalla, y en tabletas y móviles que se cambie la orientación. En estas circunstancias prácticamente no se notará y funcionará correctamente.

 

Si tu diseño es RWD no dudes en aplicar estas modificaciones para tu App.

 

 

 

Si te ha gustado puedes comentarlo a continuación, y si tienes dudas o quieres realizar alguna consulta siéntete libre de hacerlo en el foro.

  Mi perfil de Google Plus

 

Escribir un comentario

Sé respetuoso con tod@s. Tenemos derecho a expresar nuestras opiniones y los demás pueden opinar igual o de forma contraria, siempre con el respeto que nos gusta que nos dispensen.
Tu comentario debe estar relaccionado con el tema. Si deseas comentar algo distinto puedes ponerte en contacto con nosotros a través de la opción de "Contactar" del menú principal. Muchas gracias.

Puedes conectarte utilizado tu cuenta en:

       


Si te gusta, puedes compartirlo en:

Compartir en FacebookCompartir en Google PlusCompartir en TwitterCompartir en LinkedIn