Escalar imagenes según el tamaño del navegador con Maximage

Mar29

Si lo que queremos es escalar imágenes según las dimensiones del navegador de nuestros usuarios una buena opción es utilizar el plugin de jquery Maximage desarrollado por Aaron Vanderzwan.

Maximage escala las imágenes deseadas a su máxima anchura acorde con el tamaño del navegador, el ratio de la imagen y otras opciones.

Podéis ver un ejemplo pinchando aquí. Redimensionar vuestro navegador y fijaros en como la imagen irá escalándose automáticamente.

Para empezar a utilizar este útil plugin tan sólo tendréis que descargarlo y hacer la llamada en el <head> de nuestro documento html. No os olvidéis de hacer antes la llamada a jquery

<script src="jquery.pack.js" type="text/javascript"></script>
<script src="jquery.maximage.js" type="text/javascript"></script>

A continuación insertar el siguiente script:

<script>
$(document).ready(function(){
 $('img.className').maxImage({
  isBackground: true
 });
});
</script>

Mediante la opción isBackground: true ajustamos la imagen al navegador. Por último insertaremos la clase utilizada en el script (en nuestro caso className) en la imagen que deseamos maximizar

<img class="className" src="foto.jpg" alt="descripción de la foto" />

Alguna de las opciones configurables del plugin son las siguientes:

	$(function(){
	    jQuery('.maxImage').maxImage({
	        maxFollows:('both'|'height'|'width'),
	        verticalOffset:(0),
	        horizontalOffset:(0),
	        leftSpace:(0),
	        topSpace:(0),
	        rightSpace:(0),
	        bottomSpace:(0),
	        overflow:('hidden'|'auto') // [NOTE: setting to auto makes maxImage less accurate... use at your own risk], 

	        position:('absolute'|'relative'),
	        isBackground:(false|true),
	        zIndex:(-10),
	        verticalAlign:('center'|top'|'bottom'),
	        horizontalAlign:('center'|'left'|'right'),
	        maxAtOrigImageSize:(false|true),
	        slideShow:(false|true),
	        slideDelay:(5),
	        slideShowTitle:(true|false),
	        loaderClass:('loader'),
	        resizeMsg({show:(true|false), location:(before|after), message:'Original [h]h [w]w'}),
	        onImageShow: function () { 
            alert('Background Image Loaded!')
	        }
	    });
});

Las que considero más útiles son:

verticalOffset: Padding inferior en referencia a la parte inferior del navegador
horizontalOffset: Padding lateral en referencia al lateral derecho del navegador
leftSpace: Espacio por la izquierda
topSpace: Espacio por arriba
rightSpace: Espacio por la derecha
bottomSpace: Espacio por abajo
slideShow: (false|true) Poner a true para crear un pase de fotos con efecto fade
slideDelay: Segundos transcurridos entre el pase de fotos

Puedes seguir cualquier respuesta a esta entrada mediante la fuente RSS 2.0.
Puedes dejar un comentario o enviar un trackback desde tu propio sitio.

jmocana.eu

Maquetador web

Escalar imagenes según el tamaño del navegador con Maximage

Comentarios