Crear galería de imagenes con paginación en PHP y jQuery de RibosoMatic RibosoMatic,, el Viernes, 15 de octubre de 2010, 4:03
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 para jQuery 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. 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 fo to va en http://misitio/fotos/viaje http://misiti o/fotos/viaje/IMG_7854 /IMG_7854.JPG .JPG y su miniatura en http://misitio http://misitio/fotos/viaje/ /fotos/viaje/mini/mini_IMG_785 mini/mini_IMG_7854.JPG 4.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 l a 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): eltotal 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 "
Primero "; if($pag_act>1) echo "
Anterior "; echo "
Pagina ".$pag_act."/".$pag_ult .""; if($pag_act<$pag_ult) echo "
Siguiente "; echo "
Ultimo"; 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 type="text/javascript" src="js/jquery.lightbox0.5.min.js"> <script type="text/javascript"> //
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.
=$total_imagenes) break; ?>
">
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.
