Imágenes que se desvanecen (y rotan) con JQuery Innerfade

Hace unos días, Rosa desde El Escaparate nos enseñaba a rotar imágenes con Scriptaculous. Ya que hemos visitado su blog en la anterior entrada sobre DeJotaS Radio, vamos a buscar una manera alternativa de realizar el mismo efecto con las imágenes, pero utilizando la librería JQuery y un script llamado Innerfade diseñado para permitir que cualquier elemento pueda desvanecerse dentro de un contenedor fijo.



Ver Demo.

Lo primero es tener insertada en la plantilla la llamada a la librería, en este caso y como recomendación, utilizando la API de Google:


Poner antes de </head> (si no lo tienes ya puesto)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script>


A continuación, nos descargamos el archivo jquery.innerfade.zip (124kb) desde esta página del blog de sus creadores y subimos a nuestro alojamiento el archivo jquery.innerfade.js.
Recuerda que si no tienes alojamiento propio puedes utilizar Google Sites para alojar tus Scripts sin tener que cambiar la extensión, y además de manera gratuita.

Realizamos la llamada desde nuestro blog:

<script src='http://URL_ALOJAMIENTO/jquery.innerfade.js' type='text/javascript'></script>


Si no tienes ni quieres alojamiento, también puedes optar por insertar directamente el script en tu plantilla (antes de </head>) con el siguiente código:
[+]Ver código


<script type='text/javascript'>
//<![CDATA[

/* =========================================================

// jquery.innerfade.js

// Datum: 2008-02-14
// Firma: Medienfreunde Hofmann & Baldes GbR
// Author: Torsten Baldes
// Mail: t.baldes@medienfreunde.com
// Web: http://medienfreunde.com

// based on the work of Matt Oakes http://portfolio.gizone.co.uk/applications/slideshow/
// and Ralf S. Engelschall http://trainofthoughts.org/

*
* <ul id="news">
* <li>content 1</li>
* <li>content 2</li>
* <li>content 3</li>
* </ul>
*
* $('#news').innerfade({
* animationtype: Type of animation 'fade' or 'slide' (Default: 'fade'),
* speed: Fading-/Sliding-Speed in milliseconds or keywords (slow, normal or fast) (Default: 'normal'),
* timeout: Time between the fades in milliseconds (Default: '2000'),
* type: Type of slideshow: 'sequence', 'random' or 'random_start' (Default: 'sequence'),
* containerheight: Height of the containing element in any css-height-value (Default: 'auto'),
* runningclass: CSS-Class which the container get’s applied (Default: 'innerfade'),
* children: optional children selector (Default: null)
* });
*

// ========================================================= */


(function($) {

$.fn.innerfade = function(options) {
return this.each(function() {
$.innerfade(this, options);
});
};

$.innerfade = function(container, options) {
var settings = {
'animationtype': 'fade',
'speed': 'normal',
'type': 'sequence',
'timeout': 2000,
'containerheight': 'auto',
'runningclass': 'innerfade',
'children': null
};
if (options)
$.extend(settings, options);
if (settings.children === null)
var elements = $(container).children();
else
var elements = $(container).children(settings.children);
if (elements.length > 1) {
$(container).css('position', 'relative').css('height', settings.containerheight).addClass(settings.runningclass);
for (var i = 0; i < elements.length; i++) {
$(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
};
if (settings.type == "sequence") {
setTimeout(function() {
$.innerfade.next(elements, settings, 1, 0);
}, settings.timeout);
$(elements[0]).show();
} else if (settings.type == "random") {
var last = Math.floor ( Math.random () * ( elements.length ) );
setTimeout(function() {
do {
current = Math.floor ( Math.random ( ) * ( elements.length ) );
} while (last == current );
$.innerfade.next(elements, settings, current, last);
}, settings.timeout);
$(elements[last]).show();
} else if ( settings.type == 'random_start' ) {
settings.type = 'sequence';
var current = Math.floor ( Math.random () * ( elements.length ) );
setTimeout(function(){
$.innerfade.next(elements, settings, (current + 1) % elements.length, current);
}, settings.timeout);
$(elements[current]).show();
} else {
alert('Innerfade-Type must either be 'sequence', 'random' or 'random_start'');
}
}
};

$.innerfade.next = function(elements, settings, current, last) {
if (settings.animationtype == 'slide') {
$(elements[last]).slideUp(settings.speed);
$(elements[current]).slideDown(settings.speed);
} else if (settings.animationtype == 'fade') {
$(elements[last]).fadeOut(settings.speed);
$(elements[current]).fadeIn(settings.speed, function() {
removeFilter($(this)[0]);
});
} else
alert('Innerfade-animationtype must either be 'slide' or 'fade'');
if (settings.type == "sequence") {
if ((current + 1) < elements.length) {
current = current + 1;
last = current - 1;
} else {
current = 0;
last = elements.length - 1;
}
} else if (settings.type == "random") {
last = current;
while (current == last)
current = Math.floor(Math.random() * elements.length);
} else
alert('Innerfade-Type must either be 'sequence', 'random' or 'random_start'');
setTimeout((function() {
$.innerfade.next(elements, settings, current, last);
}), settings.timeout);
};

})(jQuery);

// **** remove Opacity-Filter in ie ****
function removeFilter(element) {
if(element.style.removeAttribute){
element.style.removeAttribute('filter');
}
}

//]]>
</script>



Finalmente tan sólo tienes que colocar (después de la llamada y antes de </head>) la parte del script que controlará la manera de comportarse de las imágenes:

<script type='text/javascript'>
$(document).ready(
function(){
$(&#39;.imagenes&#39;).innerfade({
animationtype: &#039;fade&#039;,
speed: 1000,
timeout: 2000,
type: &#039;sequence&#039;,
containerheight: &#39;125px&#39;
});
});
</script>


En ROJO aparecen las variables que podemos controlar:

.imagenes: es la clase del contenedor donde irán las imágenes.
animationtype: es el tipo de animación, puede ser "fade" (desvaneciéndose) o "Slide" (en cortina).
speed: velocidad de cambio. El tiempo que permanece "visible" cada imagen.
timeout: el tiempo que pasa entre una y otra imagen.
type: puede ser 'sequence' (en orden), 'random' o 'random_start' (aleatorio) . Se refiere al orden de aparcición de las imágenes.
containerheight: es la altura del contenedor (no debe de ser menor que el de las imágenes).

Ahora, para mostrar las imágenes rotantes en nuestro blog, lo haremos de la siguiente manera:


<div class="imagenes">
<p><img src="http://URL_IMAGEN_1"/></p>
<p><img src="http://URL_IMAGEN_2"/></p>
<p><img src="http://URL_IMAGEN_3"/></p>
<p><img src="http://URL_IMAGEN_4"/></p>
<p><img src="http://URL_IMAGEN_5"/></p>
</div>


Incluso podemos añadir un enlace a las imágenes:

[+]Ver código


<div class="imagenes">
<p><a href="http://ENLACE_1"><img src="http://URL_IMAGEN_1"/></a></p>
<p><a href="http://ENLACE_2"><img src="http://URL_IMAGEN_2"/></a></p>
<p><a href="http://ENLACE_3"><img src="http://URL_IMAGEN_3"/></a></p>
<p><a href="http://ENLACE_4"><img src="http://URL_IMAGEN_4"/></a></p>
<p><a href="http://ENLACE_5"><img src="http://URL_IMAGEN_5"/></a></p>
</div>



Por supuesto, es recomendable que todas las imágenes tengan el mismo tamaño.

El resultado lo puedes ver en este blog de pruebas.



Para saber más:
InnerFade


Subir || Bajar

14 opiniones:

José GDF :

Se me ocurre un gran uso: para el blogroll (vaya descubrimiento, ¿no?)

El caso es que quería hacer algo especial con el blogroll, y no sabía exactamente cómo hacerlo. Y como uso las JQuery para algunas cosas, pues me viene que ni pintado, además de ocupar muy poco espacio.

Gracias por compartir este truco ;)

Deybi :

Mira que efecto tan chulo. Ya quiero otra plantilla para mi blog -soy vicioso-. Con esta explicaciones y la de esquina redondeadas tenemos mucho para comenzar.

Saludos, ¿BanakaBanaka?.

Iván_RG :

Pues es muy buena idea, José GDF, gracias por compartirla, a mí no se me había ocurrido...

Deybi, te estás enviciando.... jejeje, a ver qué inventas.
eeehhh.. sí, BanakaBanaka, Iván... como prefieras ;)

Anónimo :

Vaya! tremendo diseño el de tu blog! impresonante de palmo a palmo.

Las imágenes quedan geniales.

un gusto pasar por acá.

Diana :

Hola Tanaka .
Graciñas por ver mi rincón.
Conoces la bloguería?, supongo que sí.
En caso sontrario te la recomiendo.Puedes acceder desde mi blog o desde lablogueria.blogspot.com
Un besiño desde Coruña.
Diana

Iván_RG :

Me alegro de que te gusten, Fero. Tus blogs están muy bien, en especial las ilustraciones de Feromenoi Art, son muy buenas.

Diana, muchas gracias por tu comentario. Casi casi aciertas, es BANAKA, jejeje!!
Y claro que conozco La Bloguería, de hecho está desde el principio en el Footer del blog. Gracias por el apunte y el enlace en cualquier caso :)

Sedrach :

Hola.
Me encanta este efecto, y en general todo tu bog.Felicidades sigue asi
Algun dia mi blog se vera asi.....claro con mis gustos....Gracias x tu ayuda y aportes.
salu2

Anónimo :

Un placer leer cosas tan interesantes de jquery y mejor todavía ver que se llevan a cabo en esta comunidad!

Saludos

Anónimo :

Ay, ay, ay, juraría que he visto una imagen "parecida" a la del Escaparate, ahí "toa loca" girando y desvaneciéndose...

¿Ande tan los derechos de imagen?... que mundo este xd, con lo que me costó el sisarla (perdón quise decir diseñarla)... ainssss (ha sido un fallo del teclao inalámbrico).

Pues le aviso a usted, que como una tiene sus derechos de imagen reservados, me he llevado la susodicha, esperando que sea el original y no haya usted hecho circular copias de la misma que atenten contra mi intimidad...

¡Avisado queda!


P.D. ¡Qué guapa, que guapa, que guapa!

Gracias por la imagen y por la entradaaaa gamberrete ¡torerooooo!

Iván_RG :

creeck10, muchas gracias por tu comentario, me alegra que te guste el efecto... y mi blog, claro.

Anónimo. Hubiera dejado ahí tu comentario si lo hubieras firmado y no fuera eso, anónimo. Además, sabiendo que yo administro Blogs con EÑE (y si no lo sabías ya te lo cuento yo), no sé a quién se le ocurre dejar un mensaje de Spam hacia otro directorio...

glocalmeeting muchas gracias por visitar el blopg. Seguramente @TwittBoy y yo (al menos yo casi seguro que sí), vayamos a Pamplona el día 16. Nos veremos por allí!!

Rosa de "parecida" nada de nada, es la del Escaparate mismamente...jeje!!
Con mis cosas y mis mundos se me había olvidado avisarte para que la cogieras...qué fallo!!
Bueno, ya te he ingresado los 2 millones de euros por los derechos de imagen en tu cuenta... así que por favor, avisa al "cobrador del frack" para que deje de acosarme...

Ya la he visto en El Escaparate, ta guapa,eeeeehhh!!! jejejeje!!

Un besote muy muy fuerte, gamberra!!

[@nimes] :

Hola amigo BananakaBanaka!!!! excelente entrada, pero yo tengo un problema, y qusiera saber si hay solución, mira yo ya tengo slider.js y jquery.js en mi plantilla, nose si se deba a eso cuando coloco el jquery/1.3/jquery.min.js y el jquery.innerfade.js a mi plantilla para que el efecto no me haya salido, lo probe en una plantilla que no contengan los anterior .js y segui los pasos y si me salio, pero queria saber si me darias una solución, el slider y jquare que tengo en mi plantillas son por el carrusel que tengo en mi plantilla, cabe recalcar eso, yo quisiera este efecto mas a mi plantilla, por favor respondeme a carromo26@gmail.com Gracias y saludos.

Iván_RG :

[@nimes] el problema es que si ya tienes puesto jquery.js no es necesario poner también el jquery/1.3/jquery.min.js porque se supone que es lo mismo, sólo que como yo lo cargo utilizo directamente la API de Google.
Y lo siento, pero no respondo por email a preguntas hechas en el blog, para eso está la suscripción de comentarios. Además así aprendemos todos ;)

Saludos!!

lunakaotika :

hola me enkanta el buscador del ojito pero nose si se puede kojer para poner en mi blog. por favor kontestame vale? un abrazo gracias besitos soy luna.

Iván_RG :

Luna en esta entrada tienes la manera de poder hacerte un buscador similar y a tu gusto:
Estiliza el nuevo formulario de Búsquedas Blogger

Desplegar Formulario
Subir

Deja aquí tu comentario:
(y recuerda que hemos retirado los "Nofollow")

Directorios
Blogs con EÑE directorio de blogs
Enlázanos
Código +/-

Código +/-

Código +/-
 

Formulario de Contacto


Lo quieres?

Nombre*: E-Mail*:

Asunto:

Mensaje*:

¿Cuantos lados tiene un Cuadrado?*:


(Los campos marcados con * son obligatorios)