Archive for the 'Javascript' Category

Para un par de sitios (aún no los lanzamos así que una vez que lo hagamos lo agrego al post) necesitábamos que existiera una transición de imágenes con un fade, algo bien simple, por lo que me puse a buscar un buen plugin de jQuery, pero nada era lo suficientemente simple y limpio, por lo que buscando encontre un muy buen post para construir uno, lo tomé como base y lo arreglé un poco para poder configurar el tiempo entre transiciones, el tiempo que dure el difumado y no tener que agregar css, quedando así:

	jQuery.fn.simpleSlide = function(a){

		a				= a || {};
		a.duration		= a.duration || 5000;
		a.transition	= a.transition || 1000;

		var	c	= $(this);

		$(c).css("position","relative");

		$("img",$(c))
			.css({
				'position'	: 'absolute',
				'top'		: '0px',
				'left'		: '0px',
				'z-index'	: '8'
				})
			.find(":first")
				.addClass("slide-active")
				.css('z-index','10');

		setInterval(function(){

				var $active = $("img.slide-active",$(c));

				if($active.length == 0) $active = $("img:last",$(c));

				var $next	= $active.next().length ? $active.next() : $("img:first",$(c));

				$active
					.addClass("slide-last-active")
					.css('z-index','9');

				$next
					.css({opacity: 0.0})
					.addClass("slide-active")
					.css('z-index','10')
					.animate({opacity: 1.0}, a.transition, function(){
						$active
							.removeClass('slide-active slide-last-active')
							.css('z-index','8');
					});
			}, a.duration);

	}

¿Como funciona?

Simple, un contenedor (ej. un div) y dentro una lista de imágenes:

	<div id="contenedor">
		<img src="imagen_1.jpg" alt="Imagen 1" />
		<img src="imagen_2.jpg" alt="Imagen 2" />
		<img src="imagen_3.jpg" alt="Imagen 3" />
		<img src="imagen_4.jpg" alt="Imagen 4" />
		<img src="imagen_5.jpg" alt="Imagen 5" />
	</div>
[/htm]

y obviamente con jQuery previamente cargado

[html]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

para que se inicie la transición cuando cargue la página

	$(document).ready(function(){

		$("#contenedor").simpleSlide();

	});

si quieren configurar el tiempo en que demora en iniciar la nueva transición (duration) o el tiempo que dura el efecto (transition) deberían llamarlo así

	$(document).ready(function(){

		$("#contenedor").simpleSlide({duration:5000,transition:1000});

	});