Con PHP se puede hacer una galería de imágenes muy fácilmente y con un CSS le daremos un poco de estilo para que la galería sea más bonita y con lightbox mostraremos las imágenes.
El proceso para hacer la galería de imágenes se puede separar en dos apartados, subir las imágenes y mostrar las imágenes.
Como subir las imagenes para la galeria
Para subir las imágenes lo primero es crear un formulario para elegir las imágenes que se quieran subir. Vamos con ello.
<form action="#" method="POST" enctype="multipart/form-data">
<table id="formularioSubida" border="0">
<thead>
<th>Elige los archivos que quieras subir</th>
</thead>
<tr>
<td>
<div class="inputImagenModificado">
<input class="inputImagenOculto" name="imagen1" type="file">
<div class="inputParaMostrar">
<input>
<img src="imagenes/button_select2.gif">
</div>
</div>
</td>
</tr>
<tr>
<td>
<input type="button" id="botonAnnadir" onClick="agregarFila('formularioSubida','botonAnnadir')" value="Añadir archivo" style="width:138px;">
<input type="submit" name="botonSubir" value="Subir">
</td>
</tr>
</table>
</form>
En el formulario anterior, he modificado el estilo del input file (mira aquí como), pero si no se quiere modificar se puede eliminar el div inputImagenModificado y sustituirla por un simple input file (<input class=»inputImagenOculto» name=»imagen1″ type=»file»>).
También en la línea 19, he puesto un botón para generar más input file dinámicamente para permitir subir varias imágenes a la vez si se quiere pero a la vez que la pagina no este llena de inputs.
Para generar los inputs usaremos una función JavaScript siguiente:
var numeroFila=2;
/*
* Funcion que agrega un nueva fila a la tabla para subir imagenes, para poder subir mas de una.
*
* @param idTabla Identificador de la tabla en la que se quiere añadir una nueva fila
* @param idBoton Identificador del boton que llama a esta funcion
*/
function agregarFila(idTabla,idBoton){
// Limitamos el numero de filas a 10.
if (numeroFila <= 10){
// Inserta una nueva fila en la posicion numeroFila (la ultima).
nuevaFila = document.getElementById(idTabla).insertRow(numeroFila);
nuevaCelda = nuevaFila.insertCell(-1);
nuevaCelda.innerHTML = '<td><div class="inputImagenModificado"><input class="inputImagenOculto" name="imagen'+numeroFila+'" type="file"><div class="inputParaMostrar"><input><img src="imagenes/button_select2.gif"></div></div></td>';
// Funcion para modificar el estilo de los inputs
mostrarInputFileModificado('imagen'+numeroFila);
// Incrementa numeroFila
numeroFila ++;
} else {
// Inserta una nueva fila en la posicion numeroFila (la ultima).
nuevaFila = document.getElementById(idTabla).insertRow(numeroFila);
// Inserta una nueva celda en la fila nueva, en la ultima posicion (por el -1).
nuevaCelda = nuevaFila.insertCell(-1);
nuevaCelda.innerHTML = '<td>Solo se pueden subir 10 archivos a la vez.</td>';
// Desactivamos el boton para agregar mas filas.
document.getElementById(idBoton).disabled = true;
}
}
Con esta función generamos los campos dinámicamente, y la línea que lo hace es nuevaCelda.innerHTML =’…’; es con la que generaremos el contenido dinámicamente, por lo tanto con modificar el contenido de esta función podemos modificar el código HTML que se generara. La función limita el número de campos creados a 10 y deshabilita el botón para que no se puedan crear más campos. Nota: Cuando pruebes a subir archivos comprueba en el archivo php.ini que el tamaño de todos los archivos juntos sea menor que el especificado en post_max_size. Sino aumenta el tamaño máximo permitido que por defecto es muy bajo.
Con lo visto hasta el momento aun no se pueden subir las imágenes, es necesario crear una función para subir los archivos que seleccionamos con los input file.
/**
* Funcion para subir imagenes
*
* @param $campoArchivo Nombre del campo en el que se subira el archivo.
* @param $dir Directorio en el que se guardara la imagen.
* @param $conexion Conexion con la base de datos.
*/
function subirImagen($archivo, $dir, $conexion){
// Se comprueba que el archivo a subir sea una imagen.
if($_FILES[$archivo]["type"] == "image/jpeg"){
// Se comprueba si ha ocurrido algun error al subir el archivo.
if ($_FILES[$archivo]["error"]) {
echo '<div class="error">Error '.$_FILES["archivo"]["error"].'al intentar subir el archivo '.$_FILES[$archivo]["name"].'</div>';
} else {
// Se comprueba si ya se ha creado el subdirectorio para almacenar la imagen.
// Y se crea si no existe aun.
if(!is_dir("imagenes/".$dir)){
mkdir("imagenes/".$dir, 0755);
}
// Comprobamos que no haya ningun archivo con el mismo nombre en el servidor.
if (file_exists("imagenes/".$dir."/".$_FILES[$archivo]["name"])) {
echo '<div class="error">Ya hay un archivo con nombre '.$_FILES[$archivo]["name"].'. Renombralo y vuelve a subirlo.</div>';
} else {
// Subimos la imagen.
move_uploaded_file($_FILES[$archivo]["tmp_name"], "imagenes/".$dir."/".$_FILES[$archivo]["name"]);
echo '<div class="subido">Archivo '.$_FILES[$archivo]["name"].' subido.</div>';
// Agregamos la imagen a la base de datos.
$consulta = sprintf("INSERT INTO galeriaimagenes (archivo, directorio) VALUES ('%s','%s')",
$conexion->real_escape_string($_FILES[$archivo]["name"]),
$conexion->real_escape_string($dir)
);
// Se ejecuta la consulta.
$conexion->query($consulta);
}
}
} else {
echo '<div class="error">'.$_FILES[$archivo]["name"].': Formato de archivo no permitido. </div>';
}
}
La función esta comentada prácticamente línea por línea con lo que no creo que sea necesario añadir nada más, salvo de decir que se puesto la posibilidad de especificar el directorio en el que se quieren almacenar las imágenes para permitir que se puedan crear múltiples galerías, por ejemplo una por cada nombre de usuario. Y también que tanto el directorio como el nombre del archivo se almacenaran en una base de datos, para luego poder visualizarlas, se podría añadir una descripción u otros campos pero por simplificar la galería no se ha hecho, aunque es tan sencillo como añadir los inputs para almacenar la información que queramos añadir y luego añadirlo a la base de datos del mismo modo que se ha hecho con el nombre de la imagen o el directorio.
El código SQL para crear la tabla para almacenar las imágenes es el siguiente:
CREATE TABLE 'galeriaimagenes' (
'id' int(3) NOT NULL AUTO_INCREMENT,
'archivo' varchar(20) NOT NULL,
'directorio' varchar(20) NOT NULL,
PRIMARY KEY ('id')
);
Con la función anterior podemos subir las imágenes individualmente. Para simplificar el proceso de subir las imágenes crearemos otra función que subirá todas las imágenes, bueno realmente llamara a la función anterior con cada imagen haciendo que solo sea necesario incluir una llamada a esta función y no una llamada por cada imagen que se quisiese subir.
/**
* Funcion que comprueba los input file que contienen algo y llama a la funcion encargada de subir las imagenes.
*
* @param type $dir Directorio en el que se quiere subir las imagenes (usar '' si no se quiere usar un subdirectorio).
* @param $conexion Conexion con la base de datos.
*/
function subirImagenes($dir, $conexion){
// Recorremos la lista de campos para subir archivos.
foreach ($_FILES as $key =< $value) {
// Se comprueba si el nombre del archivo no esta vacío para subirlo
if ($_FILES[$key]["name"] != ''){
subirImagen($key, $dir, $conexion);
}
}
}
Esta función recorre los imput files y comprueba que contengan algo y si es asi llama a la función que expliquemos anteriormente. Finalmente añadimos en el archivo en el que tenemos el formulario, detrás de este una llamada a esta función dentro de un if que comprueba si se ha pulsado el botón subir.
<?php
// Subir todas las imagenes
if(isset($_POST['botonSubir'])){
subirImagenes('prueba',$conexion);
}
?>
Ahora si, con lo hecho hasta el momento ya podemos subir las imágenes y solo queda el código necesario para mostrarlas como una galería.
Con esta sencilla línea basta para mostrar una imagen, y metiéndola dentro de un bucle que recorra todas las imágenes ya tendríamos la galería, aunque la verdad el resultado seria bastante malo pues se mostrarían todas las imágenes en su tamaño original.
echo '<img src="imagenes/'.$dir.'/'.$_FILES[$archivo]["name"].'">';
Este es el código con el que generaremos la galería, un simple bucle en el que se muestran las imágenes, enlazadas a si mismas para mostrarlas con lightbox. Cosa que se consigue con la etiqueta rel=»lightbox[loquequieras]» ([loquequieras] hace que las funciones de lightbox entiendan que las imágenes con esta etiqueta están relacionadas y por lo tanto añade los enlaces para moverse entre las imagenes). La etiqueta title=»» sirve para poner el nombre que se mostrara debajo de la imagen con lightbox.
<div class="galeria">
<h1>Mis Imagenes</h1>
<?php
require 'config.php';
$conexion = new mysqli($servidor, $usuarioBD, $passwordBD, $baseDatos);
$consulta = "SELECT archivo, directorio FROM galeriaimagenes ORDER BY id";
$resultado = $conexion->query($consulta);
// Muestra las imagenes de la galeria.
while($filas = $resultado->fetch_array(MYSQLI_ASSOC)) {
// Se comprueba que existan las imagenes
if (file_exists("imagenes/".$filas["directorio"]."/".$filas["archivo"])){
echo'<a href="imagenes/'.$filas['directorio'].'/'.$filas['archivo'].'" rel="lightbox[galeria]" title="'.$filas['archivo'].'"><img src="imagenes/'.$filas['directorio'].'/'.$filas['archivo'].'"/></a>';
}
}
?>
</div>
Para usar ligthbox es necesario obviamente incluir los archivos que contienen las funciones y el estilo e incluir las siguientes referencias en el archivo donde queramos mostrar las imágenes:
<script type="text/javascript" src="lightbox/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="lightbox/js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="lightbox/js/jquery.smooth-scroll.min.js"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" />
Para el mejor aspecto de la galería realice unas pequeñas modificaciones en el codigo de los archivos lightbox.js y lightbox.css para limitar el tamaño en el que se muestran las imágenes. Estos archivos están incluidos junto con el resto del proyecto al final del post, si quieres los archivos originales puedes encontrarles aquí.
Y para darle a la galería un aspecto de galería basta con estas líneas de código CSS:
body {
background: darkgrey;
}
.galeria{
width: 1080px;
margin: auto;
background: black;
color: bisque;
padding: 20px 10px 10px 20px;
border-radius: 10px;
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.6);
}
.galeria img{
width: 200px;
height: 200px;
border: 1px solid white;
padding: 1px;
margin-right: 10px;
margin-bottom: 10px;
border: 2px solid bisque;
border-radius: 5px;
}
Con esto hacemos que las imágenes se muestren con un tamaño uniforme de 200×200 con un borde y con esquinas redondeadas con lo que la galería queda bastante curiosa.
Y para finalizar le añadiremos mediante JavaScript un «sombreado» a las imágenes para que se muestren un poco oscuras y cuando se pase el ratón por encima de alguna se aclaren. Este efecto se consigue con una sencilla función que deje la opacidad de la imagen en 1 cuando se esta sobre ella y la modifique al valor que nosotros queramos cuando no. Por ejemplo 0,5.
/**
* Cambia la opacidad de las imagenes de la galeria cuando no se esta sobre ellas al valor pasado como parametro.
*
* @param opacidad Valor entre 0 y 1 que determinara la opacidad de la imagen.
*
*/
function cambiarOpacidadImagenes(opacidad) {
$(document).ready(function(){
// Pone la opacidad de las imagenes al porcentaje indicado en opacidad.
$('.galeria img').animate({"opacity" : opacidad});
// Al pasar el raton sobre la imagen (over) se ejecuta la primera funcion y al salirse la segunda (out).
$('.galeria img').hover(
function(){
$(this).animate({"opacity" : 1});
},
function(){
$(this).animate({"opacity" : opacidad});
}
);
});
}
El resultado final es este:
Imagen con lightbox:
Inputs desplegados:
Con este código como puedes ver se puede conseguir una galería sencilla pero elegante, pero para que pudiese funcionar más fluida sería mejor añadir una función que crease las miniaturas de las imágenes para mostrarlas en la galería pero con las velocidades de hoy en día y suponiendo que no subas imágenes de unos cuantos megas prácticamente ni se notaria.
Si quieres ver el código completo puedes descargarlo aquí.
Gracias excelente trabajo, felcitaciones
Hola la verdad es un excelente tutorial, solo que me gustaria saber, como podria crear las multiples galerias y su respectiva descripción, me podrias ayudar dandome alguna idea, la verdad soy algo novato en esto, pero cualquier idea o sugerencia te lo agradeceria mucho.
Para tener varias galerias basta con que incluyas el codigo del div class=»galeria» tantas veces como galerias quieras teniendo en cuenta que cada galeria estaria en una carpeta distinta y habria que indicar cuando se llama a la función subirimagenes cual seria la carpeta en la que se guardara, es decir la galeria.
O crearlas de forma dinamica mediante una funcion.
Poner una descripción a la galeria lo puedes hacer simplemente a mano escribiendo el html o bien crear una funcion que cree galerias con los campos que quieras nombre, descripcion, autor,…
Y para añadir descripciones a las imagenes aunque es facil hay que hacer modificaciones en la funcion que crea los input file, en la que sube las imagenes (para guardar la descripcion en la base de datos) y luego mostrar la descripción en el lightbox se puede hacer aunque quizas seria mejor añadir un enlace a otra pagina en la que se mostrasen la imagen junto con su descripcion, comentarios y todas las cosas que quisieses hacer.
Si me animo quizas suba un tutorial mejorado de como crear galerias con esas caracteristicas y alguna que otra mas…
Muuuuchisimas gracias, ya he realizado la inserción de más campos a la imagen, solo que al hacer un consulta me muestra las imagenes independientes, he tratado de llamarlas mediante un identificador, es decir todas la imagenes que se ingresaron con un mismo titulo me las muestre en una sola, pero por los comentarios que haces tratare de forma, agradesco mucho tu esfuerzo y tiempo, gracias de antemano.
Genial, justo lo que buscaba. Bien explicado y con los archivos para comprobar el código. Sigue así con tu blog. y gracias
Muchisimas Gracias!! La verdad que buscaba algo de este estilo y hasta me animaria a meterle mano jajaja. Muchas gracias!! Saludos y Exitos
Pero como se cual archivo va en cual o cada uno es un archivo independiente que se conectan?
No entiendo que quieres decir, si me explicas un poco más cual es tu duda quizas te pueda decir.
anda muy bien, muchas gracias !
La modificación del input que haces no sirve con Internet Explorer, ¿¿alguna forma de solucionarlo?? gracias por el tuto
Hola
me gusta mucho tu diseño de la galeria, pero tengo un problema no se adjunta un texto a la imagen.
Me pordrias explicar algo mas
gracias
el index me marca error Fatal error: Call to a member function fetch_array() on a non-object in /home/u771042154/public_html/index.php on line 34 alguna solcion ?
Ese error se produce al intentar iterar sobre los resultados de la consulta porque ha fallado la consulta (linea 30) a la base de datos.
Comprueba que has creado la tabla galeriaimagenes (o como la llamases) dentro de la base de datos a la que te estas conectando.
CREATE TABLE ‘galeriaimagenes’ (
‘id’ int(3) NOT NULL AUTO_INCREMENT,
‘archivo’ varchar(20) NOT NULL,
‘directorio’ varchar(20) NOT NULL,
PRIMARY KEY (‘id’)
);
ok gracias hermano voy a intentarlo
He estado tratando de adjuntar un paginador a esta galería pero me ha sido imposible, mis conocimientos de PHP y Mysql no llegan tan lejos, si alguien sabe como lo agradecería infinitamente. Esta Galería es una de las mejores que he visto en cuanto a personalización. Saludos.
Nunca he hecho paginación con Mysql y PHP pero en Mysql existe limit que permite mostrar un numero determinado de registros a partir de donde se quiera.
Por ejemplo si quisieses ver los resultados del 10 al 15 podrias usar esta consulta:
SELECT archivo, directorio FROM galeriaimagenes ORDER BY id LIMIT 10, 5;
Con lo que esa creo que es la base de la paginación con Mysql, busca sobre eso que seguro que hay tutoriales de como hacerlo e integrarlo no deberia de ser demasiado dificil.
Gracias amigo.
ola..disculpen..es muy buena informacion, solo que deseo que a esa misma galeria se le pueda agragar un boton eliminar o actualizar y que se pueda elegir alguna imagen y cambiarla con el boton..espero me alla explicado y me puedan ayudar…porfa me urge estoy en un proyecto y apenas inicio con php
Hola, es muy bueno tu tutorial 🙂 Perooooo soy nueva en esto de programación y estoy intentando hacerla en netbeans php , pero no se donde va cada parte del codigo, si todo en el index o en diferentes archivos, te lo agradecería mucho ya que estoy totalmente perdida 🙂
Hola Berenice, al final del post hay un enlace desde el que te puedes descargar todo el código del proyecto tal como lo hice yo. Simplemente copia todos los archivos y carpetas que hay dentro del .rar que te
descargues dentro de la carpeta Source Files de tu proyecto de Netbeans y listo.
Ohh cierto no los había visto 😛 Muchísimas gracias 😀 !!
Muy buen trabajo felicitaciones… que bueno que hayan personas como tu que les guste compartir sus conocimientos a novatos como yo….
Tengo una pregunta… e estado intentando poner digamoslo como un titulo a la imgen es decir k en la galaria se muestre el titulo al pie de cada una…. le e dado muchas vueltas pero no lo logro hacer t agradeceria mucho cualquir sugerencia que me puedas dar….
Es muy facil en index.php dentro del div en el que se muestra la galariá hay un echo'<a href=»imagenes/galeria/’.$da… simplemente tienes que añadir dentro del echo lo que quieras que se muestre, por ejemplo:
echo ‘<div class=»imagenConTitulo»> <a href=»…»&g;<img src=»…»&g;<div&g;Nombre imagen</div&g;</a&g</div&g;’;
y añades al css .imagenConTitulo {float:left;} y quitas el float:left de img y creo que eso es todo.
Hola Ivan.. un cordial saludo..Sabes estoy intentando crear la galeria me he bajado los archivos pero no me funciona. mi pregunta es en el codigo de php tengo que daarle la svariables o no es nesesario? y en el index esta el formulario pero no se si tengo que darle en el action la pagina visor.php action tengo que redireccionarlo a otra pagina donde va el codigo php? te agradeseria pro tu ayuda.. un saludo
Lo que tienes que cambiar es los datos de acceso a la base de datos del archivo config.php del resto no hace falta cambiar nada para que funcione.
Y si quieres poner la galería en otra página simplemente copia el contenido del body de index.php y copialo donde quieras que se vea la galería.
Las imagenes se suben con el metodo subirImagenes(); si quieres que despues de rellenar el formulario te enviea a otra pagina tienes que copiar ese metodo a la pagina que pongas como destino en el action.
Hola. Ivan,
Disculpa una ves mas.. por la pregunata, en los archivos del zip que me he bajado esta el index.php que al ejecutarlo me da este error
Fatal error: Call to a member function fetch_array() on a non-object in C……..
visor.php
al ejecutarlo me da este fallo. Undefined index: id in
SCREAM: Error suppression ignored for
C:wampwwwivanvisor.php on line 3..Fatal error: Call to a member function fetch_array() on a non-object in C:
en el index.php he colocado el formulrio para cargar la simagenes como primer paso,
****************************************
sugndo paso.
he puesto dentro del header el cidigo javascript.[Para generar los inputs usaremos una función JavaScript.
*************************************************************
tercer paso:
en la mismo index.php he puesto un bloque de php y dentro he colocado el codigo php par a subir las imágenes, que dise es necesario crear una función para subir los archivos que seleccionamos con los input file.
****************************************************
cuarto paso:
crear la base de datos;
lo he hecho
*********************************************************
quinto paso:
Funcion que comprueba los input file que contienen algo y llama a la funcion encargada de subir las imagenes.
este codigo php nose donde tengo que colocarlo.
*********************************
sexto paso.
el codigo php que es para
Subir todas las imagenes
tampoco nose donde debo colocarlo.
o debo crear otros archivo de php? la conexion a la base de datos la he puesto correctamente.. no se que hago mal…. ayuda por favor…
Gracias
El error de fetch_array… es porque la consulta de la base de datos ha fallado y da un error al intentar procesar los resultados (esta explicado en un comentario anterior).
En cuanto al resto acabo de bajarme el código para comprobarlo por si habia hecho alguna modificacion en el que tengo en mi PC y no hay ningun visor.php asique o bien tengo algun enlace que no veo o estas mezclando cosas.
Finalmente si te descargas el zip que tiene el código no tienes que cambiar nada para que funcione porque es el código completo del ejemplo con lo que lo unico que tienes que hacer para que funcione es crear la tabla en la base de datos y cambiar en el config.php los datos de acceso a la base de datos.
Hola..bueno lo volvere a intentar haber si me resulta,gracias por tu tiempo. un saludo.
Hola .. pues si he bajado el codigo de nuevo y me funciona perfecto. gracias..Saludos
Alguien sabe como hacer thumbnail de paginas web?, quisiera hacer vistas previas de varias paginas web pero no se como hacerlo, alguien me puede ayudar?
Hola Ivan.. Saludos..Cuando te animas hacer el tutorial con diferentes gallerias? Una idea seria crear una tabla en la base de datos con dos campos idGaleria y descripcion, y en el index.php colocar una funcion para poder crear las galerias y en la misma pagina colocar un selector donde muestrea las galerias creadas en la base de datos de manera que al subir las imagenes uno pueda seleccionar encual galeria las quiera guardar, y en otra paguina crear una consulta a la base de datos para mostrar las galerias con sus respectivas fotos. de manera que el index.php solo sea utilizado para crear las galerias y para subir la s imagenes.. que te parese?? yo lo he intentado pero no me resulta pues no tengo aun todo el conocimiento para programarlo…o quizas tu me pudieras ayudar seria super…un feliz dia…espero tu comentario a serca del tutorial o proyecto…
¿Es posible adicionarle un campo de texto al sistema? pasa que me serviría para mostrar unas «calugas» (imágenes publicitarias), que al pincharlas lleven a un sitio Web específico… Agradeceré mucho si me puedes orientar en cómo proceder. De antemanos, gracias!
Hola, me gustaría saber por que me da este error :/
#1064 – You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near »galeriaimagenes’ ( ‘id’ int(3) NOT NULL AUTO_INCREMENT, ‘archivo’ varchar’ at line 1
tambien me da el mismo error
Amigo intenta con esta tabla.
CREATE TABLE `galeriaimagenes` (
`id` int(11) NOT NULL AUTO_INCREMENT ,
`archivo` varchar(20) NOT NULL ,
`directorio` varchar(20) NOT NULL ,
PRIMARY KEY (`id`)
) ENGINE = MYISAM
saludos, muy bueno el tutorial, pero tengo una consulta, no soy muy experta en el tema, y por eso necesito una gran ayuda, no se como implementar un paginador, para que se puedan ver todas las imagenes y sean cargadas en proximas paginas.. por favor necesito esta gran ayuda.. Gracias
Buenas Noches muy buen trabajo y exelente tutorial, solo tengo una pregunta cuando intento subir una imagen com un peso mayor a 2Mb no me la sube y dice que el formato no es e correcto, quisiera saber como puedo agrandar el tamaño permitido para subir imagenes, muchas gracias
Tienes que modificar la configuración del servidor para que acepte archivos con un tamaño mayor en el php.ini aumentando el upload_max_filesize.
Por ejemplo, upload_max_filesize = 10M
Perdona la pregunta pero, como podria hacer que la imagen se estirase un poco mas? para que se vea un poquito mas grande al hacer click sobre ella? es decir que archivo debo modificar? muy buen tutorial, muchas gracias.
Para que las imagens se agranden al 100% puedes usar el lightbox.js original o si no puedes modificar el lightbox.js, el tamaño esta limitado a 800px en el if de la linea 205, cambia el ancho o el alto maximo para que se ajusten a lo que quieras y listo.
Es un excelente trabajo y muy bien logrado! Felicitaciones! te realizo una consulta, al subir nuevas imagenes y terminar el proceso de carga al pie de la pagina aparece en verde «Archivo (nombre del archivo) cargado» pero no se actualiza en la galería, por lo tanto para ver la nueva foto en la galería debo actualizar la página. Como se puede resolver ese problema?? Saludos
Lo mas sencillo es que metas el codigo que carga las imagenes en una funcion y que la llames ademas de al cargar la pagina cuando se termine la carga de las imagenes.
Gracias por la respuesta! antes que nada, corrijo mi pregunta ya que no es un problema que no actualiza sino que está diseñado así.
Por ultimo agradecerte tu respuesta, finalmente lo que hice fue separar la galería del código de carga, y en la galería colocar un botón para quien quiera subir una foto abra el formulario de carga aparte. Finalizada la carga el usuario regresa a la galería y ya ve las fotos.
Saludos!
wow excelente tuto muchas gracias me sacaste de varias dudas
men, no se si aun vives, lo unico que sé es que eres un crack
Amigo todo correo bien, me agrega correctamente la imágenes a la BD pero no me las muestra, es decir no me muestra la galería, a que se debe? ayuda.
mismo problema porfa ayuda…
algun error de php o de javascript en la consola del navegador?
hola… descargue el codigo fuente y me sale estos errores:
Warning: mysqli::mysqli() [mysqli.mysqli]: (42000/1049): Unknown database ‘prueba’ in C:xampphtdocsgaleriaphpindex.php on line 28
Warning: mysqli::query() [mysqli.query]: Couldn’t fetch mysqli in C:xampphtdocsgaleriaphpindex.php on line 31
Fatal error: Call to a member function fetch_array() on a non-object in C:xampphtdocsgaleriaphpindex.php on line 34
Ese error es porque no puede conectarse a la base de datos prueba,
tienes que poner en el archivo config.php los datos de tu propia base de
datos.
Los del ejemplo son:
$servidor=»localhost»;
$usuarioBD=»root»;
$passwordBD=»»;
$baseDatos=»prueba»;
pero es solo un ejemplo 😉
PUBLICA LA BASE D EDATOS AMIGO
La base de datos solo tiene la tabla galeriaimagenes, simplemente crea una bd y ejecuta este script y listo.
CREATE TABLE ‘galeriaimagenes’ (
‘id’ int(3) NOT NULL AUTO_INCREMENT,
‘archivo’ varchar(20) NOT NULL,
‘directorio’ varchar(20) NOT NULL,
PRIMARY KEY (‘id’)
);
hola!! buenísimo tu aporte. Bajé el código que compartiste, armé la base de datos y todo funciona perfecto…excepto que no me muestra las imágenes. Las carga en la base de datos, las guarda en el directorio , me comunica que las sube, pero no me las muestra en pantalla. Cuál es la solución??
anitaberraud@hotmail.com
Gracias por compartir es justo lo que buscaba ……..
estoy empezando en php y mi pregunta es…… ya tenia el proyecto empezado cuando he encontrado este post y la cuestion es que mi base de datos es muy parecida a la tuya …tengo un campo id_trabajo auto_incremental, pero en vez de los campos archivo y directorio tengo los campos url_thumbs, url_imagen , url_video…..
tengo los campos thumbs e imagen pq queria subir una imagen mas pequeña para la imagen de la galeria y otra mas grande para cuando la abra en el lightbox…..
el tema es que no se si eso seria muy dificil de hacer con esta plantilla y ademas tambien cargo url de videos emdebed a la base de datos y por la misma consulta de la variable trabajocargo tanto las imagenes como los videos……
mi duda es …. para subir una imagen en vez de al campo archivo , subirla al campo url_thumbs que tengo que modificar pues hay muchas $archivo y no se cual es la que tengo que modificar concretamente…
tambien me gustaria saber como puedo hacer para que el administrador reconozca mas formatos de archivos como png o gif
y tambien que pueda subir url de video embed
tambien cargo unos campos de texto debajo de las imagenes un campo autor y otro categoria pero supongo que eso ya lo tengo mas asumido pues solo debo de modificar la consulta para que me coga tambien los campos autor y categoria…
gracias y espero tu respuesta
En realidad no es necesario que cambies ninguna de las apariciones de $archivo en la función para subir la imagen, simplemente tienes que cambiar el inserto para que se adapte a los campos de tu tabla, y en las líneas siguientes del inserto poner todos los campos de tu tabla. Pero para que luego sea tu código más entendible deberias de cambiar el nombre de la variable archivo en toda la funcion.
En lo referente a los tipos de imagenes si te fijas se hace una comprobación para ver si el tipo del fichero es un jpg, quitala o añade todos los tipos de archivo que quieras permitir a la condición
Hola amigo soy nuevo en php, la verdad es que quiero colocar en una pagina 3 modelos y no se como se puede agregar este codigo para que tome las 3 por separado. Intente hacer lo que planteas pero nada nose que estoy haciendo mal me puedes ayudas por favor.
$value) {
// Se comprueba si el nombre del archivo no esta vacio para subirlo
if ($_FILES[$key][«name»] != »){
subirImagen($key, $dir, $conexion);
}
}
}
/**
* Funcion para subir imagenes
*
* @param $campoArchivo Nombre del campo en el que se subira el archivo.
* @param $dir Directorio en el que se guardara la imagen.
* @param $conexion Conexion con la base de datos.
*/
function subirImagen($archivo, $dir, $conexion){
// Se comprueba que el archivo a subir sea una imagen.
if($_FILES[$archivo][«type»] == «image/jpeg»){
// Se comprueba si ha ocurrido algun error al subir el archivo.
if ($_FILES[$archivo][«error»]) {
echo ‘Error ‘.$_FILES[«archivo»][«error»].’al intentar subir el archivo ‘.$_FILES[$archivo][«name»].»;
}else{
// Se comprueba si ya se ha creado el subdirectorio para almacenar la imagen.
// Y se crea si no existe aun.
if(!is_dir(«imagenes/».$dir)){
mkdir(«imagenes/».$dir, 0755);
}
// Comprobamos que no haya ningun archivo con el mismo nombre en el servidor.
if (file_exists(«imagenes/».$dir.»/».$_FILES[$archivo][«name»])) {
echo ‘Ya hay un archivo con nombre ‘.$_FILES[$archivo][«name»].’. Renombralo y vuelve a subirlo.’;
}else{
// Subimos la imagen.
move_uploaded_file($_FILES[$archivo][«tmp_name»], «imagenes/».$dir.»/».$_FILES[$archivo][«name»]);
echo ‘Archivo ‘.$_FILES[$archivo][«name»].’ subido.’;
// Agregamos la imagen a la base de datos.
$consulta = sprintf(«INSERT INTO galeriaimagenes (archivo, directorio) VALUES (‘%s’,’%s’)»,
$conexion->real_escape_string($_FILES[$archivo][«name»]),
$conexion->real_escape_string($dir)
);
// Se ejecuta la consulta.
$conexion->query($consulta);
}
}
}else{
echo ».$_FILES[$archivo][«name»].’: Formato de archivo no permitido. ‘;
}
}
?>
Excelente amigo. Gracias. Tengo pensado hacer algo similar pero orientado a objetos y con mvc, siempre se me vuelve un enredo, pero por lo menos esto ya me orienta en la funcionalidad básica.
Hola, me gustaría poder hacer un buscador de imágenes para una base de datos grande y que los resultados usen una especie de data table para que solo muestre de a 30 imágenes por pestaña. Usando un data-table puedo pero todo me aparece de forma vertical al pertenecer a una misma columna. Alguna idea o post que me pueda servir? gracias.
La clave esta en la forma en la forma en la que «creas» la galería, en el ejemplo simplemente se hace un bucle que muestra todas las imagenes pero si por ejemplo haces 2 bucles uno que cree cada nueva fila y otro que cree las columnas ya tienes una tabla.
Y si no generas tu directamente el html de la tabla puedes puedes aplicar lo mismo para generar los datos para que luego se cree la tabla con ellos.