Galería de fotos con imágenes en una carpeta, en PHP y JavaScript

En muchos casos necesitamos mostrar en una página varias fotos o imágenes, sin tener que recurrir a ningún plugin ni librería ostentosa o sofisticada, que afecte la velocidad de carga de la página.
Comparto tres métodos para insertar en una página una galería de fotos para móviles o computadoras, que sea adaptable y que obtenga las imágenes desde una carpeta, a la que se pueden en cualquier momento agregar o quitar archivos.
Uno de los métodos es con PHP, otro con JavaScript y JQuery y el último con JavaScript puro, sin dependencias.

Galería de fotos en PHP

PHP es el método ideal para crear galerías de fotos.
En este artículo comparto dos de ellos.

Galería simple de fotos con PHP

La primera de ellas es la más simple y sencilla.
Solo necesitamos agregar las fotos a un directorio, sin orden, ni requisito de darles un nombre especifico.

<?php
foreach (glob("fotos/*.jpg") as $filename) { 
    echo "<img src='$filename'><br> "; 
}
?>

En este caso la carpeta que contiene las imágenes llamada: "fotos", está situada en el mismo directorio. Solo se cargan las fotos con la extensión: jpg.

---

Galería de imágenes con PHP para varias extensiones

Usa el siguiente script para crear una galería de fotos, que carga todas las imágenes con las extensiones jpg, jpeg, gif, png y bmp, situadas en el directorio, cuya ruta se especifique en la variable "folder_path".
Las imágenes serán escritas en el lugar exacto donde se inserte el script.
El estilo de las imágenes se puede establecer con la clase "tfoto".

<?php
$folder_path = '../img/ejemplos/'; 
$num_files = glob($folder_path . "*.{JPG,jpeg,gif,png,bmp}", GLOB_BRACE);
$folder = opendir($folder_path); 
if($num_files > 0){
 while(false !== ($file = readdir($folder)))  {
  $file_path = $folder_path.$file;
  $extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION));
  if($extension=='jpg' || $extension =='png' || $extension == 'gif' || $extension == 'bmp') {
   ?>
    <img class="tfoto" src="<?php echo $file_path; ">
     <?php
  }}}
closedir($folder);
?>   

A continuación se puede comprobar un grupo de imágenes que cargan en esta página, usando este método.
Son completamente adaptables y cargan solo al desplazarnos hasta su ubicación, por lo que no afectan el rendimiento, ni la velocidad de carga.

Galería de fotos con JavaScript y JQuery

Este método requiere cargar la librería de JQuery, para poder usar Ajax para conocer los archivos contenidos en la carpeta que se especifique.
Se escriben todas las imágenes que se encuentren en dicho directorio, con las extensiones: jpeg, jpg, png y gif.
Es necesario crear un contenedor DIV exactamente en el lugar donde deseamos mostrar las imágenes.

<div id="fotos1"></div>
<script>
var folder = "../img/ejemplos/";
$.ajax({
    url : folder,
    success: function (data) {
        $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpe?g|jpg|png|gif)$/) ) { 
                $("#fotos1").append( "<img src='"+ folder + val +"'><br>" );
            } 
        });
    }
});
</script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   

Presiona el siguiente botón para cargar en esta página la galería de ejemplo creada con este método.
Mostrar galeria
Ocultar galeria

Galería de fotos simple con JavaScript, sin dependencias

En el siguiente método se cargan las imágenes del directorio señalado, pero solo las que poseen un formato determinado y una extensión de archivo que se establece.
En este caso deben de ser numeradas previamente, para poseer el siguiente formato: 1.jpg, 2.jpg y así sucesivamente.
Puede tratarse de 3 archivos como en el ejemplo, 20, 30, sin importar su cantidad, pero que no exista un hueco en la numeración.
No obstante, es el método más sencillo y sin necesidad de dependencias.
Usa el siguiente script.
Especifica en la primera línea el número de imágenes a mostrar.

<div id="fotos2"></div>
<script>
let n = 3; //numero de imagenes
let gallery = document.getElementById('fotos2') ;
for (let i = 1; i<= n; i++){
gallery.innerHTML += '<img class="tfoto" src="../img/ejemplos/'+ i +'.jpg"><br>';
}
</script>   

Presiona el siguiente botón para probar esta funcionalidad en esta página.
Mostrar galeria
Ocultar galeria

Crear miniaturas en la galería y hacerlas clicleables

En los tres casos podemos modificar el código para crear miniaturas que sean clicleables.
En el primer caso podemos hacerlo sustituyendo la linea que escribe las imágenes, con la siguiente.

<a href="<?php echo $file_path; "></a>

Necesitamos también especificar en una regla CSS el ancho de las miniaturas.
Con el siguiente código en la hoja de estilo inline, especificamos el ancho y altura de las miniaturas en la vista de escritorio, tabletas y teléfonos.

<style>
.lazy{width:230px;height:180px;margin:6px;}
@media screen and (min-width:300px) and (max-width:860px) {
.lazy{width:47%;height:200px;margin:6px;}
}
@media screen and (max-width:479px) {
.lazy{width:98%;height:100%;margin:6px;}
}
</style>

Este método tan usado en páginas para computadoras de escritorio, no es necesario en páginas para móviles.

Galería de imágenes en carpeta que combina PHP, JavaScript (Lazy Load)

Otro método que combina las ventajas de los anteriores.
No es necesario nombrar las imágenes.
Se detecta las imágenes en la carpeta con PHP y se escriben las etiquetas con los valores en el HTML, pero no se cargan hasta desplazarse por la página hasta el lugar donde se encuentran, gracias a la Libreria Lazy Load.

<?php
foreach (glob("../fotos/*.jpg") as $filename) { 
echo '<img class="lazyload" src="#" data-src="'.$filename.'"><br>';
}
?>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lazyload.js"></script>
<script>
lazyload();
</script>

Este método lo uso en la siguiente página de este sitio: Galería de pinturas e imágenes cristianas

Diferencias, ventajas y desventajas de cada método

En el primer caso con PHP, el HTML de la página se escribe del lado del servidor.
En caso de una página extensa, con muchas imágenes, se consume recursos de este como memoria RAM, lo que puede ser una limitación.
En los dos siguientes casos el HTML de la página se escribe en el mismo navegador, con JavaScript.
En el primero de ellos la carga la página se ve afectada por la carga de JQuery, con la ventaja de que no es necesario darle un nombre de archivo específico a las imágenes.
En el tercero de los casos se obtiene más rendimiento, sin afectar la carga del servidor ni la velocidad de la página, siempre que se agregue la funcionalidad "lazy load", de retrasar la carga de las imágenes, en la medida que nos desplazamos por la página.
En el primero de los ejemplos se agrega esta funcionalidad, usando Intersection Observer.
El rendimiento de esta página se puede comprobar con Lighthouse.

Páginas relacionadas

Comparta esta página

Sígueme en las redes sociales