jQuery: Como hacer fácil un Slide de imagenes con: PHP jQuery y MySQL

Hace un tiempo necesitaba incluír una galería de imagenes dinámica en una página.

Encontré un montón de aplicaciones jQuery con php muy funcionales, gratuitas y realmente muy bien desarrolladas, pero que no se adaptaban a lo que necesitábamos.

Era algo más bien sencillo, de programación rápida y que pudiera adaptarse a facilmente al sitio que ya teníamos desarrollado.

Así fué como salió este código realmente muy corto y limpio que mezcla un poco de PHP y otro de jQuery para leer una base MySQL y armar este pase de fotos.

A continuación te pongo el ejemplo que usamos como base para armar nuestra galería comentándolo línea a línea. A ver que te parece:

En primer término, este ejemplo se desarrolla con una base de datos propia en la que armé un listado de imagenes que estan en el servidor. El campo "avatar" guarda la ruta de la imagen en el servidor web.

Para este ejemplo supongamos que en la base de datos tenemos 17 imagenes cargadas.

Llamo al jquery donde sea que lo tenga

<script type="text/javascript" src="js/jquery.js"></script>


Comienzo con un PHP que va ahacer varias cosas

<?php


Para saber cual será la primer imagen que voy a mostrar, me fijo si pasé por URL un número de imagen. Si no pasé nada por la URL, el valor inicial será 0. (este número representará una posición dentro de un array).

if(isset($_GET["img_actual"])){
     $img_actual=$_GET["img_actual"];
}else{
     $img_actual=0;
}


Voy a crear un array y le voy a agregar en cada posición un registro de la base de datos. Por ejemplo: "0=>'imagen/tito.jpg'".

Creo el array

$arr=array();


Llamo a mi archivo de conexión a la DB y me conecto. Esta parte va a variar en función de tu forma de conectarte a la base.

include("conex/conectar.php");
$link=Conectarse();


Realizo la consulta MySQL y mientras recorro los campos los voy incorporando en el array

$result=mysql_query("select * from de_usuarios",$link);
while($row = mysql_fetch_array($result)){
     $avatar=$row["avatar"];
     $arr[]=$row["avatar"];
}


Voy a guardar una variable que me diga cuál es el último valor del array (en este ejemplo 16)

$img_ult=sizeof($arr)-1;
?>


Ahora, con jQuery vamos a desarrollar el código para pasar las imagenes. Nuestro slide funcionará de la siguiente manera:
tiene un botón de "retroceder", una imagen central y un botón de "avanzar". Cuando se presione uno de los botones (retroceder o avanzar) la imagen cambiará por la anterior o la siguiente en la lista del array.

<script type="text/javascript">
$(function(){


Creo las siguientes variables en jQuery a partir de los datos que recopilé en el PHP:
- v_ult: le ponemos, mediante PHP, el valor guardado. Será la variable que contenga la última posición del array. Esta variable la usaremos para definir el comportamiento del Slide al llegar a la última imagen.
- v_act: le ponemos mediante PHP, el valor guardado. Nos ayudará a saber cual será la primer imagen para mostrar y, a partir de ella, definir la navegación
- v_pre: Será el valor anterior en el array de la imagen que estamos viendo.
- v_sig: Será el valor siguiente en el array de la imagen que estamos viendo.
- itemA: Esta variable contendrá el nombre de Clase que estamos viendo. (.item1, .item2, etc).
- itemP: Variable que contendrá el nombre de la clase que mostraremos cuando presionemos el botón "Previa" (<).
- itemS: variable que contendrá el nombre de la clase que mostraremos al presionar el botón "siguiente" (>).

v_ult=<?php echo $img_ult ?>;
v_act=<?php echo $img_actual ?>;
v_pre=v_act-1;
v_sig=v_act+1;
itemA=".item"+v_act;
itemP=".item"+v_pre;
itemS=".item"+v_sig;


Por medio de un bucle FOR oculto las DIVS que contengan las imagenes del array (recordemos que pondré cada imagen dentro de un div, cada div tendrá una clase única cuyo nombre coincide con su posición en el array (ej: .item0, .item1, etc).

for(i=0;i<v_ult+1;i++){
     ocultar=".item"+i;
     $(ocultar).hide();
}


Como oculté todos los divs de imagen, ahora tengo que mostrar la primer imagen que estaba prevista (porque la traje mediante URL o porque la definí en la posición 0.

$(itemA).show();


Si la imagen que estamos viendo es la primera del listado, voy a ocultar el botón "anterior". En cambio, si la imagen es la última del listado, voy a ocultar el botón "Siguiente".

if(v_act==0){
     $(".itemBP").hide();
}
     if(v_act==v_ult){
     $(".itemBS").hide();
}


Ahora que terminamos de establecer el estado inicial de nuestra galería, vamos a darle la función a los botones de previo y siguiente.

Los botónes serán dos divs que tienen las clases ".itemBP" (por botón previo) y ".itemBS" (por botón siguiente).

Para el botón previo (.itemBP) voy a indicar:
- Que la imagen actual (itemA) se oculte con un fadeOut (se desvanece).
- Que la imagen previa (itemP) aparezca con fadeIn.
- Que el valor actual v_act sea el de la imagen que ahora esta apareciendo
- Que el valor siguiente v_sig sea el valor de la imagen que acabo de borrar (porque retrocedimos un lugar)
- Que, si el valor actual es mayor a 0 (la primera imagen del listado) cambie el valor de "proxima" a -1. Pero cuando el valor actual llegue a 0 voy a borrar el botón Previo para que no pueda seguir decreciendo (ya que no hay nada despues de 0).

$(".itemBP").click(function(event) {
     event.preventDefault();
     $(itemA).fadeOut();
     $(itemP).fadeIn();
     v_act=v_act-1;
     v_sig=v_act+1;
     itemA=".item"+v_act;
     itemS=".item"+v_sig;
     $(".itemBS").show();
     if(v_act>0){
          v_pre=v_act-1;
          itemP=".item"+v_pre;
     }else{
          $(".itemBP").hide();
     });


Para el botón Siguiente (.itemBS) voy a indicar
- Que la imagen actual (itemA) se oculte con un fadeOut (se desvanece).
- Que la imagen siguiente en el array (itemP) aparezca con fadeIn.
- Que el valor actual v_act sea el de la imagen que ahora esta apareciendo
- Que el valor siguiente v_prev sea el valor de la imagen que acabo de borrar (porque retrocedimos un lugar)
- Que, si el valor actual es menor que la última posición del array ( (la primera imagen del listado) cambie el valor de "proxima" a -1. Pero cuando el valor actual llegue a 0 voy a borrar el botón Previo para que no pueda seguir decreciendo (ya que no hay nada despues de 0).

$(".itemBS").click(function(event) {
     event.preventDefault();
     $(itemA).fadeOut();
     $(itemS).fadeIn();
     v_act=v_act+1;
     v_pre=v_act-1;
     itemA=".item"+v_act;
     itemP=".item"+v_pre;
     $(".itemBP").show();
     if(v_act<v_ult){
          v_sig=v_act+1;
          itemS=".item"+v_sig;
     }else{
          $(".itemBS").hide();
     }
});
});


Aquí termina nuestro script para hacer el slideshow de imagenes

</script>


Etiquetas que van a contener todo el slide:
contenedor de toda el slideshow

<div>


Contenedor para el botón Previo

<div style="float:left;width:30px;height:55px;text-align:center;">


El botón previa propiamente dicho

<div class="itemBP" style="cursor:hand;pointer:hand;"> - </div>


Cierro el contenedor del botón previo

</div>


DIV contenedor para todas las imagenes

<div style="float:left;width:55px;height:55px;text-align:center;">


Mediante PHP recorremos el array y creamos un div, con clase personalizada, en cada div guardamos una imagen

<?php
for($i=0;$i<sizeof($arr);$i++){
     echo'<div class="item'.$i.'" style="width:50px;height:50px;position:absolute;"><img src="imagen/'. $arr[$i] .'"width=50px height=50px /></div>';
}
?>


Cierro el contenedor de imagenes

</div>


Contenedor para el botón siguiente

<div style="float:left;width:30px;height:55px;text-align:center;">


El botón siguiente propiamente dicho

<div class="itemBS" style="cursor:hand;pointer:hand;"> + </div>


Cierro el contenedor del botón

    </div>


Cierro el contenedor general

</div>


Acá termina nuestro ejemplo. Espero que te haya funcionado y sirva como una buena base para tu trabajo.
Te dejo un link para descargar el archivo de este ejemplo.

Nota: Si este ejemplo te sirvió, date una vuelta por los enlaces patrocinados que seguro ahí encontrarás más información útil.