SLIDER: de imagenes sencillo para blogger

  • octubre 12, 2013

Bueno os dejo este Slider muy sencillo y que seguro hace el apa??o a m??s de uno, siempre con los mejores trucos para blogger desde trucosblogs.com

Ese c??digo que despu??s veremos y una sucesi??n de im??genes simples metidas dentro de una caja, con un contenedor general com??n, nos dar??a este resultado:


1. Instalaci??n JavaScript necesario


Por empezar desde cero, si no tenemos jQuery primero a??adimos esta l??nea justo despu??s de }]]></b:skin> para cargar esta conocida librer??a:

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js’ type=’text/javascript’/>


Una vez seguros de que tenemos la librer??a en nuestra plantilla, a continuaci??n de esa misma l??nea a??adimos lo que hace que la serie de im??genes funcionen como slider:

<script type="text/javascript">//<![CDATA[
$(function(){
$('#slider div:gt(0)').hide();
setInterval(function(){
$('#slider div:first-child').fadeOut(0)
.next('div').fadeIn(1000)
.end().appendTo('#slider');}, 4000);
});
//]]></script>


Podemos guardar los cambios en la plantilla porque eso es todo. Es simple pero ver??is que funciona y hace lo que tiene que hacer. Ahora ya s??lo tenemos que poner las im??genes d??nde queremos que aparezcan, de la manera que veremos a continuaci??n.

2. Crear el slider


Con esto anterior en nuestra plantilla (aunque nada impide ponerlo directamente en un gadget, en una p??gina o incluso en una entrada como veis aqu??) ya podremos crear un visor como el que hab??is visto arriba. S??lo tenemos que usar esta estructura HTML para a??adir las im??genes:

<div id="slider">
<div><img src="URL_IMAGEN1"/></div>
<div><img src="URL_IMAGEN1"/></div>
<div><img src="URL_IMAGEN1"/></div>
</div>



No s?? c??mo lo veis pero ya est?? todo lo necesario.

Para m?? esto es bastante ligero y eficiente, mucho m??s que la mayor??a de librer??as que se usan quiz??s demasiado habitualmente.

Ajustes


Los tres ??ltimos n??meros del plugin permiten ajustar algunas cosillas. Todos van expresados en milisegundos (4000 = 4 segundos)

  • fadeOut(0): Tiempo en desaparecer la imagen saliente
  • fadeIn(1000): Tiempo en aparecer la imagen entrante
  • (‘#slider’);},4000): Tiempo de permanencia de cada imagen


C??mo funciona


Y para los curiosos que quieren aprender cosas…

$(‘#slider div:gt(0)’).hide();
Con gt(x) seleccionamos todos los div a partir del n??mero x. En este caso 0 es el primero, as?? que lo que hacemos con esta l??nea es esconder (hide) todas las cajas excepto la primera, que ser?? la imagen inicialmente visible.

setInterval(function(){ [lo que haremos] }, 4000);
Necesitamos reiterar una serie de cosas cada cierto tiempo y eso lo hacemos con setInterval, indicando el tiempo de retardo entre cada serie.

$(‘#slider div:first-child’).fadeOut(0)
Dentro de cada uno de esos intervalos hacemos desaparecer (fadeOut) la primera caja (div:first-child) que haya en la relaci??n de im??genes…

.next(‘div’).fadeIn(1000)
… y hacemos que la siguiente caja (next) aparezca poco a poco (fadeIn).

.end().appendTo(‘#slider’);
Por ??ltimo tomamos la que hasta ese momento es la primera imagen y la situamos al final (appendTo) de la «lista».

end() resetea el contador de elementos que hicimos avanzar con next(). De esa manera, el primer hijo que antes hicimos desaparecer es el que enviamos al final de la pila y no la imagen que ahora tenemos visible. Para el siguiente ciclo la que hasta este momento era visible (que era la segunda) ser?? la primera y por tanto la que haremos desaparecer.

Referencias sobre las funciones usadas:


Variantes y personalizaci??n


Como hab??is visto no es necesario CSS para que el slider funcione, pero si lo usamos podremos cambiar su aspecto, permitir el uso de im??genes de diferente tama??o, incluir r??tulos e incluso mejorar la transici??n. A continuaci??n algunas ideas.

Cuesti??n de cent??metros

No sabe hablar, pero se fija mucho


Limitar el tama??o del contenedor general y evitar el desbordamiento para que las im??genes m??s grandes no ocupen m??s espacio. Y ya que estamos le ponemos unas esquinas redondeadas, un borde y lo centramos. Elposition:relative nos vendr?? bien para otra cosa que haremos despu??s.

#slider {
position: relative;
overflow: hidden;
width: 500px;
height: 300px;
border:10px solid #333;
border-radius: 40px;
margin: 0 auto;
padding: 0;
}


Si situamos las cajas padre de las im??genes de manera absoluta con respecto al contenedor general (para eso pusimos antes el relative), estas se dispondr??n solapadas una encima de otra. De esta manera al fadeOutle podremos dar un tiempo para que sea «visible» (hemos cambiado el 0 por un 1000) y la transici??n entre im??genes m??s suave. Es esa mezcla de im??genes que se produce en la segunda demo.

En las im??genes, el max-width nos sirve para que siempre ocupen todo el ancho y el min-height para que aunque sean deformadas, no se nos quede hueco por debajo cuando sean de menos de 300px de alto.

#slider > div {
position:absolute;
top:0;
left:0;
}
#slider img {
width:100%;
min-height:300px;
margin:0;
padding:0;
border:0;
}


Y ya si queremos a??adir otros elementos sobre las im??genes (en este ejemplo un texto), s??lo tendremos que etiquetarlos con un span o como p??rrafo (p) y en el CSS posicionarlos de manera absoluta, ubic??ndolos en el lugar exacto d??nde queramos con top/bottom – left/right.

#slider p {
position: absolute;
bottom: 30px;
left: 0;
display: block;
width: 400px;
height: 24px;
margin:0;
padding: 5px 0;
color: #eee;
background: #990000;
font-size: 22px;
line-height:22px;
text-align:center;
}


El marcado en el HTML para esto ??ltimo, incluyendo adem??s un enlace sobre la imagen, ser??a tal que as??:

<div id=»slider»>
<div><a href=»URL_ENLACE1″><img src=»URL_IMAGEN1″ /></a><p>TEXTO1</p></div>
<div><a href=»URL_ENLACE2″><img src=»URL_IMAGEN2″ /></a><p>TEXTO2</p></div>
<div><a href=»URL_ENLACE3″><img src=»URL_IMAGEN3″ /></a><p>TEXTO3</p></div>
</div>

No Comments Found