5/05EasySlider 1.5 – Slider con jQuery
Por: rogeliorabbit @ 10 meses, 16 dias antes. → Tags: Diseño, Diseo Web, javascript, Tutoriales
Necesitaba crear un slider de imagenes para un proyecto y buscando me encontre con EasySlider, un plugin para jQuery que nos permite rotar imagenes (o texto) horizontal o verticalmente de una forma muy facil y ocupando poco espacio (solo pesa 5kb + los 54kb de jQuery).
El creador de este plugin es Alen Grakalen, de css globe, y en uno de sus blog podemos ver integrado con CSS y funcionando perfectamente este slider.
Con la ultima version podremos:
- auto slide
- slide continuo
- botones de “ir al primero” e “ir al ultimo”
- slide vertical
- multiples sliders en una pagina
- y mas cosas
Demos:
- basic default non styled demo
- styled demo with default settings
- non styled demo with vertical scroll and visible “go to first” and “go to last” buttons
- styled demo with auto scroll and continuous sliding
- styled demo with multiple slider, image and content slider, with different settings (top one has auto slide while bottom one doesn’t)
Para usar este plugin tendremos que hacer lo siguiente:
Agregar las llamadas de los .js en el header:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider();
});
</script>
Aplicar los estilos:
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1{
font-size:180%;
font-weight:normal;
}
h2{
font-size:160%;
font-weight:normal;
}
h3{
font-size:140%;
font-weight:normal;
}
img{border:none;}
pre{
display:block;
font:12px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
width:500px;
}
/* Easy Slider */
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:696px;
height:241px;
overflow:hidden;
}
span#prevBtn{}
span#nextBtn{}
/* // Easy Slider */
Y el contenido que queremos poner en el slider:
<div id="slider">
<ul>
<li><a href="#"><a href="images/01.jpg" rel="lightbox" title="Descripcion" ><img src="images/01.jpg" alt="Descripcion"/></a></a></li>
<li><a href="#"><a href="images/02.jpg" rel="lightbox" title="Descripcion" ><img src="images/02.jpg" alt="Descripcion"/></a></a></li>
<li><a href="#"><a href="images/03.jpg" rel="lightbox" title="Descripcion" ><img src="images/03.jpg" alt="Descripcion"/></a></a></li>
<li><a href="#"><a href="images/04.jpg" rel="lightbox" title="Descripcion" ><img src="images/04.jpg" alt="Descripcion"/></a></a></li>
<<li><a href="#"><a href="images/05.jpg" rel="lightbox" title="Descripcion" ><img src="images/05.jpg" alt="Descripcion"/></a></a></li>
</ul>
</div>
Via| css globe
Votar
Sigue BlumbaBlog en Twitter
lectores
AyudaWordPress
Viciao2k3
aNieto2K
RabRoss
27 Mayo, 2009 en 0:32
Este script, como otros sliders, no sirve cuando se quiere insertar nodos dinámicamente, ó, usando
$.get(“images.html”, function(data) { jQuery(data).appendTo(‘#slider’); });
¿Conocen algún script que si lo permita?
Saludos,
Lorenzo
27 Mayo, 2009 en 1:27
lorenzo, que te refieres a que recoja imagenes automaticamente de una carpeta? si es eso ahora no se de ninguno, pero si lo encuentro o doy con la solucion de implementarlo hare un post para explicarlo.
saludos
27 Mayo, 2009 en 15:23
Gracias por tu interés y contestación. Más bien cargar un archivo de texto donde este el código … para inscrustárselo al . Esto es muy útil cuando uno tiene una aplicación que almacena y categoriza las imagenes separado del slider que solo despliega las últimas recibidas.
30 Mayo, 2009 en 17:26
lorenzo, en webmuch hicieron un tutorial para crear un slide utilizando jquery y php gd library. igual te sirve para lo que tu quieres:
parte 1
parte 2
11 Junio, 2009 en 23:12
se puede usar este slider con thumbnails adentro que se abran en lightbox? le intente con coda slider pero no acepta otro script hace que ambos se cancelen, me urge un slider que permita usar lightbox tmb