Esta vez vamos a mostrar como crear un slideshow de imágenes utilizando el framework JQuery. Este es un framework de javascript, quizás el más usado. Esta herramienta nos facilita mucho la tarea de programación ya que nos permite implementar una serie de métodos que nos resuelven cosas que antes teníamos que programar nostoros mismos, como por ejemplo desplazar un bloqque, hacer un fadeIn, cargar contenido por medio de ajax, etc.

Ya habíamos publicado algunos slideshow de imágenes realizados en javascript, pero sin temor a equivocarme este es superior en varios aspectos. El primero y fundamental; es más sencillo de implementar, la programación que van a encontrar tiene muchas menos cantidad de líneas de código, la segunda es el afamado cross-browser, no tenemos que preocuparnos de cómo se ve en los distintos navegadores ya que el equipo de JQuery tiene años de experiencia y estos problemas ya fueron resueltos en su mayoría; y por último los recursos consumidos por las animaciones están optimizados, seguro será muy difícil que nosotros obreros del “hago de todo un poco” podamos mejorar la performance de los recursos de un framework creado por John Resig, integrante de la fundación Mozilla.

Bueno, sin más cháchara, vamos a ver el código, está dividido como siempre en tres partes, javascript, CSS y HTML; en cada línea de código pueden ver los comentarios y así entender que hace cada cosa. Si alguien tiene algún problema a la hora de implementarlo, me cuenta!

En el header llamamos dos archivos javascript externos, el de JQuery y el nuestro. Luego definimos dos variables, el tiempo que se detendrá cada imagen y la velociad del movimiento, por último definimos el objeto de JQuery con la función “ready” que nos avisa cuando ya se ha cargado el DOM de la página. En la variable “sideposition” definimos si queremos que el slide sea horizontal “h” o vertical “v”.

Head


CSS

Aquí aparecen los estilos; en el ID #dialup debemos siempre especificar el ancho y alto que tendrán las imágenes pequeñas, el script necesita esto para el cálculo del movimiento del dial. En caso de que queramos ubicar las imágenes pequeñas de forma vertical, sólo nos bastará con especificar el ancho de #smallimages con el mismo ancho que tienen las imágenes, en el caso del ejemplo 80px.


body { 
		margin: 0; 
		font-family: "Calibri", Verdana, Arial, Helvetica, sans-serif; 
		font-size: 0.8em; 
		background: black; 
	}
	
	img { 
		overflow: hidden; 
		border: none; 
		margin: 0; 
		padding: 0px;
		outline: 0;
	}
	
	#slider { 
		width: 500px; 
		height: 343px; 
		margin: 0 auto; 
		text-align: center; 
		background: white url(img/loader.gif) center center no-repeat; 
	}
	
	#content { 
		position: absolute; 
		overflow: hidden; 
		width: 500px; 
		height: 343px; 
	}
	
	#bigimages { 
		width: 500px; 
		height: 343px; 
		position: absolute; 
	}
	
	#bigimages div { 
		position: absolute; 
		width: 500px; 
		height: 343px; 
	}
	
	.back { 
		filter: alpha(opacity=50); 
		opacity: 0.5; 
		-moz-opacity: 0.5; 
		background: black; 
	}
	
	#bigimages div div { 
		position: absolute; 
		width: 200px;
		height: 90px;
		color: white; 
		right: 20px; 
		top: 160px; 
		padding: 10px; 
		text-align: left;
	}
	
	#smallimages { 
		margin: 0;
		position: relative; 
		top: 282px; 
		left: 85px;
		text-align: left;
	}
	
	#dialup { 
		width: 80px;
		height: 55px; 
		position: absolute; 
		display: block; 
		background: black; 
	}

Javascript

Este es el código del archivo “slider.js”:

function wideSlider(){

		var status = true; //Esta variable activa la reproducción automática
		var timer; //Este es el intervalo de tiempo para la rotación automática
		var big_positions = new Array(); //Acá guardamos las posiciones de las imágenes grandes
		var small_positions = new Array(); //Y aqué las posiciones de las pequeñas
		var amount = $("#bigimages").children().children("img").length; //Cantidad de imágenes
		var preloaded = 0; //Images preloaded counter

		$("#bigimages").hide(); //Oculto al inicio el DIV que contiene las imágenes grandes
		$("#smallimages").hide(); //Hago lo propio con el DIV de las pequeñas
		$("#bigimages").children("div").children("a").children("img").load(preloaderImages);
		$("#bigimages").children("div").children("a").children("img").each(images);
		function preloaderImages(e){
			preloaded++;
			if(preloaded >= amount){
				$("#bigimages").fadeIn("slow"); //Una vez cargadas las imágenes aplico un fade y muestro las imágenes grandes
				$("#smallimages").fadeIn("slow"); //Igual con las chicas
				show(); //Llamo a la función que ejecuta por primera vez el slider
			}
		}
		function show(){
			//Guardo las posiciones de las imágenes pequeñas
			$("#smallimages").children("a").each(saveSmall);
			function saveSmall(index,element){
				var side;
				var position;
				if(sideposition == "v"){
					side = $(this).children("img").height();
					position = side * index;
				}else{
					side = $(this).children("img").width();
					position = side * index;
				}
				small_positions[index] = position;
			}
			//Guardo las posiciones de las imágenes grandes
			$("#bigimages").children().each(saveBig);
			function saveBig(index,element){
				var width = $(this).width();
				var position = width * index;
				big_positions[index] = position;
				$(this).css("left", position); //Place big images
			}
			//Funcion para el evento click de cada una de las imágenes pequeñas
			$("#smallimages").children("a").click(moveSlider);
			function moveSlider(e){
				//Muevo el slider a la siguiente posición
				var position = $(this).index() - 1; //Necesito restar un indice a cada link, ya que la primer etiqueta dentro del contenedor de las imágenes pequeñas es un span para el dial
				$('#bigimages').animate({right: big_positions[position]},speed * 1000,"swing",function() {status = true;});
				$('#dialup').animate({left: small_positions[position]},speed * 1000,"swing",function(){/*status = true;*/});
				window.clearTimeout(timer); //Borro el timer
				//Llamo a la función que produce la reproducción automática
				autoRotation(position);
				return false;
			}
			//Llamo a la función que produce la reproducción automática por primera vez!
			autoRotation(0);
			function autoRotation(position){
				//Marco la siguiente posición como la actual
				var nextposition = position;
				//Vuelvo a crear el timer
				timer = window.setTimeout(function(e){
					if(nextposition == big_positions.length - 1){ //Si llegue a la última imagen, vuelvo a empezar ;) 
						nextposition = 0;
					}else{
						nextposition++;
					}
					//Cuando termina la animación, habilito que pueda existir una siguiente (esto es para evitar los problemas de render de los navegadores y que no aparezcan todas las animaciones juntas cuando maximisamos el navegador antes oculto)
					if(status == true){
						//Animación para las imágenes grandes
						$('#bigimages').animate({right: big_positions[nextposition]},speed * 1000,"swing",function() { status = true; });
						//Animación para el dial
						$('#dialup').animate({left: small_positions[nextposition]},speed * 1000,"swing",function(){/*status = true;*/});
					}
					status = false;
					window.clearTimeout(timer);
					//Genero la recursividad ejecutando nuevamente la función en la que estoy, con esto el loop infinito de animación cíclica
					autoRotation(nextposition);
				}, time * 1000);
			}
		}
	}

HTML

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
Anciano de Tristán Narvaja
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
Trompos de Tristán Narvaja
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
Las lavandas de mi madre
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
El viejo Pelusa

Anciano de Tristán Narvaja Trompos de Tristán Narvaja Las lavandas de mi madre El viejo Pelusa

Descargar archivos

Categoría: Web

Publicado por: negro

Artículos Relacionados

25 Respuestas para “Slider con JQuery”

  • Hola! Gracias por el post, es la primera vez que veo tu página web. Estaba intentando hacer un carrusel de fotos, y he dado con ella.
    Estoy intentando modificar un poco el ejemplo que tú has puesto, pero no consigo cambiar para que el recuadro gris, dialup, en vez de moverse de arriba abajo, lo haga de izquierda a derecha. Las imágenes (pequeñas) ya las he conseguido colocar en horizontal, eso era fácil, aumentando el ancho de la capa #smallimages. Pero no consigo encontrar dónde cambiar que la sombra también se desplace en horizontal.

    Gracias!

  • Estimado!

    En las líneas 26 y 27, modificas el height por width

    var width = $(this).children(“img”).width();
    var position = width * index;

    Y luego en la línea 44 cambias top por left:

    $(‘#dialup’).animate({left: small_positions[position]},speed * 1000,”swing”,function(){/*status = true;*/});

    Cuéntame si anduvo!

  • Yess!! Funcionó!! Pero tuve que cambiar también top por left en la fila 67. Gracias!!
    Ahora quiero hacer que no se mueva de forma automática, sino que lo haga cuando cliquee una flecha (como explicas en tu tutorial ‘carrusel de imagenes en javascript’ pero sin que sea una sola imagen de fondo, sino varias imagenes).
    A ver si lo consigo!!

  • Daniel, para que el slide no sea automático sólo coméntale la función //autoRotation(0);

    Saludos!

  • Eso fue lo que hice, borrarle todo el texto de autorotation (0), y funcionó! la verdad es que no sé por qué no me lo imaginé antes, porque tú lo tenías bastante explicado en tu tutorial…gracias de todos modos!!

    ahora estoy investigando otro problema, porque cuando lo he subido al servidor, me ha dejado de funcionar el dialup, no se me mueve cuando pincho en otra imagen pequeña…igual el problema está en la href de cada imagen, href=”javascript:;”, porque cuando pincho ahí desde el código fuente de la página, me enlaza a una página vacía con el típico error 404…

  • Hola, la verdad que he hecho lo mismo que daniel y me ha funcionado, justo ayer estaba intentando aplicarlo y no me salia y hoy vi las preguntas y lo pude hacer.

    Ahora tambien quise hacer que las imagenes grandes sean un vinculo a algunas secciones de mi pagina y me pasa que si le aplico un vinculo a todas las fotos del slide me desaparece todo, pero si dejo una sin vinculo sigue funcionando perfectamente.

    ¿Sabes como hacer para que todas las imagenes contengan vinculos y no se me desaparezca todo?

    Muchas gracias y muy bueno el slide.
    espero respuestas

  • Hola Marcelo, acabo de actualizar el slide con vínculos y la posibilidad de definir en una variable si queremos que las imágenes pequeñas aparezcan dispuestas vertical u horizontalmente.

    var sideposition = “h”;

    Daniel, para eliminar la auto rotación, basta con comentar la línea 51.. autoRotation(0); de esta manera no se ejecuta la función y si en el futuro la llegas a necesitar, descomentas la línea y listo.

    Sobre el problema del dialup, no debería pasar, ya que en el ejemplo se desplaza bien y en todos los navegadores.

    Saludos

  • Gracias negro por realizar el cambio en el slide, en breves lo pruebo.

    Saludos.

  • Quiero combinar este slider con un lightbox en la misma pagina. Encontre un codigo en otra pagina pero cuando trato de usarlos en una misma pagina uno de los 2 se invalida, ya sea el slider automatico o el lightbox (hacer click a una imagen y que esta se muestre en toda la pantalla). Podrian ayudarme?

  • Victor! En vez de Lightbox proba usar abcshow.net! Cualquier duda contame! No te dará conflicto ya que no depende de Jquery

  • hola estoy tratando de adaptar el slider a mi web pero cuando coloco el css. de slider en mi web automáticamente me invalida el de mi web y no funciona ni porque lo coloque en un contenedor aparte que me pueden recomendar gracias.

  • Kelevra… qué tal?.. te recomiendo incluir el CSS del Slider antes que el de tu Web, en caso de que siga dándote dificultades, asegúrate revisar que no hayan nombres de selectores repetidos en una y otra hojas de estilo

  • 13

    Hola Mr. Negro, Gracias por estos aportes para los que apenas estamos iniciando en esto del Java Script y el Jquey, y sobre todo por compartir los codigos y explicarlos, es usted un maestraso, le envio un saludo y le deseo un Feliz Año Nuevo !!!

  • Muchas gracias Jorge!

  • Exelente script, aunque, modifique los stilos para que viera a full pantalla, y, no se por que (ni me interesa mucho) los thumbs ganaron un margen de 4 px, asi que el dialup se desfasaba en 4*index.thumb, asi que hice esta pequeña modificacion al script, si es que a alguien le ha pasado lo mismo:

    en la linea 47 dice:
    position = (side * index);

    y la modifique a:
    position = (side * index)+(4 * index);

    era una respuesta mas o menos obvia, pero, sirve si es que alguien desea darle un margen a los thums, tan solo deben cambiar el “4″ por el tamaño del margen en pixeles.

    Reitero, Exelente script!!!

  • Me ha llevado un poco de trabajo, entenderlo y adaptarlo a algo más sencillo. Pero el final logré hacerlo funcionar. A veces veo que tiene problemas para cargar la primera vez, quizás tenga algún problema inicializando las variables.

    Muchas Gracias por facilitarnos este slide.

  • Hola Marcos!.. ese problema es del método load de jquery, para algunas versiones de navegadores, no detecta la carga de todas las imágenes, ya es requerida para que empiece a funcionar. Todavía no he encontrado una solución al problema… quizás haya algún fiexed de jquery

    Lo he solucionado pero con javascript crudo en otras aplicaciones

  • Hola, estuve adaptando tu codigo a mi necesidad, solo tuve un problema: quiero que al presionar la imagen me lleve a una pagina, pero no me lo permite, no sabes si habra alguna forma?
    Gracias

  • Hola Miriam

    Para eso sólo tienes que cambiar “javascript:;” por “tu link”; ejemplo:

    Esto: < a href="http://www.tu_dominio.com" rel="nofollow">< img src="img/anciano.jpg" alt="Anciano de Tristán Narvaja"/>

    Por esto: < a href="http://www.tu_dominio.com" rel="nofollow">< img src="img/anciano.jpg" alt="Anciano de Tristán Narvaja"/>

  • hola he utilizado tus códigos pero al ponerlos en la pagina no me funciona estaré haciendo algo mal..? es la primera vez que hago una pagina web osea soy novato en esto y si me salen las fotos que yo quiero pero no da movimiento

  • Hola lester, yo te recomiendo que primero bajes el ejemplo, te asegures de verlo funcionando bien y luego lo apliques en una página vacía sustituyendo las fotos y los textos paso a paso y chequeando que no te de error. Esta es la mejor manera de detectar que te puede estar fallando cuando no tienes mucha experiencia en este campo.

  • Hola Negro. Ya he utilizado varias ideas y objetos vuestros que habeis puesto aquí y van genial. Por ejemplo, el otro slide, en las imágenes salen unos pasteles y se quedó genial, si quieres metete en mi web y ves como quedo. Ahora tengo un problema y es que creo que el html que has puesto CREO (no lo sé bien) que está en xmlns, yo lo tengo en html normal y por eso creo que no se ve bien. Esto aprendiendo sobre todo esto y necesito ayuda, porque intento adaptarlo de la misma manera que el otro slide y no puedo, la pregunta es: será porque está en xmlns?
    Aquí te muestro la diferencia y en el otro slide que te comento si se ve perfecto.

    LO QUE PONE EN EL EJEMPLO:

    LO QUE PONE EN MI WEB:

    En el momento que cambio esto no se ve bien.

    Muchas gracias!
    Un saludo y sigue así, que eres un crack y personas como yo agradecemos que haya una web como esta.

  • YA ESTA! Todo arreglado y ya lo he adaptado, para que se vea bien he tenido que adaptar un par de cosas del codigo pero se ve genial. Perfecto. Gracias aunque no hayas contestado, por ofrecer este tipo de información y ayuda.

    Un saludo desde España.

  • Hola me sirvo mucho tu slid solo que tengo un problema, le quise adaptar mas imagenes pero se salen del la imagen como puedo hacer para que desaparescan y tambien cambie las imagenes pequeñas . gracias

  • Hola,

    la verdad es que va muy bien este slider, pero solo con Chrome y Firefox, no consigo que me funcione con iexplorer 9 o superior.

    saludos y gracias

Dejar una respuesta

XHTML: Tu pudes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>