Galería dinámica con Lightbox y PHP (II)
0 comentarios
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.
