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>
Huy, me encanta tu clase de PHP me parece encantadora... la voy a ocupar en cuanto pueda. Solo tengo una duda ¿todo lo que ponen por aquí se puede usar sin restricciones? (es decir, licencia).
Bueno, pues felicidades!! y sigan así. Por:Eisenheim Jelid-blog
Esta muy bueno el codigo. Gracias por compartir estas cosas, hace que uno como programador enriquezca sus metodos de a la hora de encarar un proyecto de diferentes maneras.
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. Por:devc
Pues claro, para eso está el foro, cualquier variación que puedas hacer y cualquier mejora se te agradece pues ayudará a la comunidad. Un Saludo Por:elchininet
He actualizado la clase thumb que se utiliza para generar la galería, debido a un bug que presentaba detectado por un invitado del foro. En si el problema estaba es que si la imagen era más pequeña que la imagen que se deseaba crear, el método crop no funcionaba bien, en este post hay una actualización de la clase thumb que corrige dicho problema. Por:elchininet
En donde le doy el include a la clase de thumb? ya que si la corro como esta si sale los espacios de las imagenes con la liga pero no muestra las imagenes en el thumbail. Por:Haibane
retiro la pregunta, ya vi mi error, gracias Por:Haibane
La verdad, la clase es genial. Gracias por el aporte. Por:Mastrufedo
Hola, es justo lo que estaba buscando =) Aunque no le entendi nada haha.! no domino para nada ni un pelito el PHP, solo una pregunta ahm.. como ejecuto este archivo en mi explorador de internet? Por:zampakutoh
@zampakutoh, debes tener un servidor para hacer funcionar estos archivos. Puedes montar uno local o si tienes uno en internet puedes probarlos desde ahí. Por:elchininet
Ooo! gracias gracias ClabLevel... estoy en proceso de Desifrar lo que me dijiste Haha! Bien, bien entonces lo tengo que subir directo al Servidor, que en este caso seria el lugar donde Hospedo la pagina web?... Genial, pense que podria emularlo desde mi PC antes de subirlo =). Gracias! Por:zampakutoh
Jaja ClaBlevel no es el usuario vdd? lo siento.. soy nuevo en esto !! MUY NUEVO Por:zampakutoh
muy buenas, amigos ke pena, tengo problemas con la galeria no se si estoy haciendo algo mal, podria alguno de ustedes muy hamablemente explicarme o guiarme porfavor para poder implantar la galeria en mi web? les agradezco Por:Roger-blog
hola muy buenas la librerias pero yo tengo problemas con gallery desde el index me dice que no puede ser encontrada no se si alguien me puede ayudar o enviar la respuesta a cessar_rey@hotmail.com Por:cesar-blog
Hola!!! bueno este me daba un error, agrege donde donde decia <? a <?php esto comenzo a funcionar pero los thumb en la pagina de index.php salen en blanco y luego se muestra la pagina vacia por favor nesecito esa gallery y no se como arreglar ese problema ... thank Por:scowtmaster
@scowtmaster, mira este tip, si deseas solucionarlo rápidamente cambia la etiqueta corta donde quiera que aparezca, inclusive en el fichero "show_thumb.php". Por:elchininet
ya cambie las <? y <? por en todos los ficheros y la pagian ya contiene las imagenes por que al reflescar se llegan a observar la imagenes y se pierden no se que pase ayuda quiero ke me quede esta galeria Por:smallsof
Si se llegan a observar las imágenes entonces el problema está en otro lado, ahora si las imágenes se muestran en blanco y depués desaparecen (significa que no cargaron) es que no está encontrando la ruta de las mismas, la clase está realizada suponiendo que todos los ficheros están en la raiz junto con el fichero principal de la galería, si introduces la galería en una carpeta deberás variar el código para que funcione desde esa ruta específica. Por:elchininet
@elchininet !! mucha gracias por el tips de la configuración de las etiquetas cortas me funcionara mucho de conocimiento,, pero las imagenes no se visualizaron se pone en blanco.. Por:scowtmaster
Lee mi anterior post, rectifica que tengas los ficheros php en la raiz del sitio y que le estés dando bien la ruta a la carpeta que contiene las imágenes, revisa que hayas reescrito el fichero thumb.php por la nueva versión que posteé, por lo demás no deberías tener problemas. Por:elchininet
ke ay elchininet espero me ayudes las imagenes me aparecen en blanco y despues desaparecen y se supone que tengo todos mis ficheros en raiz de mi wamp lo unico que tengo en una carpeta claro son las imagenes que crees ke estoy haciendo mal help me. gracias Por:smallsof
de nuevo yo esta es la parte de codigo para situar los thumbnails
No se que puedes estar haciendo mal, prueba tu galería en un servidor de internet. Es lo último que se me ocurre, la utilización de la clase es muy sencilla y no debe dar problemas. Por:elchininet
Buenas,
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:Fernando-blog
Oye chico que buena clase!!!....
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:FlaKaMaNa-blog
Hola una pregunta al autor del código,
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-blog
Solventado! He modificado la línea: $image->crop($src,$width, $width) de show_thumb.php y las funciones crop y resize añadiendo $name como primer parámetro. Un saludo. Por:Nemesis-blog
Hola chininet:
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-blog
Hola de nuevo:
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 Por:FlaKaMaNa
Me alegro que te haya funcionado y vienvenid@ a la comunidad. Por:elchininet
Podrian ayudarme???
Al tratar de crear los thumbnails y guardarlos solo me guarda la imagen en negro, osea totalmente negro, y nada mas que puedo hacer?
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. Por:j2deme
Para responder se responde aquí en el foro, no es correcto las consultas personales. 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:elchininet
Cuál puede ser el problema que no funciona en modo local? o sea, me pasa lo mismo que comentaron los demás, que no se ven las imágenes. En el server local tengo php 5.0 y en el web 4.0. No se si tenga que ver la versión de php.
Estaría buena una modifcación: que se pueda hacer paginado cuando se pasa de X fotos..
Muchas gracias Por:paola-blog
Saludos buen aporte, me gustaria saber si el codigo de esta galeria me permite:
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.
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?
Repasando el bug encontrado por Inyaka he realizado algunos cambios en la clase "gallery". Todos aquellos usuarios a los que la clase le generaba problemas, pueden probar con esta actualización a ver si estos quedan resueltos. Aquí tienen el update:
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 :
// 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 en un área de ancho $area y mostrando u ocultando la descripción
//de la imagen (este último parámetro por defecto es false)
show($area:int, $width:int, $shownames = false)
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:
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@o@nica.jpg ---> Ryo en cabina telefónica
Aquí pueden ver un ejemplo de la galería funcionando:
tengo un problema con el scrip me funciona a medias, por no me muestra los thums pero al darle clic me abre la imagen, sera que mi servidor necesita alguna libreria adicional, ya lo e probado en mi maquina local y en oro server y funciona al cien dejo la liga
lo siento.. soy nuevo en esto !! MUY NUEVO
que puedo hacer?