Hay un buen puñado de sliders fotográficos, realizados en jquery, para elegir; véase la página de AjaxShake. Pero en este post me voy a centrar en uno: bxslider. En realidad sólo he probado dos, el mencionado, y CodaSlider. El CodaSlider también está bien, pero en la página de Gutierrez Sustacha, lo sustituí por el bxslider solamente porque tenía una función de la que carecía el Coda: la de poder parar la presentación al pasar el mouse por encima. Algo que me interesaba ya que, al lado de las fotos hay bastante letra y, además, enlaces. Así, el visitante puede revisar con tranquilidad el contenido.
Además, según mi criterio, creo que los sliders fotográficos pueden encajar en páginas variadas. Podéis ver esta de mecánica del automóvil y esta otra de excavaciones y movimientos de tierra.
Bueno, vamos al grano. Lo primero, descargaros de aquí todo lo necesario para empezar a funcionar. Lo segundo, dentro de las etiquetas <head> de tu página, colocad el siguiente código:
<script type="text/javascript" src="jquery.js"></script> /* aquí llamamos el código principal en javascript de jquery */
<script type="text/javascript" src="jquery.bxSlider.min.js"></script> /* y aquí al código de bxSlider basado en jQuery */
/* lo siguiente sería el llamamiento a la función de bxSlider (los parámetros "mode", "infineteLoop", "speed", etc... son los que tengo predefinidos en la página que os menciné y se pueden modificar o sustituir por otros, seguid leyendo...) */
Tened en cuenta que se distinguen las mayúsculas de las minúsculas, osea, no es lo mismo "autoHover" que "autohover". Esto mismo sirve para, por ejemplo, el nombre de los archivos, no llaméis a "jQuery.js" si lo tenéis guardado como "jquery.js".
Comandos más usados (más, en inglés, en http://bxslider.com/options):
mode: ‘horizontal’, ‘fade’, ‘vertical’. Por defecto horizontal
auto: si es true, pues eso las transiciones son automáticas. Por defecto false.
speed: tiempo de transición en milisegundos. Por defecto 500
infiniteLoop: si es true, pues eso: loop infinito.
pause: tiempo entre una transición y otra en milisegundos
controls: si es true se visualizan los controles anterior y siguiente.
autoHover: si es true, se pausa la presentación al colocar el mouse encima.
width: Ancho del contenedor (en pixels)
prev_text: Texto (link) que se muestra para pasar al elemento anterior
next_text: Texto (link) que se muestra para pasar al próximo elemento
prev_img: Url de la imagen (link) que se muestra para pasar al elemento anterior
next_img: Url de la imagen (link) que se muestra para pasar al próximo elemento
ticker_direction: Dirección del slider (solamente en modo: ‘ticker’)
wrapper_class: class name del contente wrapper generado estomáticamente (para skinear y controlar mejor)
Es recomendable poner el ancho y el alto en las imágenes y funciona mejor si todas son del mismo tamaño. Ejemplo:
<body>
<div id="contenedor">
<div id="contslider">
<div id="fotobox">
<ul id="slidebx"> /* este id debe coincidir con el de el <script> */
<li><img align="left" src="image1.jpg" width="227" height="170" alt=""/>
<p> aqui podemos incluir descripcion</p></li>
<li><img src="image2.jpg" width="227" height="170" alt=""/></li>
<li><img src="image3.jpg" width="227" height="170" alt=""/></li>
<li><img src="image4.jpg" width="227" height="170" alt=""/></li>
</ul>
</div>
</div>
</div>
</body>
Tenemos que jugar con los tamaños de los diferentes contenedores ("<divs>") hasta obtener el efecto deseado. Son muy importantes las medidas (width, eight, margin, padding...) de los divs que tenemos en el css para que, al final, se muestre correctamente en pantalla. Los códigos anteriores, así como la hoja de estilos y todo lo necesario, lo tenéis en el archivo zip de la descarga. Más información (en inglés) en la página del autor bxslider.
Bueno, creo que esto es todo, si se me ocurre algo importante que haya dejado en el tintero lo iré incluyendo. Espero que os guste.
Además, según mi criterio, creo que los sliders fotográficos pueden encajar en páginas variadas. Podéis ver esta de mecánica del automóvil y esta otra de excavaciones y movimientos de tierra.
Bueno, vamos al grano. Lo primero, descargaros de aquí todo lo necesario para empezar a funcionar. Lo segundo, dentro de las etiquetas <head> de tu página, colocad el siguiente código:
<head>
<link href="bxslider.css" rel="stylesheet" type="text/css" /> /* en esta linea llamamos a la hoja de estilos de bxslider, cuyo código, si queremos, podemos copiar dentro de nuestra propia hoja */<script type="text/javascript" src="jquery.js"></script> /* aquí llamamos el código principal en javascript de jquery */
<script type="text/javascript" src="jquery.bxSlider.min.js"></script> /* y aquí al código de bxSlider basado en jQuery */
/* lo siguiente sería el llamamiento a la función de bxSlider (los parámetros "mode", "infineteLoop", "speed", etc... son los que tengo predefinidos en la página que os menciné y se pueden modificar o sustituir por otros, seguid leyendo...) */
<script type="text/javascript">
$(document).ready(function(){
$('#slidebx').bxSlider({
mode: 'horizontal',
infiniteLoop: true,
speed: 500,
pause: 8000,
auto: true,
pager: false,
controls: true,
autoHover:true
});
});
</script>
$(document).ready(function(){
$('#slidebx').bxSlider({
mode: 'horizontal',
infiniteLoop: true,
speed: 500,
pause: 8000,
auto: true,
pager: false,
controls: true,
autoHover:true
});
});
</script>
</head>
Tened en cuenta que se distinguen las mayúsculas de las minúsculas, osea, no es lo mismo "autoHover" que "autohover". Esto mismo sirve para, por ejemplo, el nombre de los archivos, no llaméis a "jQuery.js" si lo tenéis guardado como "jquery.js".
Comandos más usados (más, en inglés, en http://bxslider.com/options):
mode: ‘horizontal’, ‘fade’, ‘vertical’. Por defecto horizontal
auto: si es true, pues eso las transiciones son automáticas. Por defecto false.
speed: tiempo de transición en milisegundos. Por defecto 500
infiniteLoop: si es true, pues eso: loop infinito.
pause: tiempo entre una transición y otra en milisegundos
controls: si es true se visualizan los controles anterior y siguiente.
autoHover: si es true, se pausa la presentación al colocar el mouse encima.
width: Ancho del contenedor (en pixels)
prev_text: Texto (link) que se muestra para pasar al elemento anterior
next_text: Texto (link) que se muestra para pasar al próximo elemento
prev_img: Url de la imagen (link) que se muestra para pasar al elemento anterior
next_img: Url de la imagen (link) que se muestra para pasar al próximo elemento
ticker_direction: Dirección del slider (solamente en modo: ‘ticker’)
wrapper_class: class name del contente wrapper generado estomáticamente (para skinear y controlar mejor)
Es recomendable poner el ancho y el alto en las imágenes y funciona mejor si todas son del mismo tamaño. Ejemplo:
<body>
<div id="contenedor">
<div id="contslider">
<div id="fotobox">
<ul id="slidebx"> /* este id debe coincidir con el de el <script> */
<li><img align="left" src="image1.jpg" width="227" height="170" alt=""/>
<p> aqui podemos incluir descripcion</p></li>
<li><img src="image2.jpg" width="227" height="170" alt=""/></li>
<li><img src="image3.jpg" width="227" height="170" alt=""/></li>
<li><img src="image4.jpg" width="227" height="170" alt=""/></li>
</ul>
</div>
</div>
</div>
</body>
Tenemos que jugar con los tamaños de los diferentes contenedores ("<divs>") hasta obtener el efecto deseado. Son muy importantes las medidas (width, eight, margin, padding...) de los divs que tenemos en el css para que, al final, se muestre correctamente en pantalla. Los códigos anteriores, así como la hoja de estilos y todo lo necesario, lo tenéis en el archivo zip de la descarga. Más información (en inglés) en la página del autor bxslider.
Bueno, creo que esto es todo, si se me ocurre algo importante que haya dejado en el tintero lo iré incluyendo. Espero que os guste.
Hola gracias por todo, me sirvio mucho, no lo hubiera podido lograr si su ayuda.
ResponderEliminarMuchas gracias!!!!
ResponderEliminarHola,
ResponderEliminarTengo un problema al utilizar el bxslider.
Llamo a las funciones en el head de mi página.
El script lo introduzco en el main y luego enlazo las imagenes también en el main donde quiero que aparezca.
La imágenes aparecen rotas, es decir no se muestran a pesar de tenerlas en la carpeta imágenes y indicarle la ruta completa al bxslider.
También me aparecen en bullets una debajo de otra.
¿Que puede ocurrir?
Gracias
Muchas gracias... mucho mejor explicado que en varias paginas que habia visitado, especialmente para quien apenas esta empezando en esto del desarrollo web.
ResponderEliminarsaludos
hola una ?? no puedo descargar lo necesario
ResponderEliminar