Comunidad de diseño web y desarrollo en internet online

Clase de PHP para crear galerías dinámicas

Hace poco cree una clase mediante la cual se puede dinámicamente crear thumbnails de imágenes mediante php. Una utilidad que se le podría dar a esta clase sería la siguiente.

Cuando queremos crear una galería de imágenes en un sitio web comúnmente nos encontramos con varias tareas, en el caso que sea dinámica nuestra página, debemos crear en una base de datos o un documento xml una lista con el camino a las imágenes que vamos a utilizar y por último programar un fichero mediante un lenguaje de backend que lea esta lista y la distribuya correctamente en el espacio que deseamos, y en el caso que nuestra página sea estática crear dos versiones de las imágenes (una pequeña y otra la que se va a mostrar), crear a mano cada uno de los espacios para las imágenes y después programar el vínculo a cada una de las versiones grandes. Cualquiera de las dos maneras nos lleva algo de trabajo.

El propósito de esta clase es reducir el tiempo de trabajo a la hora de crear una galería de imágenes, podríamos crear una galería en un momento con sólo 4 líneas de código php. Sólo deberíamos indicarle una carpeta que contenga imágenes y podemos mostrar todas estas en el lugar que queramos.

Esta clase utiliza jQuery y jQuery lightBox plugin para ampliar las imágenes. Y por otro lado la clase thumbs y el fichero show_thumb.php (Contenido en los archivos del tip) para crear el thumbnail de cada imagen.

Fichero gallery.php

Código :

<?
class gallery {
   var $files = array();
   var $path;
   
   function loadFolder($path){
      $this->path = $path;
      
      //---Guardar en un arreglo todos los archivos en el directorio   
      $folder = opendir($this->path);
         
      while ($fil = readdir($folder)) {
         
         //---Si no es un directorio
         if(!is_dir($fil)){
            
            $arr = explode('.', $fil);
            if(count($arr) > 1){
               
               //---Ir guardando los nombres en un arreglo
               $this->files[] = $fil;
            }
         }
      }
      
      //---Cerrar el directorio
      closedir($folder);
      
      //---Ordenar alfabeticamente el arreglo
      sort($this->files);
   }

   function show($area = 500, $width = 100, $space = 10){
   
      //---Crear la galería con los nombres de todos los archivos
      $total = count($this->files);
      $cont = 0;
      
      echo '<div name="xx" style="width:'.$area.'px">';
      
         //---Situar los thumbnails
         for($i = 0; $i < $total; $i++){      
            echo '<div style="width:'.$width.'px; float:left; padding-right:'.$space.'px; padding-bottom:'.$space.'px;"><a href="'.$this->path.'/'.$this->files[$i].'" rel="lightbox"><img src="show_thumb.php?src='.$this->path.'/'.$this->files[$i].'&width='.$width.'" width="'.$width.'" height="'.$width.'" border="0"></img></a></div>';
         }
?>        
                <script language="javascript">
                $(document).ready(function(){
                   $("a[rel = 'lightbox']").lightBox();
                });
                </script>        
<?
      echo '</div>';
   }
}
?>


La clase sólo tiene dos métodos:

Código :

// Referencia de la carpeta de donde se van a leer las imágenes
loadFolder($path:string)

// Muestra los thumbnails (con un ancho de $width) de todas las imágenes contenidas en la carpeta
// separados por una distancia $space en un área de ancho $area
show($area:int, $width:int, $space:int) 


Por ejemplo, en la siguiente página se ha colocado el código php necesario para crear la galería:

Código :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP Gallery Example</title>

<link href="css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />

<script src="scripts/jquery-1.3.2.js" language="javascript"></script>
<script src="scripts/jquery.lightbox-0.5.js" language="javascript"></script>

</head>

<body>

   <div align="center">    
<?      
      // Incluir la clase   
      include_once('gallery.php');
      
      $mygallery = new gallery(); // Crear una nueva instancia
      $mygallery->loadFolder('galley_images'); // Leer las imágenes de la carpeta "galley_images"
      $mygallery->show(500, 100, 10); // Mostrar la galería en este lugar en un area de 500px      
?>    
    </div>

</body>
</html>


Y lo anterior dará como resultado lo siguiente:

Ejemplo de Galería

Espero que les sea de ayuda.
Archivos del tutorial

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate