dic
12
2009

Rederizar Imagenes – slideshow – con Jquery Ui Plugin

An article by miguelortega

Este plugin cambiará de tamaño y escala de las imágenes destinadas a su anchura máxima de acuerdo a la proporción de la imagen, el tamaño del navegador y algunas opciones simples.

Ver Ejemplo

	<script src="scripts/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
	<script src="scripts/jquery.maximage.js" type="text/javascript" charset="utf-8"></script> 
	<script> 
		$(document).ready(function(){
			$('img.maximage').maxImage({
				isBackground: true, 
			  	verticalAlign: 'top',
				overflow: 'auto',
				// verticalOffset: 91,
				// horizontalOffset: 520,
				resizeMsg: {show: true, location: 'after', message: 'Note: The original size is [h]h [w]w'}
			});
 
			$('img.bgmaximage').maxImage({
		  	isBackground: true,
		  	verticalAlign: 'top',
				overflow: 'auto'
		 	});
 
			$('img.widthmaximage').maxImage({
				verticalOffset: 91,
				horizontalOffset: 520,
				maxFollows: 'width'
			});
 
			$('img.maxAtOrigImageSize').maxImage({
				verticalOffset: 91,
				horizontalOffset: 520,
				maxAtOrigImageSize: true
			});
 
			$('img.slidemaximage').maxImage({
				isBackground: true,
				slideShow: true,
				position: 'absolute',
				verticalAlign: 'bottom',
				slideShowTitle: true,
				maxFollows: 'height',
				resizeMsg: {show: false},
				overflow: 'auto'
			});
		});
	</script> 
</head> 
<body id="index" onload="" class="bg">	<img src="images/bg_tester.jpg" width="1000" height="750" alt="Bg Tester" class="bgmaximage" />