4 dic 2012

[PHP] PHP Folder Gallery

Hace algún tiempo publique en este mismo blog un script para mostrar una galería de imágenes que estén en una subcarpeta.
Hoy he publicado la primera release de la nueva versión la cual incluye estas mejoras:


  • Ahora lista subcarpetas como galerías (por ejemplo fotos/viaje, /fotos/amigos, etc)
  • Ahora thumb.php comprueba que la ruta a la imagen sea correcta y no contenga ./, ../ , empieze por / o apunte a una url, incluye una opción para crear miniaturas cuadradas recortando la imagen y guarda la imagen en el formato original (jpg, png o gif)
  • Otros cambios menores

Instalación:
Para instalar los scripts solo hay que ir al repositorio del proyecto usando el sistema de control de versiones git o pulsando en esa misma pagina en Download.

Configuración:
galeria.php:

  • $path: ruta a la carpeta donde están las galerías (no puede empezar por / y/o incluir ./ ni ../)
  • $limit: Cuantas imágenes se mostraran por pagina
  • $limit_file: Cuantas imágenes mostrara por fila en la tabla.

thumb.php:
  • $size: tamaño de la miniatura
  • $square: poner a true si se quieren generar miniaturas cuadradas.

Usar Lightbox:
En la anterior entrada lei varios comentarios pidiendo como usar Lightbox 2 en la galeria.

Lo primero es bajar la ultima versión desde su pagina oficial
Una vez bajado y descomprimido abre galeria.php y después del tag title añade las siguientes lineas:

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet"></link>
Ahora buscamos la siguiente linea:
echo "<td><a href="http://www.blogger.com/$list[$i]"><img src="thumb.php?img=$list[$i]" />
y justo tras href='$list[$i]' ponemos rel='lightbox[galeria]' quedando así:
echo "<td><a href="http://www.blogger.com/$list[$i]" img="$list[$i]" rel="lightbox[galeria]><img src=" thumb.php="thumb.php">

Espero que os guste la nueva versión ^^

35 comentarios:

Kein "Gran Jefe" dijo...

Me marca error de syntax en el area de $list =[]; como tambien en la parte de $folder = split('/', $folder)[1];

Son Link dijo...

Por favor pasame lo que te muestra ese error y que versión de PHP usas.

Unknown dijo...

me marca el mismo error

Unknown dijo...

el error de $list = [] lo he arreglado cambiandolo por $list = array(); ....no se si es del todo correcto...., pero el otro soy incapaz de ver el error de la sintaxis, es justo aki "$folder = split('/', $folder)[1];"

Unknown dijo...

PHP Version 5.4.4 , porcierto esta es mi version de PHP

Son Link dijo...

Unknow ¿tienes subcarpetas dentro del directorio indicado en $path?
A mi no me da ese error, así que supongo que sera por eso.
De todos modos añadiré una opción si solo queréis las imágenes dentro de una sola carpeta

Kein "Gran Jefe" dijo...

Uso la versión 5.3.17 de php, tanto como dreamweaver como el servidor ya una vez subido marca el mismo error en la misma linea que ya mencionamos antes te lo pongo en google +

Unknown dijo...

sip, tengo subcarpetas.... , voy a corregir el asunto....y mñana te digo resultados, que hoy ya es tarde, jaja, gracias y un saludo !

Unknown dijo...

nada....he probado sin subcarpetas....y me sigue saltando el error en las miasmas lineas que antes te dije :( :(

Son Link dijo...

Ok, acabo de subir la r3 y arregle los fallos, al menos a mi no me salta ningún error.
De todos modos en $path no pongáis la / al final ya que si lo ponéis da fallo.
La forma correcta es como viene por defecto.
A, y ahora comprueba si hay al menos una subcarpeta, si no mostrara un aviso de ello.

Kein "Gran Jefe" dijo...

Men un segundo error esta vez en thumb.php en la linea 10 esta un error:
if ( !preg_match_all('[^\/|\.\/|\.\.\/]', $img) && is_file($img)){

}
no mostraba las miniaturas asi que borre esa linea 10 y un } al final del script y ya me lo muestra correctamente. checalo porfa :D

Kein "Gran Jefe" dijo...

A la hora de darte la lista de las carpetas sale fotos/subcarpetaSUBCARPETA la de mayusculas es en si el link se ve algo estorboso ya que sale pegado a la direccion de las carpetas, lo que yo hize es que solo me muestre las carpetas, un poco de maquetacion con css para que se vea mejor y listo.
La pagina donde ando probando el script por si quieren checar :D

http://sekaina.net/galeria/

Nota:si requieren ayuda tambien coopero no soy experto pero creo puedo aportar cositas.

Unknown dijo...

a ver si me podeis exar un cable.... , en mi codigo tengo pisos....y al hacer click en un piso salta a su galeria de imagenes tal y como tiene KEIN...., pero no se que debo estar haciendo mal que no me sale nada, me dice que el directorio FOTOS o imagenes tiene o no tiene subcarpetas, pero no me muestra las imagenes....y cada piso tiene un ID, asique lo unico que he cambiado en el codigo es la variable path que la he colocado asi:
$path = 'imagenes/'.$id.'';
.... pq no me funciona !? ideas !? , gracias por vuestra ayuda y enhorabuena por el script Alfonso

Unknown dijo...

hola ya eh provado el codigo esta vez si me esta funcionando pero ahora tengo otro porblema sucede que queria este codigo para acompletar otro que era de un upload en el que el dueño de la pagina subia imagenes sin saber nada de programacion con un sencillo upload estas imagenes se depositarian en una carpeta de el servidor y de ay que el codigo que necesitaba cobra utilidad poniendo todas las imagenes que estan en esa carpeta en una pagina pero mi problema es que el upload que tengo no mete imagenes en subcarpetas y este nuevo codigo solo me muestra las imagenes de una subcarpeta por ejemplo el uploas sube las imagenes a fotos/ y el codigo que publica las imagenes de fotos/subcarpeta no se como arreglar esto si sera mejor modificar el upload y ¿de que manera podria modificarlo? o hay manera de modificar el codigo que pones para que no necesite mostrar la imagen de una subcarpeta sino de la carpeta donde pone las imagenes el upload ¿que opinan?

y otro pequeño problema es que en todo momento pareciera que se empieza a cargar alguna imagen y cuando le doy a una imagen pareciera que se cargaran 2 una es la que abre de el thumb y la otra no se de que sea pues nunca termina de cargar solo aparece el cuadro blanco con el preloader no se por que pase pero es un inconveniente minimo
dejo el link de como quedo mi primera prueva de la galeria:

http://comcomcom.byethost4.com/galeria.php

muchas gracias por la ayuda me gusto bastante seguire esperando mas comentarios aver si me audan a arreglar estos desperfectos.

Son Link dijo...

Kein, me gusta como te a quedado y cualquier ayuda es bien recibida ^^
Unknow, habla un poco mas claro por favor ya que apenas e entendido nada.
y Jesus, espera un poco ya que en breve colgare una versión con una opción para que solo mire en una carpeta, ademas estoy viendo que has invocado 2 veces al script de Lightbox y su CSS, quizás por eso se ve mal.
E estado algo liado y apenas toque el código.

Unknown dijo...

vamos a ver, disculparme, os explico.
Mi web contiene varias fichas de pisos con sus caracteristicas....y cada piso tiene una ID.... , bien, el cliente hace click en la ficha del piso que más le guste y esto le llevará a la pagina en cuestión del piso seleccionado con su galería de imagenes.
Para identificar el piso que ha sido seleccionado lo hago mediante $_GET['id'].....
en la carpeta IMAGENES tengo subcarpetas con el numero de ID de cada piso, para que si alguien hace click en el piso numero 5 .... se habra la galeria de imagenes sacando las fotografias de la carpeta IMAGENES / 5 , si por otro lado alguien hace click en el piso numero 3 , pues la galeria de imagenes mostraras las fotos de la ruta IMAGENES / 3 , me entendeis !?, para conseguir esto lo que he hecho ha sido cambiar la variable $PATH de tu script, poniendo esto $Path = 'imagenes/'.$id.'' ;

El resultado de todo esto es que no me muestra las imagenes, lo que me mueestra es el siguiente mensaje:

"La carpeta imagenes contiene subcarpetas"
"IMAGENES / 5"
al hacer click en ese 5 ....no me redirige a ninguna pagina y dice que no existe la pagina.... enfin, que será una tonteria, pero no sé como arreglarlo la verdad, gracias por la ayuda, un saludo !

Son Link dijo...

Unknow, solo cambia todos los $_GET['gal'] por $_GET['id']

Unknown dijo...

woow yo tambien quiero hacer justo lo que acaban de decir solo que primero queria lograr el resultado que se espera de el codigo inicial y luego hacer cambios como ese.
no habia notado que tenia dobles las lineas entre el head ya lo tengo solucionado y creo que hasta aqui estoy bastante satisfecho con tu codigo muchas gracias Alfonso Saavedra quedo perfecto mejor de lo que esperaba aunque ahora que dices que aun modificaras el codigo para que solo mire en una carpeta estare esperandolo con emocion y tambien quisiera hacer la modificacion que ponen al final si la pudieran colgar para descargar se los agradeceria mucho saludos.
dejo de nuevo el link de la galeria ya reparada:

http://comcomcom.byethost4.com/galeria.php

Unknown dijo...

hola soy yo de nuevo oye quisera pedirte un favor quisiera que en las imagenes tuviera cada un texto una clave diferente cada una y un precio pues planeo hacer una galeria de articulos el texto podria jalarlo la galeria de una base de datos mysql pero no se como lograrlo solo se crear la base de datos pero no se como haria que la galeria jalara esta informacion y la pusiera abajo de cada imagen.

Son Link dijo...

Paginar los resultados de una consulta a MySQL es algo distinto a esto.
Por hay debo de tener aun una pequeña clase PHP que hacia todo, luego reviso y lo subo.
Ademas ya subí la nueva release con la opción de usar una sola carpeta.
Ya de paso decir (salvo que alguno me siga en Twitter) estoy en un nuevo proyecto enfocado a Android usando el framework Phonegap.
Ya diré mas detalles mas adelante.

Unknown dijo...

woow quedo genial aunque ahora tengo un pequeño problema cosa de nada imagino, el problema es que las flechas que deberian de indicar que pases a la siguiente imagen y a la anterior no aparecen, aunque si presionas donde deverian de aparecer si regresa o avanza a la imagen que deberia, tambien la imagen de el tache para cerrar el ligth box aparece como una imagen rota pero igual sirve si lo presionas es muy bueno gracias por responder tan rapido Alfonso esperare a que subas la clase PHP que pagina los resultados de una consulta Mysql suena genial lo de tu nuevo proyecto aunque no se casi nada de Android aun m falta muycho para entrar en esos temas pero cuando llege a esa parte estare pendiente de lo que sigas sacando suerte y muchas gracias

Kein "Gran Jefe" dijo...

Men mismo error en thumb , y en galeria.php al elegir multi=true busca las carpetas correctamente pero al entrar a una no muestra las imagenes dice que no las encuentra, aparte encuentra las que no estan en subcarpetas. :) saludos

Unknown dijo...

hola eh echo unos cambios al codigo para detalles menores como un boton que regresa a la pagina aneterior y tambien eh centrado el contenido planeaba poner el codigo aunque igual y cualquiera de aqui lo sabe peroe l block no me lo permitio.

el codigo de el boton lo puse al final de el codigo de la galeria.php
pero quisera ponerle tambien uno para que avanzase al siguiente y cambiarle el color a la pagina no se bien como hacerlo aunque ya lo habia visto antes y no era nada dificil pero bueno queria postear esto aunque lo que si me gustaria seria modificar la apariencia de los thumbs para que proyectaran una pequeña sombra de tras de ellos y sigo esperando el codigo para Paginar los resultados de una consulta a MySQL bueno gracias lamento no poder ser de ayuda con los problemas de el codigo no se que pasara a mi no me causa ningun problema de los que ponen pienso que quisa hayga alguna diferencia por los navegadores yo nunca uso el explorer pero por lo mismo temo que yo lo este viendo bien y en el explorer no funcione bueno dejo el link de nuevo de mi galeria de prueva

http://comcomcom.byethost4.com/galeria.php

Kein "Gran Jefe" dijo...

uso chrome amigo, subo los archivos a mi servidor sekaina :p probablemente mi version de php 5.3.17

Joxsoft dijo...

Hola, me gusta mucho esta galería, la e adaptado bastante bien a lo que quiero. Solo necesitaría poder mostrar el nombre de la imagen debajo, leí en la primera versión de tu script la manera de hacerlo con $file[$i]. Pero no me funciona. Me gustaría poder mostrar solo el nombre. Sin la extensión. Esto es posible? Desde ya muchas gracias compañero.

William dijo...

y si quiero q me muestre las imagenes de 2 o mas carpetas al tiempo como ago?

Fran dijo...

Combino este scrtip con otro que consiste en que las fotos sean subidas por los usuarios mediante un formulario.

¿Cómo podría hacer para que las últimas fotos que suban se coloquen las primeras? Es decir, quiero que las últimas fotos que sean subidas se muestren las primeras dejando las más antiguas para el final.

Gracias y un saludo!

Agustín dijo...

Hola! gracias por el script. Tengo un problema: No se me crean los thumbnails! me pagina todo y me cuenta bien la cantidad de imagenes, pero en vez de aparecer los thumb me aparecen unos iconitos de una imagen rota.

Haruma Miura dijo...

hola yo tambien queria hacer eso y lo consegui creando en una base de datos un campo donde guardo numeros que representan el orden de las imagenes por ejemplo la primera que subo en su campo coorrespondiente le pongo el 1 la segunda 2 la tercera 3 y asi y luego en el code para que se muestren le pongo en el code SQL :

SELECT * FROM tblproducto WHERE tblproducto.intCategoria = %s ORDER BY tblproducto.intOrden DESC

la ultima parte le dice a el servidor que muestre todo desde la tabla donde esta almacenada la info osea tblproducto en orden de el campo intOrden que es donde almaceno el orden en el que las voy subiendo pero de manera DESCENDENTE por lo que los ultimos numeros seran los primeros en mostrarse.
esto no es tan dificil a la hora de subir las imagenes si haces que se haga por automatico, yo no pongo manualmente el orden cada que subo una imagen solo la subo con un upload y el orden se añade en automatico pero para eso igual se necesita otro code php.

Haruma Miura dijo...

hola eso es facil solo hay que guardar el nombre que quieras que se muestre en una base de datos y despues jalar dicho nombre de aquella base de datos y puedes ponerlo donde quieras arriba abajo. aunque el tema es algo largo hay unos videos tutoriales que muestran como hacer esto de forma muy sencilla este es el link: http://www.youtube.com/watch?v=lQa3DRmZSrA

si sigues este tutorial hasta el cap 25 aprenderas como lograr eso y mas aunque enseña a hacerlo con dreamweaber pero aun asi no esta nada mal.

Robinson dijo...

saludos amigos todo perfecto pero no veo los thumbmail que podra ser ???

Robinson dijo...

a mi me pasa igual !!!

Miguel Martinez dijo...

Buenas hermano, disculpa la molestia pero no me muestra las imagenes, tampoco me da error, que puede ser? ayuda por favor

Miguel Martinez dijo...

Buenas noches por favor urgente requiero su ayuda, me aparece como imagen rota y cuando le doy clic me carga la imagen, no me esta haciendo el efecto ni nada, por favor si me pueden ayudar se los agradezco

Alex dijo...

Buena tarde Alfonso Saavedra, te comento que tu idea está genial. Puntos para tí.

Tengo una duda, como le hago para que ya funcione el Lightbox... Puesto que ni en galeria.php ni en thumb.php viene el apartado :
echo "

Donde exactamente tendré que cambiar los valores para que cuando le de click a la imagen ya no me mande a otro enlace si no que use el LIGHTBOX. Espero me puedas aportar tus conocimientos. Saludos

Publicar un comentario

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Powered by Blogger