28 feb. 2011

[PHP] Galería de imágenes en una carpeta

Esta vez os traigo el código para mostrar las imágenes que tengáis en una carpeta de vuestro servidor.
Se divide en 2 scripts:
Uno mostrara la lista de imágenes de forma paginada, es decir, si tenéis mas de X imágenes, se muestran esas X y abajo saldrán los enlaces al resto de paginas.
El otro se encarga de generar las miniaturas (thumbnails en ingles) si la imagen es mas grande que el ancho máximo.
El código esta explicado para que lo podáis adaptar a vuestras necesidades.
Si tenéis alguna duda de como configurarlo/adaptarlo, habéis visto un error o tenéis alguna sugerencia, es bien recibida, que para eso esta la licencia GPL 3 ;)

galeria.php:

<table>
 <tr>
<?php
header('Content-type: text/html; charset=utf-8');
# Galería de imágenes
# (CC) Alfonso Saavedra "Son Link"
# Bajo GPLv3

$path = 'fotos'; # Directorio donde están las imágenes
$limit = 4; # Cuantas imágenes se mostraran por pagina
$limit_file = 5; # Imágenes a mostrar por linea en la tabla
$n = 0;
$desde;
$hasta;
# Comprobamos si es un directorio y si lo es nos movemos a el
if (is_dir($path)){
 $dir = opendir($path);
 # Recorremos los ficheros que hay en el directorio y cogemos solamente aquellos cuya extensión
 # sea jpg, gif y png y la guardamos en una lista
 while (false !== ($file = readdir($dir))) {
  if (preg_match("#([a-zA-Z0-9_\-\s]+)\.(gif|GIF|jpg|JPG|png|PNG)#is",$file)){
   $list[] = $file;
  }
 }
 # Cerramos el directorio
 closedir($dir);
 # Ordenamos la lista
 sort ($list);
 # Contamos el total de elementos en la lista
 $total = count($list);
 $paginas = ceil($total/$limit);
 if (!isset($_GET['pg'])){
  $desde = 0;
  $hasta = $desde + $limit;
 }else if((int)$_GET['pg'] > ($paginas-1)){
  # Si pg es mayor que el total de paginas se muestra un error
  echo "<b>No existe esta pagina en la galería</b><br /><a href='galeria.php'>Volver a la galería</a>";
  die();
 }else{
  $desde = (int)$_GET['pg'];
 }
 # Y generamos los enlaces con los thumbnails
 for ($i=($desde*$limit);($i!=$total) && ($i<($desde*$limit)+$limit);$i++){
  # Comprobamos si existe en la lista una llave con el valor actual de $i para evitar errores
  if(array_key_exists($i, $list)){
   echo "<td><a href='$path/$list[$i]'><img src='thumb.php?img=$path/$list[$i]' /></a><br></td>\n";
   $n++;
   if ($n == $limit_file){
    echo "</tr>\n<tr>\n";
    $n = 0;
   }
  }
 }
}else{
 echo "$path no es un directorio";
}
?>
 </tr>
</table>
<p id="paginas">
<?php
# Generamos un listado de las paginas de la galería
for ($p = 0; $p<$paginas; $p++){
 $pg = $p+1;
 if ($p == $desde){
  echo "$pg ";
 }else{
  echo "<a href ='?pg=$p'>$pg</a> ";
 } 
}?>
</p>
<?php echo "Hay un total de $total imagen(es) en $paginas paginas(s)" ?>

thumb.php
<?php
# Generador de Thumbnails para galerías de imágenes
# (CC) Alfonso Saavedra "Son Link"
# Bajo GPLv3

# Indicamos al navegador que lo que se envía es una imagen en formato jpg
header( "Content-type: image/jpeg" );
if (!empty($_GET['img'])){
 $new_width  = 150; // Tamaño a definir
 
 $img = $_GET['img'];
 # obtenemos las extensiones de los archivos para llamar a la función correspondiente
 $ext = preg_split('/\./', $img);
 if ($ext[1] == 'JPG' || $ext[1] == 'jpg'){
  $image = ImageCreateFromJPEG($img);
 }else if ($ext[1] == 'gif' || $ext[1] == 'GIF'){
  $image = ImageCreateFromGIF($img);
 }else if ($ext[1] == 'png' || $ext[1] == 'PNG'){
  $image = ImageCreateFromPNG($img);
 }
 # Obtenemos el ancho y el alto de la imagen
 $width  = imagesx($image) ;
 $height = imagesy($image) ;
 # Si el ancho de la imagen es igual o menor del indicado en new_width redirigimos directamente a la imagen
 if ($width < $new_width){
  imagedestroy($image);
  header("location: $img");
 }else{
  # En caso contrario se crea el thumbnail
  $new_height = ($new_width * $height) / $width ; // tamaño proporcional

  $thumb = imagecreatetruecolor($new_width,$new_height);

  imagecopyresized($thumb,$image,0,0,0,0,$new_width,$new_height,$width,$height);
  #mostramos la imagen generada
  ImageJPEG($thumb);
  # Y liberamos memoria
  imagedestroy($image);
  imagedestroy($thumb);
 }
}
?>


Variables a modificar:
$path: aquí ponemos la ruta a la carpeta donde están las imágenes
$limit: El total de imágenes a mostrar en cada pagina
$limit_file: numero de imágenes a mostrar en cada fila de la tabla

34 comentarios:

Toni dijo...

Muchas gracias por compartir los script. Me viene fenomenal ya que estoy tratando de hacer algo pareccido. El galeria .php funciona correctamente, pero no logro que funcione el thumb.php. Lo he colocado en la carpeta de las imagenes y también al nivel del galeria.php. ¿ Desde dón de se llama a este archivo?. Lo siento pero no tengo mucha idea de PHP, si eres tan amable de ayudarme.
Un saludo

Son Link dijo...

thumb.php va en la misma carpeta que galeria.php y es invocada por esta cada vez que se va a generar una miniatura, si bien se puede usar de manera externa si se le pasa como parámetro la url de la imagen:
thumb.php?img=/imagenes/images01.png
Y no hay de que, que clase de defensor del Software Libre seria si no lo hiciese XD

Anónimo dijo...

me gusta y funciona perfectamente
ahora como se puede mostrar el nombre de cada imagen debajo de la imagen?

Alfonso Saavedra "Son Link" dijo...

Bastaría con añadir $file[$i] donde quieras que aparezca, eso si, siempre dentro de ese bucle for de lo contrario no funcionara.
En el ejemplo del código seria entre las etiquetas br y /td (no puedo meter html en los comentarios)

Kein "Gran Jefe" dijo...

Me encanto, y funciona genial, disculpa para que aparesca lo meti entre las entiquetas del br y /td pero no aparece nada, el $file[$i] ? sera que me falta algo que agregar?

Alfonso Saavedra Chichon dijo...

Al final de la linea 47, tras el </a> añade el <br />$file[$i]

Anónimo dijo...

a mi no me muestra las imagenes, aparecen, unos iconos de imagenes pero no me las muestras ayuda por favor

Alfonso Saavedra Chichon dijo...

El script muestra las miniaturas, para ver las imágenes a su tamaño real debes de pulsar sobre la miniatura.
Si quieres que muestre la imagen a tamaño real simplemente cambia esto:
<img src='thumb.php?img=$path/$list[$i]' />
por
<img src='$path/$list[$i]' />

Giovanni dijo...

Oye muy bueno el script... te cuento que he implementado varios, la gran ventaja de este es que muestra las fotos mas rapido Felicitaciones!!!
Pero la idea es visualizar unas fotos familiares como se haria para que quedaran organizadas por fecha de mas nueva a mas vieja?

Jordi Martínez dijo...

Estoy intentado usar tus scripts y no me funcona. El resultado, en la página, es el de los típicos cuadritos con cruz roja de cuando no encuentra una imagen. Parece como si no pasara bien el parámentro al thumb.php. Podrías darme alguna idea de por donde buscar el error. Si quieres, en privado, te mando el enlace de mi pàgina para que veas lo que hace.

Saludos y gracias

Juan Gonzalez dijo...

Un millón de gracias Alfonso, me sirvió muchisimo tu trabajo. Espero poder retribuirlo a la comunidad en algun momento. Slds Juan

kissrock dijo...

Oye me gustaria aparte de las miniaturas al darle click me muestre las imagenes en un lightbox??? si es posible hasmelo saber por favor GRACIAS

drackster dijo...


$file[$i]
Esto no funciona para ver el nombre de las imagenes y quisiera que solo se viera el nombre sin la ruta ni el formato de la imagen

ISRAEL JOSUE PARRA ROSALES dijo...

oye no me unciono me muestra unos sustituciones de imagen de erros.... y en el codigo de la galeria que es la variable $_get["bg"]

ISRAEL JOSUE PARRA ROSALES dijo...

soy novato en esto de PHP algun libro o tutorial que me recomienden?

jesus gutierrez dijo...

hola perdona que vuelva a comentar lo mismo que anteriormente han estado comentando pero a mi tampoco me funciona el codigo de los thumbs no se por que sea ya cheque todos los comentarios y eh acomodado bien los archivos los eh checado varias veces pero no entiendo por que no me funciona podrias ayudarme? si quisieras puedes ecribirme a uchi_pon@hotmail.com aunque estare checando aqui en el block por si es que prefieres poner aqui la solucion, por cierto tambien me interesa lo de que se vean en light box

Manuel López dijo...

Yo adapte el código para algo que necesitaba y me funciono a la perfección.
Necesitaba crear galerias a partir de directorios, con miniaturas y que el resultado fuera un lightbox. Solo aplique algunos cambios ya que no necesitaba la paginación. Y lo utilizo con una linea de código que manda a llamar al PHP de la galeria, así que en cada pagina que necesito una galeria, solo paso el parametro de la ruta de la carpeta y me facilita mucho el trabajo.

Gracias!

Alfonso Saavedra Chichon dijo...

Perdonad por no contestar antes.
Voy a ponerme a trabajar en una versión mejoarada del script ya que este tiene un fallo de seguridad ya que desde la url podria acceder a otras carpetas.
En cuanto a las lightbox hay varias en internet.
Cuando lo termine (espero tenerlo en esta semana) lo subire a este blog, así le doy un poco de vidilla.
Sed pacientes ^^

Ricardo dijo...

levaba un dia entero buscando algo así, es muy bueno, funciona perfectamente y rápido sin colapsar el servidor, lo he probado con una carpeta que contenía más de 10000 imagenes y funciona sin problemas.
Un consejo para los que no le funcionan los thumbs, comprobar que habeis escrito bien el nombre del fichero debe ser thumb.php, yo lo llamé thumbs.php y tardé un rato en darme cuenta de que ese era el error.

jesus gutierrez dijo...

hola es extraño yo no eh podido hacerlo funcionar y si probe que el nombre de la carpeta fuera thumb sigo en la espera de el codigo arreglado tambien por lo de el fallo de seguridad eso se me hace quisa aun mas complicado que elmismo php pues desconosco de el tema gracias.

Unknown dijo...

Perdona, yo he implementado tu script perfectamente a lo que necesitaba....sólo una cuestión, puedes llamarme torpe.... jaja, cuando hago click en el índice nº2 de la paginación por ejemplo ya me salta que la pagina no existe...., no se genera la misma pagina automaticamente con el resto de fotos ?, o esq tengo que crear yo alguna otra pagina mas para sacar el resto de resultados !?, no se si me he explicado...pero gracias de antemano.

Alfonso Saavedra Chichon dijo...

Hay una nueva versión del script y uno de los fallos arreglados es ese -> http://sonlinkblog.blogspot.com/2012/12/php-php-folder-gallery.html

Unknown dijo...

muchisimas gracias y enhorabuena, un saludo !

William dijo...

y si quiero q me de de 2 carpetas al tiempo?

ISRAEL JOSUE PARRA ROSALES dijo...

oye una duda quiza es muy ovia la respuesta jeje XDD..
oye el archivo de la galeria.php y thumb.php los pongo asi por separados o los puedo dejar en el mismo archivo???

Roberto Bermejo dijo...

Muchas gracias! Acabo de usarlo y va fenomenal... He cambiado unas pocas lineas para que me muestre también un listado de directorios y pueda entrar a ellos y así cambiar la varibale $path mediante get y de esta forma no solo ver las miniaturas sino navegar por un árbol de directorios.

Anónimo dijo...

buen script carga bastante bien las fotos cuando son varias...

Ronald Augusto Ponte Nube dijo...

Disculpa la ignorancia pero como implemento esto, lo que quiero es que esta galer'ia aparezca en mi web o una pagina.

Anónimo dijo...

no consigo que muestren las fotos hay que modificar el codigo

lucas dijo...

hola, como hago para cambiar la calidad de la imagen??

son_link dijo...

Solo tienes que añadir un nuevo parámetro en la función ImageJPEG de la linea 36 de thumb.php indicando la calidad. Por ejemplo:

ImageJPEG($thumb, 90);

Robinson dijo...

tendra que ver algun codigo con la version de php ??? porque en mi servidor local me funciona en el server de original no !!! que podra ser

pablo dijo...

Puedes poner un ejemplo de los cambios, es interesante. gracias

mellusalex dijo...

Me gustaría que la galería fuera responsive y que tuviera dos flechas a los lados, anterior y siguiente para agilizar su búsqueda, gracias

Publicar un comentario en la entrada

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger