adipoli es un plugin para jQuery que facilita la tarea de crear efectos hover sobre las imágenes ya que dispone de una serie de transiciones predefinidas que podemos usar con facilidad.

Obviamente, se requiere tener jQuery; si no es así, puede ser cargado desde las API de Google agregando lo siguiente antes de </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'></script>
Descargamos el ZIP con el plugin, lo alojamos en un servidor externo y lo agregamos a continuación de lo anterior:
<script src="URL_jquery.adipoli.min.js" type="text/javascript"></script>
o lo añadimos directamente en la plantilla, copiando y pegando el contenido del archivo:
<script type='text/javascript'>
//<![CDATA[
  .. acá el contenido del archivo ...
//]]>
</script>
Por último unas pocas reglas de estilo que podemos agregar directamente en la plantilla y que no es necesario personalizar:
<style>
.adipoli-wrapper {display: inline-block; margin:auto; position:relative;}
.adipoli-wrapper>img {position: absolute; z-index: 1;}
.adipoli-before {position: absolute; z-index: 5;}
.adipoli-after {position: absolute; z-index: 10;}
.adipoli-slice {display:block;height:100%;position:absolute;z-index:15;}
.adipoli-box {display:block;position:absolute;z-index:15;}
</style>
¿Y cómo lo usamos? Sólo hay que agregar la función a cualquier selector así que sigo poniendo códigos:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $('.efecto1').adipoli({'startEffect' : 'overlay','hoverEffect' : 'sliceUpDown'});
  $('.efecto2').adipoli({'startEffect' : 'overlay','hoverEffect' : 'fold'});
});
//]]>
</script>
En esos ejemplos, todas las imágenes cuyo atributo class es efecto1 se animarán de cierto modo y las que tengan la clase efecto2 de otro. Lo mismo podría hacer en Blogger para crear animaciones automáticas de las imagenes subidas ya que esta, tienen una clase denominada separator así que con esto, les agragría uno de los efectos:
$('.separator img').adipoli({'startEffect' : 'normal','hoverEffect' : 'popout'});
Lo que se ve entre las llaves son las opciones que, básicamente son dos, la primera indica como se verá la imagen inicialmente (normal, transparent, overlay o grayscale sólo si el documento es de tipo HTML5)

La segunda indica el efecto hover y puede ser cualquiera de estos valores: normal, popout, sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpRandom, sliceUpDown, sliceUpDownLeft, fold, foldLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse.

Además, hay opciones extras que permiten controlar los detalles como la opacidad, velocidad, colores, márgenes y la manera en que serán tratados los textos pero, todo eso queda para que experimenten.

El resultado final podría ser algo como esto:

14 comentarios:

Gabbriel  

Hola buen día.
Quiero poner este efecto que me gusto mucho en un blog en tumblr. pero no estoy seguro si es compatible. ¿tú crees que si se pueda?
ya lo intente pero la verdad no se casi nada de lenguajes ni códigos de programación y no pude hacerlo funcionar, es que no me queda muy claro donde poner el url o código de la imagen.

JMiur  

No veo por que no podría usarse, en Tumblr se pueden agergar scripts sin problemas.

Responder
Gem@  

Resulta de lo más atrayente y llamativo ¿para una galería? ummm :)

JMiur  

Sí, supongo que ese sería el uso mas razonable del asunto.

Responder
Bonzu Pipinpadaloxicopolis III  

Creo que sí lo aplicaré a mi galería :-D, como dice Gem@ es muy atrayente.

Responder
GuillermoVM  

Alguna forma de usarlo si es que tengo Scriptaculous?

JMiur  

No es comveniente agregar dos librerías en un mismo sitio; es una carga excesiva y suele generar conflictos.

Responder
Carlos Vázquez  

He conseguido introducir el efecto en blogger, el problema es que cuando pongo 'grayscale' como efecto inicial no me aparece la imagen en gris. Los efectos que tu pones me funcionan pero el que yo busco que es que pase de gris a color no me va. No sé cual puede ser el motivo...

JMiur  

Ese efecto no funcioanará con imagenes externas y es por eso que no está en los ejemplos agregados en la entrada.

Responder
Jose M Fernandez R  

Buen dia, quiero redondear las esquinas, donde puedo colocar el codigo ??. Gracias

JMiur  

Es lo que explica la entrada.

Responder
Unknown  

Perdón por la ignorancia,soy nuevo en esto y ando experimentando pero este llamado al plug in se hace inmediatamente despues de identar en HTML5 la imagen o es en otro lugar? Gracias por tu ayuda, saludos.

Atte: Carlos

JMiur  

No sé a qué te refieres con identar. El orden es:

primero jQuery
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'></script>

luego el plugin
<script src="URL_jquery.adipoli.min.js" type="text/javascript"></script>

y luego se ejecuta
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
xxxxxxxxxxxxx
});
//]]>
</script>

$(document).ready(function() {} ejecutará la función cuando se cargue la página, sin importar si las imagenes están antes o después.

Responder
Marijoing  

Exelentes efectos. Pero estoy tratando de agregarle texto tambien..... en la pagina de: http://jobyj.in/adipoli/ dice que facilemte se le puede agregar una funcion de overlayText: (HTML predeterminado que se mostrará en la superposición)...pero no logro entender como agregarla...Alguien tendra algun ejemplo o sabe como hacerlo? lo agradeceria millones!!!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR