norfipc.com
Códigos   Mapa del sitio   Informatica
NorfiPC » Códigos » Galería de fotos

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



Tres formas diferentes de crear o insertar una galería en una página web, que muestre las fotos situadas en una carpeta o directorio. Código y ejemplos prácticos.
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


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; ?>" alt="Imagen de ejemplo" title="Imagen de ejemplo">
     <?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.
Imagen de ejemplo Imagen de ejemplo Imagen de ejemplo Imagen de ejemplo



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.





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.





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; ?>" target="_blank"><img class="lazy" src="<?php echo $file_path; ?>" alt="Imagen de ejemplo" title="Imagen de ejemplo"></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.



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



Indica que te gusta y comparte

Sígueme en las redes sociales


 
Inicio | Mapa del sitio | Buscar | Sobre mí