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.
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.
Por Eisenheim Jelid el 26 de Mayo de 2009
Bueno, pues felicidades!! y sigan así.
Se puede hacer alguna modificacion sobre el codigo? Si me autorizas y logro agregar algun que otro chiche, lo vuelvo a subir en esta seccion.
Un Saludo
Por Haibane el 11 de Junio de 2009
Por Haibane el 11 de Junio de 2009
Por Mastrufedo el 19 de Junio de 2009
Por Roger el 14 de Julio de 2009
Por cesar el 15 de Julio de 2009
Por scowtmaster el 15 de Julio de 2009
Por smallsof el 16 de Julio de 2009
Por scowtmaster el 17 de Julio de 2009
Por smallsof el 23 de Julio de 2009
Por smallsof el 23 de Julio de 2009
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>';
Por Fernando el 04 de Agosto de 2009
Las imagens tampoco se me cargan en explorer o en mozilla, pero si pincho las imagens que salen en bblanco, me da el resultado, pero no logro hacer que estas salgan el la pagina.
Por FlaKaMaNa el 10 de Agosto de 2009
Muchisimas gracias por este post y compartir, esta muy buena la galeria...
Localmente los thumbs no se ven (sobre el index) pero probé, como dices, subirlos al server y funciona perfectamente, aún no descifro xke localmente no funciona, pero ps ke va!! si funciona sobre el server jiji.
Nuevamente, Gracias!!
Por Nemesis el 10 de Agosto de 2009
me bajé wamp server con
- Apache 2.2.11
- MySQL 5.1.36
- PHP 5.3.0
y la clase thumb da error:
Notice: Undefined variable: name in C:\wamp\www\imatges\thumb.php on line 99 concretamente la línea " $info = getimagesize($name);"
Con una versión anterior de php me funciona. ¿Podría haber algun problema con la versión?
Puede ser debido a alguna extensión de php que haya que cargar?
Por Nemesis el 10 de Agosto de 2009
Por FlaKaMaNa el 10 de Agosto de 2009
Pues yo de nuevo, la galeria funciona llamando a la carpeta estaticamente:
$mygallery->loadFolder("galeria");
Pero yo quiero que el nombre lo saque de una tabla, por efectos de que serian muchas galerias, entonces realice mi consulta, y mando llamar la misma funcion, pero con la variable donde esta el nombre de la carpeta:
$mygallery->loadFolder($path);
Y resulta que no salen los thumbs... oohhh =(
Lei que comentabas que habia que cambiar unas cosas en el codigo, podrias ser mas especifico de en que codigo, ya los revise, pero pues no doy con la falla.
Desde ya, gracias!!.
Por FlaKaMaNa el 10 de Agosto de 2009
Retiro mi post anterior, soy una zopenca!!, he pasado mucho tiempo en modificar algunas cosas que me olvide de otras muy importantes...
Descubri mi falla y no era error de las clases ni la consulta, era solo un archivo de conexion de mi BD, perdon por las molestias.
Gracias
Al tratar de crear los thumbnails y guardarlos solo me guarda la imagen en negro, osea totalmente negro, y nada mas
espero su ayuda, ya revise la configuracion y todo esta bien, modulos y demas.
Este es mi codigo:
Código :
<?php include_once('thumb.php'); $id_user=$_SESSION['id_user']; //variable de session $mythumb = new thumb(); $mythumb->loadImage($path_file);//imagen cargada dinamicamente $mythumb->resize(100, 'heigth'); $mythumb->save("profiles/$id_user/images/thumbs/$save_name",80); ?>REspondan a j2deme[arroba]gmail[punto]com
Ademas la clase thumb.php funciona bien, porque ya he podido hacer crops, pero no puedo guardar.
Es muy urgente para mi, es para un trabajo final de carrera.
Debes estar seguro que la imagen se está cargando, haz las pruebas sin dinamismo, prueba primero con una imagen en el servidor y prueba varios formatos principalmente JPG, después trata de hacer una versión más pequeña y salvarla. Cuando esto te funcione entonces añade la parte dinámica.
Por paola el 09 de Septiembre de 2009
Estaría buena una modifcación: que se pueda hacer paginado cuando se pasa de X fotos..
Muchas gracias
Por Freddy el 08 de Octubre de 2009
1.- Colocarle un marco a la galeria
2.- colocarles los botones siguisten y atras
3.- que al hacel clicl en la imagen me traina una ventana con una imagen y una descripcion de la misma (una popup)
Sera posible eso, me gustaria que el experto me ayudara ya que es una tarea de la uni.
Gracias de ante mano
[email protected]
Por ogeretal el 29 de Octubre de 2009
Tengo un problema cuando en la galeria se mezclan formatos. es decir, cuando hay 3 imagens y son diferentes: jpg, png y gif. Las que son gif y jpg se ven sin problemas mientras que las png no aparecen. Pero si solo pongo png se ven sin problemas. ¿ Se puede solucionar?
Gracias,
Un saludo
Fichero gallery.php
Código :
<? class gallery { var $files = array(); var $path; //---Método de leer una carpeta con imágenes 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); } //---Método de mostrar todas las imágenes contenidas en la carpeta function show($area = 500, $width = 100, $shownames = false){ //---Clacular la cantidad de imágenes en un tramo de ancho $cant = floor(($area + 5) / ($width + 5)); //---Calcular un nuevo espacio para las imágenes $space = floor(($area - $width * $cant) / ($cant - 1)); //---Crear la galería con los nombres de todos los archivos $total = count($this->files); $cont = 0; echo '<div style="width:'.$area.'px">'; //---Situar los thumbnails for($i = 0; $i < $total; $i++){ //---Determinar si se trata de la última imagen de la fila o no $margin = (($i + 1) % $cant == 0) ? 0 : $space; if($shownames){ echo '<div style="width:'.$width.'px; float:left; margin-right:'.$margin.'px; margin-bottom:'.$space.'px;">'; echo '<a href="'.$this->path.'/'.$this->files[$i].'" rel="lightbox" title="'.$this->getName($this->files[$i]).'">'; echo '<img src="show_thumb.php?src='.$this->path.'/'.$this->files[$i].'&width='.$width.'&height='.$width.'" width="'.$width.'" height="'.$width.'" border="0"></img>'; echo '</a>'; echo '</div>'; }else{ echo '<div style="width:'.$width.'px; float:left; margin-right:'.$margin.'px; margin-bottom:'.$space.'px;">'; echo '<a href="'.$this->path.'/'.$this->files[$i].'" rel="lightbox">'; echo '<img src="show_thumb.php?src='.$this->path.'/'.$this->files[$i].'&width='.$width.'&height='.$width.'" width="'.$width.'" height="'.$width.'" border="0"></img>'; echo '</a>'; echo '</div>'; } } ?> <script language="javascript"> $(document).ready(function(){ $("a[rel = 'lightbox']").lightBox(); }); </script> <? echo '</div>'; } //---Función de convertir el nombre de archivo a un nombre descriptivo function getName($name){ $reg = array('/\[\d*\]/', '/_/', '/\.+jpg|gif|png+$/', '/@A@/', '/@E@/', '/@I@/', '/@O@/', '/@U@/', '/@N@/', '/@a@/', '/@e@/', '/@i@/', '/@o@/', '/@u@/', '/@n@/'); $out = array('', ' ', '', 'Á', 'É', 'Í', 'Ó', 'Ú', 'Ñ', 'á', 'é', 'í', 'ó', 'ú', 'ñ'); $ret = preg_replace($reg, $out, $name); return $ret; } } ?>La clase sigue teniendo dos métodos:
Código :
En esta versión se obvia el parámetro $space ya que este es calculado automáticamente, con declarar el espacio en el que deben estar las imágenes y el ancho de las mismas este parámetro puede ser hallado sin necesidad de declararlo.
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"> <? include_once('gallery.php'); $mygallery = new gallery(); $mygallery->loadFolder('galley_images'); $mygallery->show(500, 100, true); ?> </div> </body> </html>Si se quisiera que las imágenes tuvieran una pequeña descripción al ampliarlas, como se puede ver en el código hay que situar el tercer parámetro en "true" y por otro lado esta descripción debe ir en el título de la imagen. Las letras con tildes se representarán como la letra sin tilde encerrada entre arrobas, las eñe con una ene encerrada entre arrobas y los espacios con guión bajo. Para asegurar el orden de los ficheros y poder situar dos imágenes con una misma descripción, el inicio del nombre de la imagen puede comenzar con un número encerrado entre corchetes.
Para que se entienda mejor lo anteriormente descrito, a continuación se situarán nombres de fichero y la descripción que saldrá en la imagen al ampliarla:
[02]Composici@o@n_Lan_Di.jpg ---> Composición Lan Di
[04]Ni@n@a_del_gato.jpg ---> Niña del gato
[09]Ryo_en_cabina_telef@[email protected] ---> Ryo en cabina telefónica
Aquí pueden ver un ejemplo de la galería funcionando:
Segunda versión de Galería
Espero que les sea de ayuda.
Archivos del tutorial
Por lsomohano el 24 de Febrero de 2010
http://www.evya.com.mx/EVYA-NEW/admin/galerias_vista.php?carpeta=general&galeria=general
Por caste_88 el 27 de Mayo de 2010
Warning: is_dir() [function.is-dir]: open_basedir restriction in effect. File(..) is not within the allowed path(s): (/home/ty000178/public_html:/tmp:/opt/apache/lib/php:/opt/php5/lib/php:/opt/ferozo/etc/suspen:/opt/ferozo/suspended.page) in /home/ty000178/public_html/gallery.php on line 18
me muestra los thumbs pero al hacer click me los abre sin efectos..
que puede ser??
Por caste_88 el 27 de Mayo de 2010
caste_88 :
Warning: is_dir() [function.is-dir]: open_basedir restriction in effect. File(..) is not within the allowed path(s): (/home/ty000178/public_html:/tmp:/opt/apache/lib/php:/opt/php5/lib/php:/opt/ferozo/etc/suspen:/opt/ferozo/suspended.page) in /home/ty000178/public_html/gallery.php on line 18
me muestra los thumbs pero al hacer click me los abre sin efectos..
que puede ser??
perdon, lo de los efectos es culpa mia, ahora anda perfecto la galeria pero con ese error, que CREO que no ingluye en nada pero no se como sacarlo...
Por tonifdz el 07 de Julio de 2010
Gracias por adelantado.
Seguro alguien podrá ayudarte.
Por kanino el 18 de Agosto de 2010
Saludos
Código :
include_once('gallery.php'); $mygallery = new gallery(); $mygallery->files = myArray; $mygallery->show(500, 100, true);Ya el código de leer de tu base de datos las rutas de las imágenes con sus nombres y guardarlas en un arreglo debes hacerlo tú dependiendo de la estructura de tu sistema.
Por kanino el 19 de Agosto de 2010
$sql = mysql_query("SELECT * FROM mitabla WHERE id = '$variable_id'");
while ($datos = mysql_fetch_array($sql))
{
//aquí supongamos traigo una sola imagen en la variable $datos[imagen]; y hago
echo "<img src=\"imagenes/$datos[imagen]\" />";
}
//con ese ejemplo me la muestra lo que quiero lograr con tu galeria es que todas las imagenes que me muestre cierto sean iguales, como le aplico entonces tu codigo :/
Saludos
Código :
$sql = mysql_query("SELECT imagen FROM mitabla WHERE id >= '".$range_id_low."' AND id <= '".$range_id_high."'"); $myArray = mysql_fetch_array($sql, MYSQL_NUM); include_once('gallery.php'); $mygallery = new gallery(); $mygallery->files = $myArray; $mygallery->show(500, 100, true);Por Paginar el 25 de Septiembre de 2010
A mi me gustaria sacar por pagina 10 imagenes y que solo me sacara 100
Por kira el 23 de Octubre de 2010
Por david el 27 de Octubre de 2010
Por test10 el 14 de Febrero de 2011
Por leonelcs el 10 de Marzo de 2011
Por randall13 el 09 de Mayo de 2011
Por Leandro el 23 de Mayo de 2011
Cómo puedo hacer que los tamaños de las imgs sean con %, porque tengo algunas verticales y otras horizontales.
Gracias.
Por Jesus Urbano el 02 de Junio de 2011
Estoy creando un sistema de restaurante que lo voy a poner como codigo libre, de antemano te lo agradeceria, que dios te bendiga
Por jesus urbano el 02 de Junio de 2011
Por Janina el 26 de Agosto de 2011
La he probado, pero he intentado guardar la consulta a mi base de datos, y que muestre las imagenes en un array tal como indica el autor, pero si, hace la consulta, las muestra pero en blanco...con la x , pero no las veo ni miniaturas ni ampliadas.
El array lo he utilizado asi en el archivo index.php:
//<?
$host="localhost";
$user="root";
$password="root";
$db="cuadros";
$conexion = mysql_connect($host,$user,$password);
mysql_select_db($db, $conexion);
$consulta= mysql_query("SELECT id, titulo, descripcion, archivo FROM cuadro",$conexion);
$myArray = mysql_fetch_array($consulta, MYSQL_NUM);
include_once('gallery.php');
$mygallery = new gallery();
$mygallery->files =$myArray;
$mygallery->show(500, 100, true);
// ?>
Alguien puede guiarme un poco? ya que me interesaba que la consulta la haga desde mi base de datos.
Hay algo que me dejo o no hago bien?
Gracias
Por turco_9020 el 09 de Septiembre de 2011
Gracias y saludos
Por Oscar_92 el 05 de Diciembre de 2011
Por Pilar el 05 de Diciembre de 2011
¿Necesito algún parámetro especial? ¿Me estoy dejando algo? o ¿No es posible conseguir lo que quiero hacer con este tipo de Galería de fotos.?
Espero respuesta, gracias.
Por isaac el 08 de Febrero de 2012
Por pablomss el 19 de Febrero de 2012
Espero que alguien pueda ayudarme porque me resultaría muy poder usar este codigo.
Hice un phpinfo y en mi servidor está habilitada la Librería GD.
Muchas gracias
Por sandra el 10 de Marzo de 2012
Por maria el 12 de Mayo de 2012
Por anjelra el 06 de Julio de 2012
Por sergio.salas el 13 de Julio de 2012
Por angelht el 17 de Agosto de 2012
Gracias de nuevo a su creador elchininet .!!!!!!
Por fons11 el 14 de Octubre de 2012
copie tu codigo tal cual y solo cambie la ruta en la que guarda las imágenes. También he probado cambiando la ruta y poner la misma que en el archivo original. Muchas gracias de antemano.
Por dan el 09 de Julio de 2013
Por Carlos el 15 de Julio de 2013
Tengo una camara IP que sube las imagenes por FTP y me gustaria poder verlas con este metodo. Pero el problema que tengo es que la camara automaticamente genera carpetas y alli guara un numero de imagenes, luego generaotra carpeta al mismo nivel y guarda otra tanda.
Tengo forma de que se vean las imagenes que estan dentro de directorios dentro de "galley_images"??
Muchas gracias de nuevo.
Por Steysi el 14 de Noviembre de 2013
Por Alex el 05 de Diciembre de 2013
Por garciaq el 12 de Mayo de 2014
dejo el link.
http://foros.cristalab.com/clase-de-php-para-crear-thumbnails-de-imagenes-t73376/30.html#519581
Por henry ascanio el 22 de Junio de 2014
Por chuison el 22 de Diciembre de 2014
Mi correo [email protected]
Por chuison el 13 de Enero de 2015
Por juanlocura666 el 06 de Marzo de 2015
Por juanlocura666 el 06 de Marzo de 2015
Por Iban el 26 de Mayo de 2015
En la web que estoy haciendo, el cliente quiere meter fotos de trabajos que realiza, y seguramente me pedirá añadir una breve descripcion del trabajo. esa descripcion ya tiene su campo paar que entre en la base datos, pero no se donde poner la llamada para que aparezca el tecsto debajode la foto cuando la foto esta ampliada. Que aparzca justio encima de "imagen 1 de 12".
muchas gracias
Por Iban el 26 de Mayo de 2015
Por alejodesalta el 19 de Junio de 2015
Por rene-sv el 22 de Octubre de 2015
Por Ernesto Corral el 03 de Abril de 2016
En la actualidad les falta algo muy sencillo en efectos de php
1. no es solo "<?" si no "<?php", en todos los archivos .php de la descarga.
2. del archivo thumbs.php busque el siguiente código y comen tenlo
//---Actualizar la imagen y sus dimensiones
//$info = getimagesize($name);
//$this->width = imagesx($image);
//$this->height = imagesy($image);
//$this->image = $image;
No no mas es pedir, también hay que saber checar y validar. Espero que solo sea por falta de conocimiento.
En mi caso funciona todo, solo en el código e agregado que las imágenes sean responsive.
Saludos.
Por Jesus-php el 20 de Mayo de 2017