Slider de imágenes con diferentes efectos (JQuery).

Vamos a realizar un pequeño slider de transición de imágenes ,las cuales tendremos opciones en la parte de abajo para hacer clic, cuando suceda esto cada botón tiene una animación diferente, de igual manera tendremos un listón que despliega una descripción de la fotografía.

Paso 1.

Necesitamos agregar la librería de JQuery, ponemos la siguiente línea de código para cargarla de Internet.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>

Paso 2.

Para que funcione nuestro programa JQuery necesitamos abrir un script e iniciar de la siguiente manera:

<script type=”text/javascript”>                                                                                                            

$(document).ready(function(){ Aquí van todas nuestras animaciones})   </script>

Paso 3. Programación JQuery. Funcionamiento del código.

Detección si se hace clic:

Para cada una de las animaciones primero revisamos si se da clic para eso utilizamos la siguiente función. $(‘.nuestraboton’).click(function({ “aquí va nuestras acciones si se dio clic”}));

Otras funciones

$(‘.formato .imagenes:first’).    Cargamos el contenedor de las clases (formato), accedemos al primer div que encuentre con la clase llamada imágenes (.imagenes:first);

fadeOut(100). Desvanece la imagen en 100 ms.

next(‘.imagenes’).  Continua con la transición, avanza al siguiente div de clase imágenes.

fadeIn(1000).    Empieza a aparecer poco a poco en 1000 ms.

.end().appendTo(‘.formato’); En otra instrucción que utilizaremos mandamos lo que fue la primera imagen al final, es decir como una cola circular, volvemos a formar la imagen es lo hace la instrucción .appendTo(), es sucede cada que se da un clic.

end().  Lo que hace en realidad es resetear el conteo que hicimos avanzar con la instrucción next y obviamente por que se realizo clic.

slideUp(0)  Oculta el elemento que le estemos indicando a 0ms.

slideDown(1000)  Despliega el elemento, con un movimiento hacia abajo en 1000ms.

Animate

animate().  Lo que hace es dar animaciones por medio de CSS, cambiando sus propiedades por lapsos de tiempo.

$(‘.ClaseAnimar’).animate({propiedadCSS: valor}, tiempo);

En las 4 animaciones tenemos animate():

$(‘.por’). La clase por nos maneja el listón de la descripción.

$(‘.imagenes’). La clase donde están contenidas las imágenes.

En la animación 1:

$(‘.boton1’).click(function(){
$(‘.formato .imagenes:first’).fadeOut(100) A partir de la imagen que encuentra en la primera posición la desvanece en 100ms 
.next(‘.imagenes’).fadeIn(1000).end().appendTo(‘.formato’);  Avanza a la siguiente imagen y la aparece en 1000ms, y manda al final la imagen
$(‘.por’).animate({width:0,fontSize:0},0);  En 0ms, el ancho lo deja en 0
$(‘.por’).animate({width:500},1000);         En 1000ms, el ancho lo incrementa a 500px
$(‘.por’).animate({fontSize:30},100);         En 100ms el tamaño de la fuente lo incrementa a 30px.
});

En la animación 2:

$(‘.boton2’).click(function(){
$(‘.formato .imagenes:first’).fadeOut(1000) A partir de la imagen que encuentra en la primera posición la desvanece en 1000ms 
.next(‘.imagenes’).slideUp(0)                            Avanza a la siguiente imagen y la sube en 0ms,
.slideDown(1000).end().appendTo(‘.formato’);  Baja la imagen en 1000ms y la manda al final,
$(‘.por’).animate({bottom:0,fontSize:0},0);    La iniciamos con bottom en 0 y letra en 0, esto lo realiza en 0 ms.
$(‘.por’).animate({bottom:20},1000);             Incrementamos bottom en 20, en 1000ms.
$(‘.por’).animate({fontSize:30},100);         Incrementamos el tamaño de la letra en 100ms.

});

En la animación 3:

var x= $(‘.formato’).width(),     Nos regresa el valor de el ancho de el contenedor.
x2= $(‘.formato’).height();        Nos regresa el alto del contenedor.
$(‘.boton3’).click(function(){
$(‘.formato .imagenes:first’).fadeOut(1000) A partir de la imagen que encuentra en la primera posición la desvanece en 1000ms
.next(‘.imagenes’).fadeIn(0).end().appendTo(‘.formato’); Avanza a la siguiente imagen y la aparece en 0ms, y manda al final la imagen
$(‘.imagenes’).animate({width:0,height:0},0);  Iniciamos el ancho y alto en 0, en 0 ms.
$(‘.imagenes’).animate({width:x,height:x2},1000);   Incrementamos al ancho y alto del contenedor.
$(‘.por’).animate({fontSize:0,top:0},0);         Ponemos el listón en 0 de la fuente y 0 en top, en 0 ms.
$(‘.por’).animate({top:307},1000);                Incrementamos el top en 307px, en 1000ms.
$(‘.por’).animate({fontSize:30},100);});         Incrementamos la fuente en 100ms.

Animación 4

$(‘.boton4’).click(function(){
$(‘.formato .imagenes:first’).fadeOut(1000)  A partir de la imagen que encuentra en la primera posición la desvanece en 1000ms
.next(‘.imagenes’).fadeIn(0).end().appendTo(‘.formato’); Avanza a la siguiente imagen y la aparece en 0ms, y manda al final la imagen

$(‘.imagenes’).animate({height:’400px’,opacity:’0.4′},1000);   Aumentamos el alto a 400px, y opacidad de 0.4, en 1000ms.
$(‘.imagenes’).animate({width:’1500px’,opacity:’0.8′},1000);  Aumentamos el ancho a 1500px y opacidad 0.8, en 1000ms.
$(‘.imagenes’).animate({width:x,height:x2},1000);                  Los regresamos al tamaño original en 1000ms.
$(‘.por’).animate({fontSize:0,width:0},0);                       La letra y ancho los reducimos a 0px, en 0 ms.
$(‘.por’).animate({width:500},2000);                              El ancho incrementa en 500px, en 2000ms.
$(‘.por’).animate({fontSize:30},100);});                          Incrementa la letra en 100ms

Paso 4. Programación CSS

Recordemos que nuestros estilos se crean así:

<style type=”text/css”> .unaClase{estilos:valor;}</style>

Código

body{ margin:0;}  //Margen del body en 0

.imagenes{        //CSS de imagenes
width:1035px;
height:375px;
position:relative; }

.formato{         //CSS de contenedor
width:1035px;
height:375px;
position:relative;
overflow:hidden;
margin:0 auto;
border-radius:10px 10px 10px 10px;}

.marco{    //Marco del contenedor
border:5px #CCCCCC solid; } 

.parabotones{   //Contenedor botones
width:1045px;
height:60px;
margin:0 auto;
}

.boton{               //CSS para botones
position:relative;
font-family:Tahoma, Geneva, sans-serif;
font-size:0.7em;
color:#FFF;
width:150px;
height:30px;
border:2px solid #CCCCCC;
background-color:maroon;
padding:5px;
opacity: 0.6;
border-radius:10px 10px 10px 10px;
line-height:20px;
text-align:center;
margin-top:0px;}

.boton1{float:right; cursor:pointer;}
.boton2{float:right; cursor:pointer;}
.boton3{float:right; cursor:pointer;}
.boton4{float:right; cursor:pointer;}
.por {  //CSS Listón de descripción de imágenes
position: absolute;
bottom:10px;
display:block;
opacity: 0.6;
width: 500px;
height: 50px;
margin:0;
padding: 5px 0;
color: #eee;
border-bottom:2px solid #CCCCCC;
border-top:2px solid #CCCCCC;
border-right:2px solid #CCCCCC;
background-color:maroon;
font-size: 30px;
line-height:40px;
text-align:center;
border-radius:0px 10px 10px 0px;}

Paso 5. HTML

<body>

<div class=”marco formato”>
<div class=”imagenes” ><img src=”foto1.jpg” width=”100%”/><p class=”por”>LAGO </p></div>
<div class=”imagenes” ><img src=”foto2.jpg” width=”100%”/><p class=”por”>LAGO FRIO </p></div>
<div class=”imagenes” ><img src=”foto3.jpg” width=”100%” /><p class=”por”>MONTAÑAS </p></div>
<div class=”imagenes” ><img src=”foto4.jpg” width=”100%”/><p class=”por”>VISTA A LA ISLA </p></div>
<div class=”imagenes” ><img src=”foto5.jpg” width=”100%”/><p class=”por”>ISLA </p></div>
<div class=”imagenes” ><img src=”foto6.jpg” width=”100%”/><p class=”por”>PUENTE CON VISTA AL LAGO </p></div>
<div class=”imagenes” ><img src=”foto7.jpg” width=”100%”/><p class=”por”>PECES </p></div>
<div class=”imagenes” ><img src=”foto8.jpg” width=”100%”/><p class=”por”>CON VISTA AL LAGO </p></div>
</div>
<div class=”parabotones”>
<div class=”boton boton1″> Clic siguiente efecto1</div>
<div class=”boton boton2″> Clic siguiente efecto2</div>
<div class=”boton boton3″> Clic siguiente efecto3</div>
<div class=”boton boton4″> Clic siguiente efecto4</div>
</div>
</body>

De esta manera construimos un sencillo Slider, con diferentes animaciones.