Armando una galeria de fotos simple con PHP
Por si no sabian con php podemos hacer infinidad de cosas ya que es un lenguaje de programacion script bastante completo.
En esta oportunidad les voy a mostrar como hacer una simple pero efectiva galeria de fotos.
Lo que necesitaremos son:
- 15 imagenes cualquiera para armar la galeria en tamaño medianamente decente;
- Block de notas (tambien conocido en la jerga por notepad)
- 15 minutos
- Servidor que soporte php (es indistinto si usamos como servidor web Apache o ISS – particularmente recomiendo Apache sobre Linux por su estabilidad y gran performance con pocos recursos de hardware pero ese sera un tema que tratare en otro oportunidad).
Vamos a lo que nos interesa.En principio renombraremos las imagenes por ponerle un nombre “imagenGaleria_1.jpg, imagenGaleria_2.jpg … imagenGaleria_15.jpg” estas imagenes deben estar numeradas consecutivamente.Subimos esas imagenes al servidor web en la carpeta “imagenes”.
Ahora veamos el código:
<?php
if(!isset($imagen)){
for($i=1;$i<=9;$i++){
echo ‘<a xhref=”?imagen=imagenGaleria_’.$i.’” mce_href=”?imagen=imagenGaleria_’.$i.’” ><img src=”imagenes/imagenGaleria_’.$i.’.jpg” src=”imagenes/imagenGaleria_’.$i.’.jpg” border=”1″ width=”100″ hspace=”5″ vspace=”5″ /></a>’;
if($i == 3 or $i == 6 or $i == 9){
echo ‘<br />’;
}
}
} else {
echo ‘<img src=”imagenes/’.$imagen.’.jpg” src=”imagenes/’.$imagen.’.jpg” /><br /><a href=”http://slobos.com.ar/wp-admin/post.php#” href=”http://slobos.com.ar/wp-admin/post.php#” onClick=”history.go(-1);”>Volver a la galeria</a>’;
}
?>
Ya ven! no era naaaada dificil, espero que les sirva, cualquier cosita peguen el grito.
sds
Santiago









Este post tiene 49 comentarios
febrero 5th, 2006
hola querido santiago quisiera saber como hacer una galeria de fotos con comentarios . si me podes mandar alguna forma de hacerlo a mi mail te agradesco mucho nos vemos y muy bueno tu consejo de como armar una galeria de fotos
febrero 6th, 2006
Carlos, necesitaria saber concretamente a que te referis con comentarios, supongo que haces referencia a un epigrafe o algo al estilo.
Si bien no es dificil habria que encarar de otra forma el script. ya que en vez de guiarnos por un un loop (en este caso un for) para cargar los nombres de las imagenes, deberiamos leer el directorio donde estan las imagenes y de alli sacar el texto del epigrafe, si pudieras ser un poco mas claro respecto a lo que necesitas seria mejor.
sds
Santiago
noviembre 15th, 2007
Hola como andAS?
bueno.,. Estube viendo.e.sto..y bueno..la verdad no te pude entender ..bien.. me gustaria..saber un poco mas.. concretamente..esqe.. asi.,. ago la galeria d emi pagina.. no entiendo nada..la ago..pero en otra forma.q.e cuando la abro se pirde la pagina y solo se abre la foto..y eso no kiero qe se abra la foto pero qe la pagina se siga conservando.!! bueno.. me gustaria recibir un mensaje tuyo en mi correo graxias..
chau
enero 25th, 2008
Hola, estuve viendo el ejemplo y la verdad que esta muy interesante, lo que yo queria preguntar es lo siguiente.
He creado una tabla con los siguientes campos.
idfoto, nombre, foto, thumb, mime
quizas lo mas resaltante para lo que me gustaria hacer son los campos foto y thumb, en donde el thumb me guarda la imagen en miniatura.
comento todo esto, porque me gustaria poder mostrar las imagenes del campo thumb, que tengo en la base de datos en 3 columnas, no se si alguien me podria ayudar con el codigo en php para mostrar las imagenes
ya que el upload si lo tengo.
Espero que alguien me pueda ayudar.
De antemano muchas gracias.
saludos
febrero 2nd, 2008
Santiago, esta bueno tu sitio, sobre todo por estos consejos.
Estuve viendo un poco tu galería de imagenes y quisiera consultarte algo.
Yo tengo una galeria parecida, pero me cambie de un hosting Windows a un Linux y, segun me dicen, eso causo que ahora las fotos se ordenen en forma aleatoria. Será cierto. Las imagenes se guardan por FTP en varios directorios y luegose muestran en la pagina php.
Te agradezco si podes aconsejarme algo al respecto.
Saludos y Felicitaciones por tu trabajo.
Luis
febrero 2nd, 2008
Hola Luis, gracias por las felicitaciones che, siempre ayuda a alimentar un poquito el ego jajaja.
Respecto a lo que consultas, por ahi habria que ver como estas listando las imagenes, por ejemplo si al leer el directorio lo estas levantando en un array y lo que queres es ordenarlas alfabeticamente, directamente supongamos que el nombre de la variable del array es $arImagenes, le pones antes de empezar a hacer el loop para armar el html, sort($arImagenes), y lo que hara es ordenartelas numerica y alfabeticamente ascendetes, para mas info al respecto de manejar arrays, funcion sort
De todas formas si estas usando la función scandir, lo piola de eso es que podes usar un parametro de ordenamiento el cual puede ser ascendente o descendente. Fijate aca
Sds y espero haberte tirado una mano, sino no dudes en chiflar, de todas formas la documentación esta cada vez mas completa, pegale una mirada
agosto 1st, 2008
La verdad que una garcha el script. Una KK.
Muy incomodo, eso de volver a la galeria… una chotada . Hay 1 millon mejores.
Un saludo nabo.
agosto 1st, 2008
Seguro que si Fabian, solo que vos no me pagas un sueldo como para poner un script desarrollado enteramente. Sólo pongo éste a modo ilustrativo, si te sirve bien, sino desarrollate uno a medida. Seguramente que con tus conocimientos podes hacer algo muchisimo mejor, lastima que no se si tengas la capacidad como para compartirlo.
Saludos y gracias por participar
agosto 7th, 2008
Que tal , fijate que yo batallo con tu script me da un error : Parse error: parse error, expecting `’,” or `’;” in c:\apache\htdocs\galeria.php on line 4
no se por que , soy algo inexperto en esto del php , tampoco le he movido nada al script , que podria ser ?
agosto 7th, 2008
Ramiro, puede ser porque hayas tomado el codigo fuente que puse en el post y no te bajaste el archivito de txt , aca te dejo el link donde esta el código puro.
http://slobos.com.ar/galeria_ejemplo/codigo_ejemplo.txt
sds
Santiago
agosto 8th, 2008
Gracias me funcio muy bien , ahora seria mucha molestia, si me ayudaras con esto , veras, la galeria es llamada dentro de un celda con un , pues utilizo una estrcutura de
index?idpagina=x, total la galeria esta dentro de otra pagina y la llamo con un include , hasta ahi todo va bien me sale la galeria en la celda central donde salen los contenidos de cada seccion , pues la cosa viene cuando se le da click a la imagen para hacerla grande la habre en otra pagina ,no puedo conseguir que se habra en la misma celda.. se podra hacer eso ? se le puede dar un target?
agosto 8th, 2008
Ramiro, la verdad no entiendo lo que necesitas, pero vamos por partes, podrias pasarme la url de donde lo estas trabajando como para poder ver cual es bien tu idea?
Saludos
Santiago
agosto 8th, 2008
esque mi sitio lo estoi trabajando en mi computadora, no tengo un server aun , bueno para simplificar las cosas , se le pueder dar un target=”" al link de la galeria que hace la foto grande ? un _blank o un _self por ejemplo?
agosto 8th, 2008
Claro que podes ramiro, más alla de que la galeria este pautada como dinamica, definirle un target es una propiedad del a href, en este caso se implementaria algo asi
a href=”?imagen=imagenGaleria_’.$i.’ target=”_self” rel=”nofollow”>
sds
Santiago
agosto 10th, 2008
Que tal? me parece bueno el código, pero tengo un problemita, me cargan bien las fotos ordenadas de tres en tres por columnas, pero cuando le doy click en la imagen para ampliarla se queda en la misma ágina. les dejo el código a ver:
‘;
if($i == 3 or $i == 6 or $i == 9){
echo ”;
}
}
} else {
echo ‘Volver a la galeria‘;
}
?>
agosto 12th, 2008
Santiago me fuciono bien , despues se me vino la idea de que la foto se abriera en un popup de 400×400 px lo intente con java script , pero no me resulta me manda error , tu crees que si pueda asi con un popup y me podrias decir como ?
septiembre 11th, 2008
Buenas…por que se estan empleando etiquetas extrañas. Por ejemplo
xsrc, xhref, mce_src, ‘
septiembre 11th, 2008
Sabes, que recien me doy cuenta?, lo cierto es que no tengo nocion de porque salio así. De todas formas te sugiero que te guies por el codigo fuente que deje en un link aparte.
sds
Santiago
septiembre 26th, 2008
E copiado fielmente el codigo, pero no me da…. me sale…
Back’; } ?>
donde back es volver a la galeria!!
y en vez de salir 9 imagenes sale esto: …/slideshow/img%27.$i.%27.jpg es un cuadro con el tipico simbolo de no hay imagen!!
Porque sucede esto?
noviembre 21st, 2008
te felicito por el pequeño tutorial.gracias me ayudastes mucho.
diciembre 14th, 2008
muy buen articulo ya hace tiempo buscava algo como esto gracias…
enero 7th, 2009
hola!! intento hacer click en la miniatura y no me responde! copié tal cual el codigo
‘;
if($i == 3 or $i == 6 or $i == 9){
echo ”;
}
}
} else {
echo ‘Volver a la galeria‘;
}
?>
que puede ser??
enero 26th, 2009
Oye hermano, me parece que le falta algo al codigo, porque solo me marca en el URL la sentencia de la foto que quiero abrir pero no la abre pues… jajajja, meti el mismo codigo y solo cambie lo evidente, nombres de la carpeta y fotos mira:
‘;
if($i == 3 or $i == 6 or $i == 9 or $i == 12){
echo ”;
}
}
} else {
echo ‘Atras‘;
}
?>
No se si tenga algo que ver que lo meti en una estructura
Por el momento estoy investigando la funcion isset
enero 26th, 2009
Oye hermano, me parece que le falta algo al codigo, porque solo me marca en el URL la sentencia de la foto que quiero abrir pero no la abre pues… jajajja, meti el mismo codigo y solo cambie lo evidente, nombres de la carpeta y fotos mira:
‘;
if($i == 3 or $i == 6 or $i == 9 or $i == 12){
echo ”;
}
}
} else {
echo ‘Atras‘;
}
?>
No se si tenga algo que ver que lo meti en una estructura html /html
Por el momento estoy investigando la funcion isset
enero 26th, 2009
Estimad@, deberias ver el codigo que deje en esta direccion
http://slobos.com.ar/galeria_ejemplo/codigo_ejemplo.txt
Ahi tenes el codigo puramente.
De hecho , podriamos hacer un update de ese script minimamente a ver como podemos hacerlo mas simple y sin nada enmarañado.
sds y date una vuelta durante la semana, talvez tenga algo mas apropiado.
Santiago
enero 26th, 2009
Antes que nada, gracias, y disculpa. ¿Gracias y disculpa? asi es jajajaja bueno nos tomaremos un poco de tiempo para toda la banda.
El isset = es para comprobar que una variable existe, (Gracias por la explicacion aya en cristalab), despues el nombre para comprobar es imagen, o la variable pues, lo que nos paso a joseph y a mi, es que al momento de cambiar nombres para carpetas y archivos, nos confundimos y tambien cambiamos la comprovacion de la variable haciendo claro un error en el script, a href=”?imagen=img_’.$i.’”> esta parte le podemos poner lo que queramos pero lo que se debe conservar iintacto es href=”?imagen=
febrero 28th, 2009
Hola a todos, la idea es buena pero creo que se puede mejorar bastante sin necesidad de php, con listas en html y css se pueden conseguir verdaderas locuras de galerias.
Gon
febrero 28th, 2009
Hola Gonzalo,
Seguro que se puede mejorar y mucho, de hecho el script original a tenido una leve evolución respecto al original y lo podes ver aca.
http://foros.cristalab.com/galeria-de-imagenes-con-php-t67727/
sds y gracias por pasar
Santiago Lobos
marzo 12th, 2009
Estimado:
Muy buen aporte el tuyo. Gracias.
No hagas caso de los giles como ese Fabian que te bardeo, nunca falta el pendejo boludo.
abril 10th, 2009
Felicidades Santiago, muy practico tu script, estuve jugando con el ylo modifique un poco para que en lugar de mostrarte la imagen en una página diferente, mejor te lo abra en la misma página con el efecto de Lightbox, te lo envio para que lo revises y veas si vale la pena publicarlo en el Blog, a lo mejor a alguien más le puede servir.
Saludos
Randy Espíritu
abril 10th, 2009
Claro que si randy, envialo y vemos de publicarlo y enriquecerlo con alguna que otra idea que anda rondando
sds
Santiago Lobos
abril 16th, 2009
Pero que bien funcionan los ejemplos de Cristalab, si esque ya está todo inventado!
mayo 9th, 2009
Hola Santiago!. Gracias por tu aporte, lo estuve probando.. Tengo una consulta para hacerte, a ver si me explico: Usando esta galeria, cuando haga click en alguna de las fotitos, se me abra una pagina html con la foto en grande y a la vez me permite ir recorriendo el resto de la carpeta de fotos, con un link (siempre desde el html que tiene la foto grande). Como si uno hiciera un html para cada foto grande (es lo que yo hago porque no se hacerlo de otra forma), pero que sea dinamico con php.
Tenes algo asi hecho?
Muchas gracias!!
mayo 12th, 2009
Karina, no hay mejor agradecimiento que saber que les es útil este humilde y sencillo aporte.
Respecto a lo que me preguntas, si bien no tengo nada hecho ya, es cuestion de modificar un poco este mismo script para hacerlo a tu necesidad, de todas formas si te fijas La galería de imagenes con php crece, ahi el amigo Randy integró el script con lightbox que si bien no es precisamente lo que necesitas es una aproximación bastante importante.
Espero te sirva, de no ser así, avisame y vemos de modificarlo.
sds
Santiago Lobos
junio 8th, 2009
hola santiago mira me funciono, pero queria poner mas imagenesz me funciono tbn pero no se me ven la imagenes en miniatura, solo se me ven la primeras 9 y las otras no.
gracias.
julio 19th, 2009
Hola Santiago FELICITACIONES ME AYUDASTE MUCHO lo neceitaba mucho hacer eso pero tengo un inconveniente disculpa que te moleste yo se que tu tiempo debe ser ocupado Soy del Ecuador, quisera saber como me puedes ayudart si yo doy un click en la imagen salga algu ncomentario de la imagen y puedar volver despues a la galeria
Te agradeceria muchisimo se poquisimo de PHP estoy recien iniciando
Atentamente
Tito
julio 21st, 2009
Hola Santiago soy Tito por favor no me ha respondido pero hay le dejo mi url para que veas lo que trato de hacer
Gracias
agosto 2nd, 2009
Hola Santiago, me pareció muy buena la idea de la galería, a grandes rasgos, ya que estoy recién empezando con php. Es impresionante el alcance que tiene este lenguaje.
Estoy trabajando en un proyecto y me gustaría que me pudieras dar una manito si no es molestia.
Quiero hacer una página que cuente con una sección en el centro donde tenga 114 fotos, una por piloto, es una página de información de carreras de una liga local. Calculo que para agregar dinamismo desde el index debería ser php. Al hacer click en una de las fotos me direccione a la galería de cada piloto. O sea, en la página pincipal noticias y todo eso y una foto por piloto (el tema de las noticias lo veo después), y al entrar en un piloto fotos de este únicamente; por lo tanto serían 114 galerías, està bien? Una por piloto. Dentro de cada galería estarían los thumbnails y debajo de estos un espacio para poner comentarios como tienes en este blog. Es posible o estoy loco?
Muchas gracias por comentar y por desburrarnos.
octubre 14th, 2009
Muchas gracias por tu espléndido aporte. Ya conseguí incluir comentarios en las imágenes editando el fichero lightbox.js
de esta forma:
updateDetails: function() {
// if caption is not null
if (this.imageArray[this.activeImage][1] != “”){
this.caption.update(this.imageArray[this.activeImage][1]).show();
}
// if image is part of set display ‘Image x of x’
if (this.imageArray.length > 1){
if(this.activeImage + 1 == 1)
this.numberDisplay.update(“Comentarios de la imagen 1″).show();
else if(this.activeImage + 1 == 2)
this.numberDisplay.update(“Comentarios de la imagen 2″).show();
(…) }
Mi duda es: ¿sería posible discriminar algunas de las imagenes que se encuentran en el directorio “gal” de modo que no se visualicen todas? He probado a agruparlas en directorios diferentes y a cambiar el prefijo “imagen_” pero no consigo que funcione.
Muchas gracias por vuestra atención. Saludos.
febrero 3rd, 2010
buenas tardes… muchas gracias por el codigo pero cmo lo podria modificar para que me salgan tpdas la imagens en miniatura y con una flecha ir cambiandolas… Sera q con ese codigo es posible aplicarle ajax??
abril 12th, 2010
Hola santiago excelente aporte!, pero tengo un pequeño problema, al ver la pagina principal las imagenes que deberian de aparecer en miniatura no me aparecen a que se debe que instrucion mas tengo que poner.
mira el codigo que tengo es:
‘;
if($i == 3 or $i == 6 or $i == 9){
echo ”;
}
}
} else {
echo ‘Volver a la galeria‘;
}
?>
solo mi problema en las imageners en miniatuda a las que hay que darles click, todo lo demas esta bien!!,…
gracias
abril 12th, 2010
‘;
if($i == 3 or $i == 6 or $i == 9){
echo ”;
}
}
} else {
echo ‘Volver a la galeria‘;
}
?>
mayo 18th, 2010
saludos, el script me funciono en localhost, pero cuando lo subi no puedo visualizar las imagenes, alguna idea? tal vez es el header?, bueno seguire intentando, muchas gracias amigos.
mayo 19th, 2010
Hola Julián,
La verdad es que tendría que ver el código que estas usando porque me llama poderosamente la atención que en el localhost funcione bien y cuando lo montas en tu servidor no marche.
Respecto del header …. mmmm en ningun momento he planteado algun header en particular.
En todo caso pega tu codigo aca y vemos que le pasa.
Saludos
Santiago Lobos
mayo 19th, 2010
mira el script sin modificaciones lo subi a mi web aqui http://www.metalymetal.com/galeria y agregue el directorio lo llame imagenes, no se porq no se visualizan las imagenes, alguna idea? seguire intentando, muchas gracias por tu pronta respuesta Santiago Lobos.
Saludos
junio 1st, 2010
hola master yo quiero aser una galeria de fotos con descripciones como parauna paguinita de vent ade a utos con el modelo y que se pued a cargar las fotos por el usuario como que autogestionable te agradesco algun link par aaser esto gracias un saudo
septiembre 18th, 2010
buenas ramiro espero me puedas pasar el codigo php puro de la galeria se que debo de cambiar las url tuyas… pero cuales debo de poner?? ademas es necesario crear la carpeta imagenes??
gracias y espero tu respuesta
septiembre 5th, 2011
hola, buscando ayuda encontre tu galería y me parece excelente, la ayuda que necesito es para resolver el siguiente codigo, no se si puedas ayudarme o tal vez orientarme, pero te explico que es lo que necesito: Un listado de un directorio web, en donde los directorioas aparezcan con una imagen y los archivos pdf´s con otra imagen, ademas de aparecer siempre en 3 columnas. Este es el codigo que tengo hasta el momento, pero no funciona al 100% como necesito:
<?php
$columns = 3;
$ele = array();
$directorio = opendir(".");
while ($archivo = readdir($directorio)) {
$nombreArch = ucwords($archivo);
$nombreArch = str_replace("..", "Atras", $nombreArch);
$ele[] = $nombreArch;
$no_mostrar=array("",".php",".html");
echo "”;
}
closedir($directorio);
echo “”;
$z = 0;
foreach ($ele as $arc) {
if ($z % $columns == 0) {
echo “”;
}
echo ‘‘ . $arc . ‘‘;
$z++;
if ($z % $columns == 0) {
echo “”;
}
}
echo ”;
gracias por tu tiempo y espero tu respuesta.
saludos desde mexico.
octubre 9th, 2011
hola santiago que interesante y complicado se torno todo esto…pero la verdad he estado buscando codigo fuente en php de este tipo para el catalogo fotografico pero el codigo puro no me funciona del todo bien pues las imagenes me las muestra con la ‘x’ y el codigo del list box me muestra la pagina el blanco cuando ejecuto el archivo galeria.php….ayudame x fa…si existiera algun otro codigo de catalogo que tuvieras 100% funcional. 1000 GRACIAS DESDE GUANAJUATO, MEXICO
Trackbacks
Agregar comentario