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 responsive con CSS 3 y Javascript nativo

Otro slideshow a petición de Gustavo en un comentario del blog en el que indica que sería interesante que tuviera controles. Pues bien, tal como le comenté me puse manos a la obra y, espero que sea de su agrado ya que este slideshow responsive tiene algo más de curro que el anterior. Eso si, este ya no es tan liviano como el anterior ni en Javascript ni en CSS.

Por cierto Gustavo, no he puesto las imágenes como background, aunque podrías hacerlo incluyendo por cada elemento una imagen en tu CSS aplicando un alto.

Imagen slideshow responsive

Está inspirado en el de unslider.com, con la peculiaridad de no usar framework o librerías externas tipo JQuery, Prototype, Mootoools, etc. Las características que tiene esta demo son similares a las que proporciona unslider.com:

Navegación:
  • Por mousewheel del ratón
  • Por teclado
  • Por enlaces
  • Táctil para el móvil
Responsive

Se adapta perfectamente al tamaño de la pantalla en el que se visualiza. Pruébalo reduciendo el tamaño del browser con el que estés visitando esta página.

Configurable

Con unas pocas líneas de CSS puedes configurar el ancho y/o alto máximo de la galería. Es importante tener conocimientos básicos sobre las hojas de estilo. Para ello puedes sobreescribir las propiedades CSS en tú hoja de estilos, o puedes descargar la librería y modificar el CSS a tú gusto.

¿Cómo usar este SLIDESHOW?

En primer lugar debes descargar la librería o enlazar la librería desde tú código copiando estas líneas entre las etiquetas <head> del documento HTML:

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>

Slideshow sencillo con CSS3 y JavaScript

Aprovechando las capacidades de CSS3 y un poco de JavaScript, he decidido crear dos slideshow bastante sencillos, teniendo en cuenta los que podemos ver en algunas páginas últimamente.

Imagen del slideshow

Podéis ver las demos del slideshow con efecto opacidad y el slideshow con efecto persiana.

Para este ejemplo no se ha usado ninguna librería de JavaScript, lo que se consigue que este sea lo más liviano posible en cuanto a peso se refiere. Al ser un ejemplo bastante sencillo no he visto conveniente usar alguna, ya que el script solamente se encargará de modificar los class de una lista de imágenes, y el peso de la animación recae sobre el CSS y las nuevas propiedades que proporciona su última actualización.

Ejemplo slideshow efecto opacidad

HTML

Para ello vamos a ver el código HTML.

<ul id="galeria">
<li><img src="/blog/../img/rascafria-1.jpg" border="0" alt="Rascafría" /></li>
<li><img src="/blog/../img/rascafria-2.jpg" border="0" alt="Rascafría" /></li>
<li><img src="/blog/../img/rascafria-3.jpg" border="0" alt="Rascafría" /></li>
</ul>

Lightbox v 2.0.5 optimizado para IE9

Hace unos días estaba probando algunos de los recursos que he usado en mis web en el nuevo navegador IE9. En cuestión de segundos me asombró que algunos de estos recursos no funcionaban como me esperaba en la última versión del browser de Microsoft. Uno de ellos es la librería Lightbox.

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