Crear galería de imagenes con paginación en PHP y jQuery

18
16606

En vista de la necesidad de mostrar una serie de fotos de un viaje reciente y sin el deseo de subir mis fotos a Facebook ó al perfil de Hotmail, se me ocurrió desarrollar una útil galería de imágenes con la ayuda de PHP y con la extensión lightBox para jQuery.

El objetivo es mostrar una galería atractiva de fotos sin sufrir mucho para implementar, y me refiero por sufrir al hecho de que muchas librerías para implementar una galería se pasa por una serie de pasos tediosos, empezando nada mas por cambiar el nombre del archivo a un correlativo 1.jgp, 2.jpg … y otras configuraciones.

El objetivo del tutorial es el siguiente: mostrar una galería de fotos, mostrando su previa en pequeño y paginados y luego al darle clic cargarla en tamaño normal. Resultado final.

Para ellos tenemos que hacer lo siguiente:

Paso 1

Crear un directorio donde colocar las fotos y dentro de ésta un directorio donde colocaremos los thumbnails ó las miniaturas, no explicaremos como hacer los thumbnails, quizas pueda ser mas adelante, pero la idea es que tengan el mismo nombre que la foto original. En el caso de nuestro ejemplo es así: la foto va en http://misitio/fotos/viaje/IMG_7854.JPG y su miniatura en  http://misitio/fotos/viaje/mini/mini_IMG_7854.JPG y así para el resto.

Nota: Asumimos para el ejemplo que index.php está en el directorio fotos/ y las fotos están en fotos/viaje/ y los thumbnails en fotos/viaje/mini/.

Paso 2

Buscar la forma de capturar un listado del directorio de las fotos y almacenarlo en un array. Veamos esto en código:

// Directorio del cuál vamos a extraer las imágenes
$path = $_SERVER["DOCUMENT_ROOT"]."/fotos/viaje/";
// Extracción de imágenes. Ver http://www.php.net/readdir
$dh = opendir($path);
$archivos = array();
while (($file = readdir($dh)) !== false) {
if($file != "." && $file != "..") {
if(substr($file, -4) == '.JPG') $archivos[] = $file;
}
}
closedir($dh);
sort($archivos);

En resumidas cuentas, bastará con especificar la ruta completa del directorio donde están alojadas las imágenes. El bucle realizará una inspección de cada archivo con extensión .JPG y se guardará en un array. Es muy importante ordenar el array con sort, así mantendrá el orden como está en el directorio.

Paso 3

Configurar algunos parámetros para la páginación de las imágenes tales como (parte 1): el total de imágenes extraido del total del array, las imagenes a mostrar por página, definir desde que imagen se empezará a mostrar y con cual imagen se terminará dependiendo del número de página. Ya con estos valores determinaremos la paginación (parte 2): primera página, anterior, siguiente y última (usamos la fórmula que anteriormente usamos para paginar consultas MySQL con PHP)  y finalmente (parte 3) la navegación con sus vínculos respectivos.

//parte 1:
$total_imagenes=count($archivos);
$image_a_mostrar=20;
//estos valores los recibo por GET
if(isset($_GET['pag'])){
$imagen_a_empezar=($_GET['pag']-1)*$image_a_mostrar;
$imagen_a_terminar=$imagen_a_empezar+$image_a_mostrar;
$pag_act=$_GET['pag'];
//caso contrario los iniciamos
}else{
$imagen_a_empezar=0;
$imagen_a_terminar=$imagen_a_empezar+$image_a_mostrar;
$pag_act=1;
}

//parte 2: determinar numero de paginas
$pag_ant=$pag_act-1;
$pag_sig=$pag_act+1;
$pag_ult=$total_imagenes/$image_a_mostrar;
$residuo=$total_imagenes%$image_a_mostrar;
if($residuo>0) $pag_ult=floor($pag_ult)+1;
//parte 3: navegacion
echo "<a href=\"./\" onclick=\"Pagina('1')\">Primero</a> ";
if($pag_act>1) echo "<a href=\"?pag=".$pag_ant."\" onclick=\"Pagina('$pag_ant')\">Anterior</a> ";
echo "<strong>Pagina ".$pag_act."/".$pag_ult ."</strong>";
if($pag_act<$pag_ult) echo " <a href=\"?pag=".$pag_sig."\" onclick=\"Pagina('$pag_sig')\">Siguiente</a> ";
echo "<a href=\"?pag=". $pag_ult."\" onclick=\"Pagina('$pag_ult')\">Ultimo</a>";

Ya tenemos entonces los vínculos para la navegación a través de nuestra galería.

Paso 4

Vamos a la parte de JavaScript. Usaremos la extensión lightbox para jQuery esto nos servirá para mostrar la imagen completa al hacer clic en los thumbnails ó miniaturas. Este fragmento lo colocamos en cabecera del documento HTML.

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
$('.slideshow a').lightBox();
});
//]]>
</script>

Paso 5

Finalmente vamos al cuerpo del HTML. Usaremos un bucle para mostrar los thumbnails ó miniaturas, la cantidad a mostrar la especificamos en el paso 3. Recuerden poner en el contenedor ó div donde estarán las miniaturas la clase slideshow para lograr el efecto con lightbox.

<body>
<div class="slideshow">
<?php
while($imagen_a_empezar<=$imagen_a_terminar){
//si se pasa de total de imagenes salir de bucle
if($imagen_a_empezar>=$total_imagenes) break;
?>
<a href="viaje/<?php echo $archivos[$imagen_a_empezar]?>"><img src="viaje/mini/mini_<?php echo $archivos[$imagen_a_empezar]?>" alt="" /></a>
<?php
$imagen_a_empezar++;
}
?>
</div>
</body>

De esta manera tenemos una practica galería hecha con PHP y jQuery. Ver una muestra en acción.

Ya con esto como base, luego podemos cambiarle la apariencia con CSS y añadirle AJAX para el cargado de páginas y lograr una galería muy bonita para nuestras fotos esto lo abarcaremos en un proximo artículo.

18 COMENTARIOS

  1. Se ve exelente el ejemplo, pero no hay un .zip para descargar o aclarar donde va el codigo ofrecido arriba, sería interesante. gracias!!!

  2. Hola. Disculpa, me gustaría saber como es que mandas a llamar las imágenes para el thumbnails. Ya puedo subir las imágenes a mi host y tengo la dirección dónde se guarda. He intentado meter la dirección a una tabla de BD y después jalar dicha dirección por medio de una consulta dinámica, pero hasta ahora no logro hacerlo. Espero puedas ayudarme. Gracias.

  3. muy buenas fotografías las que nos muestran en el ejemplo, esas fotos fueron puestas en la galería por selección o son fotografías propias del autor del tutorial?

  4. hola ribosomatic se ve muy interesante tu aplicacion con ajax, te felicito por tu aporte , me gustaria que puedas subir un archivo zipeado para descargar los archivos y poder aplicar tu aporte en nuestras pc’s…estare muy agradecido…

  5. como puedo hacerlo funcionar e puesto este codigo

    < ?php $path = "archivos/"; $dh = dir($path); while (($file = $dh->read()) !== false) {
    if($file != “.” && $file != “..”) {
    if(substr($file, -4) == ‘.JPG’) $archivos[] = $file;
    echo “$file
    “;
    }
    }
    $dh->close();

    //parte 1:
    $total_imagenes=count($archivos);
    $image_a_mostrar=5;
    //estos valores los recibo por GET
    if(isset($_GET[‘pag’])){
    $imagen_a_empezar=($_GET[‘pag’]-1)*$image_a_mostrar;
    $imagen_a_terminar=$imagen_a_empezar+$image_a_mostrar;
    $pag_act=$_GET[‘pag’];
    //caso contrario los iniciamos
    }else{
    $imagen_a_empezar=0;
    $imagen_a_terminar=$imagen_a_empezar+$image_a_mostrar;
    $pag_act=1;
    }

    //parte 2: determinar numero de paginas
    $pag_ant=$pag_act-1;
    $pag_sig=$pag_act+1;
    $pag_ult=$total_imagenes/$image_a_mostrar;
    $residuo=$total_imagenes%$image_a_mostrar;
    if($residuo>0) $pag_ult=floor($pag_ult)+1;
    //parte 3: navegacion
    echo “Primero “;
    if($pag_act>1) echo “Anterior “;
    echo “Pagina “.$pag_act.”/”.$pag_ult .”“;
    if($pag_act< $pag_ult) echo " Siguiente “;
    echo “
    Ultimo“;
    ?>

    y no consigo la paginacion
    puse 5 imagenes a mostrar por pagina y la mustra todas en una sola

  6. Bueno… sirve bien… aunque tengo una duda… Si la variable "$image_a_mostrar" es igual a 20; porque se muestran 21 imagenes?… Bueno eso lo corrigo poniendo el valor a 19…. jejeje… Y me gustaría saber como usar ajax en la paginacion y asi recargar el area de las fotos y no recargar toda la pagina… Saludos.

  7. Bueno… sirve bien… Nadamas que tengo una dudita… Si la variable "$image_a_mostrar" es de 20, porque en el ejemplo te muestra 21 imagenes?… Bueno eso lo corrigo poniendo el valor a 19… pero no se a que se debe que ponga una de mas… Y la otra es como utilizar ajax para la paginación y así no tener que actualizar toda la pagina sino solo el area de las imagenes… como un <div>… Buen aporte.

    Saludos.

Comments are closed.