slide-show responsive con CSS3 y JavaScript nativo
0 comentarios
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.
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 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="pathimagen" alt="Texto alternativo imagen" width="Indicar tamaño real de imagen en px" /></li>
<li title="Titulo imagen" data-subtitulo="subtitulo"><img src="pathimagen" alt="Texto alternativo imagen" width="Indicar tamaño real de imagen en px" /></li>
<li title="Titulo imagen" data-subtitulo="subtitulo"><img src="pathimagen" alt="Texto alternativo imagen" width="Indicar tamaño real de imagen en px" /></li>
</ul>
<div class="botones">
<a id="left" class="boton" href="#">⟨</a>
<a id="right" class="boton" href="#">⟩</a>
</div>
</div>
Por defecto no está activado el automovimiento. Solo tienes que añadir las siguientes líneas antes del 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.