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.

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 class="image-lazy" src="/themes/amstudio-theme/assets/img/placeholder.jpg" data-src="img/galeria_2/alba-rocker.jpg" alt="Dos rockeros muy rockeros" width="680" />li>
    <li class="noselected"><img class="image-lazy" src="/themes/amstudio-theme/assets/img/placeholder.jpg" data-src="img/galeria_2/andres.jpg" alt="Un chico muy mosqueado" width="680"/>li>
    <li class="noselected"><img class="image-lazy" src="/themes/amstudio-theme/assets/img/placeholder.jpg" data-src="img/galeria_2/cafe.jpg" alt="La palabra café en una nevera" width="680"/>li>
    <li class="noselected"><img class="image-lazy" src="/themes/amstudio-theme/assets/img/placeholder.jpg" data-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.