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

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.

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.

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.