Plugin jQuery: Auto redimensionar imágenes
09/07/2011
Proyectos
Muchas veces las imágenes insertadas en un sitio son más anchas que el contenedor de la página, lo que ocasiona que la imagen rompa el diseño de la página.
Para solucionar esto, he desarrollado un pequeño plugin para jQuery que redimensione todas las imágenes que le sean pasadas siempre y cuando estas sean mayores que el máximo permitido.
Ejemplos
Instalación
Lo primero que necesitamos hacer es agregar los archivos necesarios para el plugin:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="assets/js/jquery.resizeimages.min.js"></script>
Luego debemos agregar el estilo que queremos que el plugin utilize. En la demo, el estilo que utilicé es el siguiente:
.resizedImageContainer {
margin: 10px 0;
}
.resizedImageContainer div {
cursor: pointer;
background: #fffbcd;
padding: 10px;
border: 1px solid #c6cd00;
box-sizing: border-box;
margin-bottom: 1px;
font-size: .7em;
}
Y lo último que debemos hacer es llamar al plugin:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('img').resizeImages();
});
</script>
Configuración
El plugin acepta 3 opciones, aunque ninguna es obligatoria:
- maxWidth - El ancho máximo que debe tener la imágen para que no sea redimensionada. Por defecto: 600.
- msgResized - El mensaje que será mostrado cuando la imágen sea redimensionada. Por defecto: Esta imagen ha sido redimensionada. Has click aquí para mostrarla en su tamaño real.
- msgNotResized - El mensaje que será mostrado cuando la imagen sea mostrada en su tamaño original. Por defecto: Este es el tamaño original de la imagen. Has click aquí para ajustarla a la página.
Descarga
http://teleportz.com.ar/uploads/descargas/resizeimages-v1.0.zip