Galería de imágenes en php

6 junio, 2012

Vamos a crear una galería de imágenes utilizando php. No será necesario utilizar base de datos, vamos a mostrar las imágenes que se encuentran dentro de una carpeta. De esta forma podremos actualizar la galería solamente con subir más imágenes a la carpeta.

Descripción del proceso:

Todo el proceso es basa en escanear el contenido de una carpeta con un pequeño scritp de php.

Primero tendremos que preparar las imágenes que pondremos de la siguiente forma en carpetas:

[highlight]images/featured/: en esta carpeta guardaremos las imágenes de mayor tamaño. Tamaño de la imágenes 500px x 350px.[/highlight] [highlight]imagen/th/: en esta carpeta guardaremos la imágenes en miniatura. Tamaño de las imágenes 50px x 50px[/highlight]

El nombre de las imágenes grandes y miniaturas tiene que coincidir respectivamente, si no coinciden dará un error de imagen no encontrada.

Finalmente con un javascript vamos sacando la información de la carpeta

Código de la página Html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Galería de imagenes con PHP</title>
 <script src="js/jquery-1.2.6.pack.js" type="text/javascript"></script>
 <script src="js/scripts.js" type="text/javascript"></script>
 <link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="container">
 <h1>Some Portfolio</h1>
 <div id="featured">
 <?php
 $featured_dir = 'images/featured/';
 $scan = scandir($featured_dir);
 echo '<img src="'. $featured_dir . $scan[2] . '" alt="image" />';
 ?>
 </div>

 <ul id="options">
 <?php
 $dir = 'images/tn/';
 $scan = scandir($dir);

 for ($i=0; $i<count($scan); $i++) {
 if ($scan[$i] != '.' && $scan[$i] != '..') {
 echo '
 <li>
 <a href="' . $featured_dir . $scan[$i] . '">
 <img src="'. $dir . $scan[$i] . '" alt="'. $scan[$i] . '" />
 </a>
 </li>';
 }
 }
 ?>
 </ul>
 </div>
</body>
</html>

En la línea:

[highlight]$featured_dir = ‘images/featured/’; [/highlight]

Indicamos la carpeta para las imágenes grandes

En la línea:

[highlight]$dir = ‘images/tn/’; [/highlight]

Indicamos la carpeta para las imágenes en miniatura

Javascript utilizado

El fichero scripts.js que hemos utilizado en el proceso es el siguiente:

$(function() {

$('ul#options li img').click(function() {
 $('ul#options li img').removeClass('selected');
 $(this).addClass('selected');

var imageName = $(this).attr('alt');

$('#featured img').attr('src', 'images/featured/' + imageName);

var chopped = imageName.split('.');
 $('#featured h2').remove();
 $('#featured')
 .prepend('<h2>' + chopped[0] + '</h2>')
 .children('h2')
 .fadeIn(500)
 .fadeto(200, .6);

});

$('ul#options li a').click(function() {
 return false;
 });
});

En la linea:

[highlight]$(‘#featured img’).attr(‘src’, ‘images/featured/’ + imageName);[/highlight]

vemos donde utilizamos la carpeta que incluye las imágenes grandes, cambiando aquí el nombre podríamos utilizar cualquier carpeta que queramos. Para cambiar el nombre tienes que hacerlo tanto en el código Html como en el javascript.

Ver demo

Descargar ficheros