Programando o Intentándolo

Como hacer una galería de imágenes en PHP

Con PHP se puede hacer una galería de imágenes muy fácilmente y con un CSS le daremos un poco de estilo para que la galería sea más bonita y con lightbox mostraremos las imágenes.

El proceso para hacer la galería de imágenes se puede separar en dos apartados, subir las imágenes y mostrar las imágenes.

Como subir las imagenes para la galeria

Para subir las imágenes lo primero es crear un formulario para elegir las imágenes que se quieran subir. Vamos con ello.

En el formulario anterior, he modificado el estilo del input file (mira aquí como), pero si no se quiere modificar se puede eliminar el div inputImagenModificado y sustituirla por un simple input file (<input class=”inputImagenOculto” name=”imagen1″ type=”file”>).

También en la línea 19, he puesto un botón para generar más input file dinámicamente para permitir subir varias imágenes a la vez si se quiere pero a la vez que la pagina no este llena de inputs.

Para generar los inputs usaremos una función JavaScript siguiente:

Con esta función generamos los campos dinámicamente, y la línea que lo hace es nuevaCelda.innerHTML =’…’; es con la que generaremos el contenido dinámicamente, por lo tanto con modificar el contenido de esta función podemos modificar el código HTML que se generara. La función limita el número de campos creados a 10 y deshabilita el botón para que no se puedan crear más campos. Nota: Cuando pruebes a subir archivos comprueba en el archivo php.ini que el tamaño de todos los archivos juntos sea menor que el especificado en post_max_size. Sino aumenta el tamaño máximo permitido que por defecto es muy bajo.

Con lo visto hasta el momento aun no se pueden subir las imágenes, es necesario crear una función para subir los archivos que seleccionamos con los input file.

La función esta comentada prácticamente línea por línea con lo que no creo que sea necesario añadir nada más, salvo de decir que se puesto la posibilidad de especificar el directorio en el que se quieren almacenar las imágenes para permitir que se puedan crear múltiples galerías, por ejemplo una por cada nombre de usuario. Y también que tanto el directorio como el nombre del archivo se almacenaran en una base de datos, para luego poder visualizarlas, se podría añadir una descripción u otros campos pero por simplificar la galería no se ha hecho, aunque es tan sencillo como añadir los inputs para almacenar la información que queramos añadir y luego añadirlo a la base de datos del mismo modo que se ha hecho con el nombre de la imagen o el directorio.

El código SQL para crear la tabla para almacenar las imágenes es el siguiente:

Con la función anterior podemos subir las imágenes individualmente. Para simplificar el proceso de subir las imágenes crearemos otra función que subirá todas las imágenes, bueno realmente llamara a la función anterior con cada imagen haciendo que solo sea necesario incluir una llamada a esta función y no una llamada por cada imagen que se quisiese subir.

Esta función recorre los imput files y comprueba que contengan algo y si es asi llama a la función que expliquemos anteriormente. Finalmente añadimos en el archivo en el que tenemos el formulario, detrás de este una llamada a esta función dentro de un if que comprueba si se ha pulsado el botón subir.

Ahora si, con lo hecho hasta el momento ya podemos subir las imágenes y solo queda el código necesario para mostrarlas como una galería.

Con esta sencilla línea basta para mostrar una imagen, y metiéndola dentro de un bucle que recorra todas las imágenes ya tendríamos la galería, aunque la verdad el resultado seria bastante malo pues se mostrarían todas las imágenes en su tamaño original.

Este es el código con el que generaremos la galería, un simple bucle en el que se muestran las imágenes, enlazadas a si mismas para mostrarlas con lightbox. Cosa que se consigue con la etiqueta rel=”lightbox[loquequieras]” ([loquequieras] hace que las funciones de lightbox entiendan que las imágenes con esta etiqueta están relacionadas y por lo tanto añade los enlaces para moverse entre las imagenes). La etiqueta title=”” sirve para poner el nombre que se mostrara debajo de la imagen con lightbox.

Para usar ligthbox es necesario obviamente incluir los archivos que contienen las funciones y el estilo e incluir las siguientes referencias en el archivo donde queramos mostrar las imágenes:

Para el mejor aspecto de la galería realice unas pequeñas modificaciones en el codigo de los archivos lightbox.js y lightbox.css para limitar el tamaño en el que se muestran las imágenes. Estos archivos están incluidos junto con el resto del proyecto al final del post, si quieres los archivos originales puedes encontrarles aquí.

Y para darle a la galería un aspecto de galería basta con estas líneas de código CSS:

Con esto hacemos que las imágenes se muestren con un tamaño uniforme de 200×200 con un borde y con esquinas redondeadas con lo que la galería queda bastante curiosa.

Y para finalizar le añadiremos mediante JavaScript un “sombreado” a las imágenes para que se muestren un poco oscuras y cuando se pase el ratón por encima de alguna se aclaren. Este efecto se consigue con una sencilla función que deje la opacidad de la imagen en 1 cuando se esta sobre ella y la modifique al valor que nosotros queramos cuando no. Por ejemplo 0,5.

El resultado final es este:

Imagen con lightbox:

Inputs desplegados:

Con este código como puedes ver se puede conseguir una galería sencilla pero elegante, pero para que pudiese funcionar más fluida sería mejor añadir una función que crease las miniaturas de las imágenes para mostrarlas en la galería pero con las velocidades de hoy en día y suponiendo que no subas imágenes de unos cuantos megas prácticamente ni se notaria.

Si quieres ver el código completo puedes descargarlo aquí.