Esto no es un blog. Es una sección que programé para ir publicando aquellas cositas que me parecen interesantes y, por cualquier motivo, quiero tener a mano. Copia lo que quieras, usa lo que quieras (pero respeta sus licencias).
Escrito por: Martín el 21-12-2009 03:14:21
Este es el primero de una lluvia de post que voy a publicar todos juntos porque en este fin de semana dí con varios plugins para jQuery que me parecieron interesantes.
En este post, le toca el turno al jQuery maxImage plugin, que se encarga de redimensionar automáticamente las imágenes según su ratio, tamaño de la ventana del navegador y otras opciones.
Realmente, para entender su funcionamiento alcanza con mirar las demos:
1) Imagen de fondo. Ver demo
2) Ajustándose al tamaño de la pantalla (solo uno de los bordes). Ver demo
3) La imagen no sobrepasa su tamaño original. Ver demo
4) Como pase de diapositivas de fondo. Ver demo
Instalando:
Muy fácil, agrega la librería jQuery, descarga el jQuery maxImage plugin y sigue los siguientes pasos:
a) Inserta las librerías (código 1).
b) Agrega el código javascript dentro del head (código 2).
c) Agrega una imagen utilizando el class seleccionado en el código 2 (código 3)
Código XHTML
<script src="jquery.pack.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.maximage.js" type="text/javascript" charset="utf-8"></script>
Código JAVASCRIPT
$(document).ready(function(){
$('img.className').maxImage({
isBackground: true,
verticalAlign: 'top'
});
});Código XHTML
<img src="url_to_image.jpg" class="className" />
Búscame en Facebook
Sígueme en Twitter![[Q] Interactiva](/images/q-interactiva.gif)
[Q] Interactiva
Carlos Macías
Quadrícula Blog
Francisco Moreno 2.0
Andrés Karp
Klapz Comunicacion y Diseño
ProjekPoster de Personajes
stock.xchange
Subflash
W3C sites
PHP.net
World Wide Web Consortium W3C
CSS WOW
CSS Clip
CSS Star
CSS Creme
Boxed CSS
CSS Brigit
CSS Based
CSS Loggia
CSS Leak
CSS Design
CSS Orgy
