Desarrollo web Programación con PHP Maquetación con HTML, CSS y JavaScript SEO on site y WPO Estándares recomendados por W3C Accesibilidad web Redacción de contenidos multilingües Fotografía

Slideshow con CSS3 y Javascript (mejorado)

A raíz de un comentario en el blog dejado por Abigail en el artículo Slideshow sencillo con CSS3 y JavaScript he decidido mejorar el script usado en ese artículo. En el comentario escribe que "no es capaz de implementar dos (o más) slideshow en una misma página". Esto es debido a que el script usado está accediendo al DOM mediante el ID padre.

Imagen de la demo slideshow múltiple

Tras recibir este comentario le propuse una solución, pero no me gustaba demasiado, me parece poco elegante esa solución, así que me puse manos a la obra para realizar las modificaciones necesarias en el script, html y css anteriores para que no hubiera problemas si quieres incluir varios slideshow en una misma página.

Como siempre me gusta dejar por adelantado el enlace a la demo. Múltiples slideshows con CSS y JS.

Si lo comparamos con el anterior son evidentes varias diferencias. La mayor de ellas, como he comentado anteriormente, es la forma de acceso al DOM, que ya no es por el atributo ID, sino por el CLASS de los elementos:

var elemento = document.getElementsByClassName('galeria');

Para ello echemos un vistazo a como he implementado el marcado en HTML:

<div class="galeria">
	<ul>
		<li class="selected"><img src="img/galeria_2/alba-rocker.jpg" alt="Dos rockeros muy rockeros" width="680" /></li>
		<li class="noselected"><img src="img/galeria_2/andres.jpg" alt="Un chico muy mosqueado" width="680"/></li>
		<li class="noselected"><img src="img/galeria_2/cafe.jpg" alt="La palabra café en una nevera" width="680"/></li>
		<li class="noselected"><img src="img/galeria_2/manifestacion.jpg" alt="Chica en la puerta del sol" width="680"/></li>		
	</ul>
</div>

Por otro lado también he tenido que modificar el CSS para que en esta ocasión utilice los class:

/** galeria **/
.galeria {position: relative;display: block;padding: 0;list-style: none;border: 10px solid #e5e5e5;box-shadow: 0 0 10px -2px #000;overflow: hidden;max-height: 510px;height: 340px;width: 45%;max-width: 680px;margin: 0 auto 2em auto;float:left;}
.galeria:nth-child(2n+1){float: right;}
.galeria li {position: absolute;top: 0;left: 0;width: 100%;background-color: #1a1a1a;paddiing: .4em;}
.galeria li img {width: auto;max-width: 100%;background: #1a1a1a;}
.galeria .selected {z-index: 1;opacity: 1;-moz-transition: opacity 1s ease .5s;-ms-transition: opacity 1s ease .5s;-o-transition: opacity 1s ease .5s;-webkit-transition: opacity 1s ease .5s;transition: opacity 1s ease .5s;}
.galeria .noselected {z-index: 0;opacity: 0;-moz-transition: opacity 1s ease .5s;-ms-transition: opacity 1s ease .5s;-o-transition: opacity 1s ease .5s;-webkit-transition: opacity 1s ease .5s;transition: opacity 1s ease .5s;}
.galeria li:before{position: absolute;left: 0;height: 10%;width: 100%;content: attr(title);padding: .5em;background: rgba(0,0,0,.5);color: #EEE;font-size: 1.2em;text-align: left;font-variant: small-caps;text-transform: lowercase;display: block;vertical-align: center;0text-shadow: none !important;} 
.galeria .noselected:before{-moz-transition: bottom .5s ease 0s;-webkit-transition: bottom .5s ease 0s;-ms-transition: bottom .5s ease 0s;-o-transition: bottom .5s ease 0s;transition: bottom .5s ease 0s;bottom: -50px;}
.galeria .selected:before{-moz-transition: bottom .5s ease 1s;-webkit-transition: bottom .5s ease 1s;-ms-transition: bottom .5s ease 1s;-o-transition: bottom .5s ease 1s;transition: bottom .5s ease 1s;bottom: 0;}

Como se puede ver en la demo en esta ocasión también aparece la leyenda bajo la foto. Esto se hace mediante CSS y JS. Para ello se ha obtenido el texto alternativo "alt" de la imagen y se incluye como "title" a elemento li superior. Para ello se ha realizado una función en javascript:

function obtenerdatoalt(){
	var elemento = document.getElementsByClassName('galeria');
	for (var i = 0; i < elemento.length; i++){
		var gal = elemento[i].getElementsByTagName('li');
		for(var c = 0; c < gal.length; c++){
			gal[c].title = gal[c].firstChild.alt;
		}
	}
}

Observar la siguiente línea:

.galeria li:before{content: attr(title);}

Con el pseudo-elemento "::before" incluimos antes que la imagen la leyenda. La obtenemos del atributo "title" del elemento "li", que mediante la función javascript comentada anteriormente hemos añadido en este elemento.

NOTA: He intentado crearlo directamente del atributo alt de la imagen, pero desconozco porque no he conseguido hacerlo. Esto sería lo ideal, ya que de esta forma nos ahorramos la función. Si alguien consigue ver el "error" por favor, indicadlo en los comentarios.

Por lo demás dejo los enlaces al javascript y al css completo para que podáis bichearlo y/o copiar para vuestros proyectos.

Buen domingo y no olvidéis criticar o aplaudir el post en los comentarios.

T F G+

Escribir un comentario

¡Gracias por dejarnos tus comentarios! — por favor intenta mantener tu opinión relacionada con la anotación, no usar insultos, agresiones, o faltas de respeto al autor y otros participantes de la discusión, en caso de no hacerlo tu comentario podría ser borrado.
A excepción de la página web, el resto de datos solicitados son necesarios para incluir comentarios. El email no será mostrado en los comentarios. Tampoco será usado por parte del administrador para enviarle ninguna información ni será vendido a terceros para ningún tipo de uso.
Código de seguridad
Refescar

Algunos derechos reservados ©

Esta web utiliza cookies de terceros. Si sigue navegando entiendo que está de acuerdo con su uso: Más información Cerrar