Crear una galería de imágenes utilizando paginación PHP y jQuery. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Internet PHP

¡votar!

Crear una galería de imágenes utilizando paginación PHP y jQuery

Hay ocasiones en la que tenemos una gran cantidad de fotos y queremos crear una galería con esas fotos, pero para dar una mejor funcionalidad a los usuarios, podíamos paginar las miniaturas, para que se pueda ir a la que se desea de una forma más rápida.

Vamos a ver la forma de crear una galería de imágenes utilizando lightBox para jQuery y una paginación en la que utilizaremos PHP para crearla.

Lo primero que hay que hacer es almacenar las imágenes dentro de una carpeta y las miniaturas de estas dentro de otra carpeta para mostrarlas al principio. La idea es que las miniaturas contengan el nombre de la foto normal para que así sea más fácil su utilización.

Una vez que tengamos las carpetas con las imágenes, lo siguiente será hacer una función que nos proporcione la funcionalidad de obtener todas las imágenes de la carpeta y almacenarlas en un array.

// 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);

Para resumir como trabaja la función, lo que hacemos es indicarle la ruta donde está almacenado las imágenes y vamos comparando los archivos que hay dentro para que aquellos que tengan extensión JPG, sean añadidos a un array. Al final lo ordenamos con el método Sort para que se muestren tal y como están almacenados en el directorio.

Lo siguiente será indicar el número de imágenes por página, obtener el número de páginas para poder desplazarnos por ellas y construir los enlaces de la paginación.

//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>";

El siguiente paso será la utilización de código JavaScript, para cuando se pulse en una miniatura, que se vea en grande. Para ello utilizaremos el plugin lightbox para jQuery.

<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>

Por último, lo que vamos a ver, es la creación de la parte correspondiente al HTML, donde se mostrará las miniaturas. Para ello recorreremos el bucle de las imágenes y mostraremos las miniaturas.

<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>

Pueden ver su funcionamiento en el siguiente enlace.

Vía: Ribosomatic