Ver los efectos de la página Original Hover Effects me ha motivado para crear una demo similar (la suya es más guay) implementándola como Galería dinámica con lightbox y PHP.

No penséis que va a ser exactamente igual, ya que también me ha motivado a escribir un nuevo código PHP que facilite la implementación de la galería, esta vez utilizando un clase en PHP y no implementando el código en la propia página.

Bueno, lo primero es lo primero, aquí os dejo la demo Galería dinámica con lightbox y PHP (II) y, a continuación vamos a ver las partes del código más importantes, aunque más abajo pondré enlaces para descargar el ejemplo completo en PHP y en HTML.

PHP

Primero la clase con la que crear objetos para obtener las imágenes de un determinado directorio que pasaremos como parámetro.

class Galeria{
	// Propiedades de la clase
	private $array_imagenes = array();
	private $path = array();
	
	// constructor	
	public function __construct(){
		if (func_get_args()){
			$this->path = func_get_args();
		}
		$this->addimagen();
	}
	
	// completar $array_imagenes con las imágenes válidas	
	private function addimagen() {
		for ($i = 0; $i $lt; sizeof($this->path); $i++) {
			$mydir = opendir($this->path[$i]);
			while ($archivo = readdir($mydir)){
				if ($this->comprobarExtension($archivo)) {
					$this->array_imagenes[] = $this->path[$i].'/'.$archivo;
				}
			}
		}
	}
	
	// comprueba que coincidan las extensiones
	private function comprobarExtension($archivo){
		// extensiones válidas
		$arr_ext = array("jpg","png","gif");
		$ext = substr($archivo,-3);		
		if (in_array($ext,$arr_ext)) {
			return true;
		}
		return false;
	}
	
	// obtener el array con las imagenes 
	public function getImagenes(){
		return $this->array_imagenes;
	}
	
}

Ahora el fragmento de código más importante para incluir las imágenes en la página.

// incluir la clase
include_once 'lib/classGaleria.php';
// variables donde indicamos los path_directorio por ejemplo: "img/galeria"
// podemos incluir varios directorios con más variables y pasarlos como parámetro a la clase. Por ejemplo $elpath2="img/galeria2"  
$elpath1 = '[path_directorio]';
// creamos el objeto
$imagenes = new Galeria($elpath1); 
// podemos pasar varias variables con distintos path al crear el objeto. Por ejemplo: $imagenes = new Galeria($elpath1, $elpath2, $elpath3);
// recorrer el array de imágenes
foreach ($imagenes->getImagenes() as $archivo){
 
}

NOTA: PHP no permite la sobrecarga de constructores, por eso en el constructor de la clase se usa la función func_get_args() que en la documentación explica que obtiene un array con los argumentos. Si queréis obtener el número de argumentos pasados se usa la función func_num_args().

Hasta aquí todo bien ¿no?.

La verdad es que artículo se me está haciendo algo largo de explicar ya que tiene varios pasos a comentar, y viendo que es domingo y que no me apetece mucho escribir voy a dejar los enlaces para descargar las demos tal como he comentado más arriba. Galería dinámica en HTML y Galería dinámica en PHP.

Por lo demás si tenéis alguna duda podéis dejar algún comentario que intentaré responder en el menor tiempo posible. También podéis criticar e insultar.

Recordad que para ejecutar la versión en PHP debéis tener instalado un servidor para PHP (por ejemplo Apache) y ejecutarlo en él. Sino lo tenéis instalado os recomiendo descargar la versión en HTML, así por lo menos podréis "bichear" el código CSS y JS.

En adelante y si surgen dudas iré ampliando el artículo para solucionarlas o contestando a los comentarios (si los hay).

Por lo demás buen domingo y espero sea de ayuda a alguien.

ACTUALIZACIÓN:

Tras el comentario de Miguel dejo la modificación de la clase para obtener el nombre del fichero tal como indica en el comentario:

class Galeria{
	// Propiedades de la clase
	private $array_imagenes = array();
	private $path = array();
	private $name_imagenes = array();
	
	// constructor	
	public function __construct(){
		if (func_get_args()){
			$this->path = func_get_args();
		}
		$this->addimagen();
	}
	
	// completar $array_imagenes con las imágenes válidas	
	private function addimagen() {
		$con = 0;
		for ($i = 0; $i < sizeof($this->path); $i++) {
			$mydir = opendir($this->path[$i]);
			while ($archivo = readdir($mydir)){
				if ($this->comprobarExtension($archivo)) {
					$this->name_imagenes[$con] = substr($archivo, 0, -4);
					$this->array_imagenes[] = $this->path[$i].'/'.$archivo;
					$con++;
				}
			}
		}
	}
	
	// comprueba que coincidan las extensiones
	private function comprobarExtension($archivo){
		// extensiones válidas
		$arr_ext = array("jpg","png","gif");
		$ext = substr($archivo,-3);		
		if (in_array($ext,$arr_ext)) {
			return true;
		}
		return false;
	}
	
	// obtener el array con las imagenes 
	public function getImagenes(){
		return $this->array_imagenes;
	}
	
	// obtener el array con los nombres
	public function getNombre(){
		return $this->name_imagenes;		
	}
	
}

Es necesario modificar el código en el template donde queremos obtener las imágenes:

<?php
$i = 0;
$nombre = $imagenes->getNombre();
foreach ($imagenes->getImagenes() as $archivo):
?>
<img src="<?=$archivo?>" alt="Imagen" width="100" />
<h2><?=$nombre[$i];?></h2>
<?php
$i++;
endforeach;
?>

No está completo, ya que es un ejemplo de como obtenerlo.