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:

<link rel="stylesheet" href="http://ubuntuone.com/7CcSCFAincrPmWZYOnMJA9" type="text/css" media="screen" />
<script type="text/javascript" src="http://ubuntuone.com/1CGmD4rRCsLBvL2ZzLFBgc"></script>

Escribe el marcado que muestran estas líneas en tu documento HTML, sustituyendo los elementos entre corchetes [ ] por los que desees:

<div id="galeria-principal" class="galeria">
<ul id="lista-galeria">
<li title="[Titulo imagen]" data-subtitulo="[subtitulo]"><img src="/blog/[pathimagen]" alt="[Texto alternativo imagen]" width="[Indicar tamaño real de imagen en px]" /></li>
<li title="[Titulo imagen]" data-subtitulo="[subtitulo]"><img src="/blog/[pathimagen]" alt="[Texto alternativo imagen]" width="[Indicar tamaño real de imagen en px]" /></li>
<li title="[Titulo imagen]" data-subtitulo="[subtitulo]"><img src="/blog/[pathimagen]" alt="[Texto alternativo imagen]" width="[Indicar tamaño real de imagen en px]" /></li>
</ul>
<div class="botones">
<a href="#" id="left" class="boton">⟨</a>
<a href="#" id="right" class="boton">⟩</a>
</div>
</div>

Añade tantos elementos de este tipo como desees:

<li title="[Titulo imagen]" data-subtitulo="[subtitulo]"><img src="/blog/[pathimagen]" alt="[Texto alternativo imagen]" width="[Indicar tamaño real de imagen en px]" /></li>

Por defecto no está activado el automovimiento. Solo tienes que añadir las siguientes líneas antes del </body> si quieres activarlo:

<script type="text/javascript">
setInterval(irderecha, 5000);	
</script>
Soporte para Internet Explorer 8

Si quieres que tenga soporte para este navegador puedes incluir estas dos librerías. Una es para corregir los bug propios de este navegador. La segunda es para dar soporte a las mediaqueries a este navegador. Recomiendo incluirlo dentro de comentarios condicionales. Si queréis saber más sobre este tema podéis visitar mi post anterior sobre técnicas Cross Browser.

<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

Como siempre (que me acuerdo) os dejo los enlaces a los diferentes ficheros javascript y css para que le echéis una ojeada.

En todo caso podéis ver más información en la misma págia del slideshow, ya que esta vez me la he currado y le puesto algo de documentación.

Cualquier problema o duda podéis utilizar los comentarios. Buen fin de semana.

Ver demo slideshow.

Actualización 17/07/2014

Ubuntu one ha dejado de dar servicio, así que los enlaces a los ficheros CSS y Javascript no están disponibles. Aquí os dejo los nuevos enlaces para usarlos directamente en vuestra web:

<link rel="stylesheet" href="https://d4d3bd95973fbfd97e2935b94af3f304a67f6ce7.googledrive.com/host/0BzZzZ_bKDPV9Y3RMT01sVkxiaDg/unslider.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://d4d3bd95973fbfd97e2935b94af3f304a67f6ce7.googledrive.com/host/0BzZzZ_bKDPV9Y3RMT01sVkxiaDg/unslider.js"></script>

Podéis incluir estos enlaces para probar el slide, sin tener que descargar la librería.

Si queréis descargar la librería podéis hacerlo de mi cuenta de Google Drive y así podéis bichearla y/o toquetearla.

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