Foros del Web » Programando para Internet » Jquery »

Galeria de imagenes con jquery

Estas en el tema de Galeria de imagenes con jquery en el foro de Jquery en Foros del Web. Buenas tengo una galeria hecha ya en php y un poco de javascritp pero quiero que cuando se pulse en la imagen en miniatura al ...
  #1 (permalink)  
Antiguo 16/12/2011, 08:32
 
Fecha de Ingreso: noviembre-2011
Mensajes: 516
Antigüedad: 13 años, 1 mes
Puntos: 10
Galeria de imagenes con jquery

Buenas tengo una galeria hecha ya en php y un poco de javascritp pero quiero que cuando se pulse en la imagen en miniatura al hacerse grande no se me habra otra ventana si no en la misma estilo la de facebook tuenti y otras galerias parecidas de otras web, el problema es que nose como hacer esto soy nuevo en jquery y todavia estoy aprendiendo, me podeis dar una idea de como poder desarrollar esto??
este es mi codigo:
Código PHP:
<? include("header.php"); 

if (!isset(
$_SESSION['logueado_usuario'])) { 
    include (
"login.php");  
echo 
"<a href='registro.php'>Registrarse</a>" ;} 
    else {  
    
$nombre =$_SESSION['logueado_nombre']; 
    
$id_usuario=$_SESSION['logueado_id']; 

?> 
<!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=iso-8859-1" />
<title>Dar estilo a un bot&oacute;n input file</title>
<link href="Css/jquery.si.css" rel="stylesheet" type="text/css" />
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="Js/jquery.si.js" type="text/javascript"></script>
<div class="file"> <script type="text/javascript">
    $(document).ready(function() {
        $("input.file").si();
    });
</script>
<SCRIPT LANGUAGE="javascript"> 
<!-- 
function validar(){ 
alert('aceptar para seguir'); 
document.formulario.submit(); 
//También te puedes referir a ese objeto mediante un arreglo de esta forma 
//document.forms[0].submit(); 

//--> 
</script> 

</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="foto" onChange="submit(this)" class="file"/>
</form>
</div>
<?php
include("privados/config.php");
$numero rand(1,10000);
$date_default_timezone_set date_default_timezone_set('Europe/Madrid');
$fecha date('d-n-o H:i:s',strtotime('+0hours'));
$nameimagen $_FILES['foto']['name'];
$tmpimagen  $_FILES['foto']['tmp_name'];

//Comprobamos si los campos están vacios...
if($nameimagen =="" or $tmpimagen=="") {
    
} else {
    
//Establecemos el ancho fijo que tendran las miniaturas
    
$ancho 180;//Ancho de la imagen nueva
    
$ori_ancho=500;
    
$foto_nom=($nameimagen);
            
$foto_nom=str_replace(" ","_",$foto_nom);
            
$nombre_foto=$numero.($nameimagen);
    
//Obtenemos informacion acerca del fichero, para conocer su extension
    
$info pathinfo($nameimagen);
    
    
$tamano getimagesize($tmpimagen);
    
print_r($tamano);
    
    
$width  =  $tamano[0];//Ancho de la imagen
    
$height =  $tamano[1];//Alto de la imagen
    
$original "fotos/$nombre_foto";
    
$copia    "fotos/mini/copia_$nombre_foto";
    
    if(
$width $ori_ancho){
    
$alto 500;//Alto de la imagen nueva
        //Comprobamos si la imagen es JPG
        
switch($info['extension']) { 
            case 
'jpg':
            
$viejaimagen2 imagecreatefromjpeg($tmpimagen); 
            
$nuevaimagen2 imagecreatetruecolor($ori_ancho$alto);//Nueva imagen
            
imagecopyresized($nuevaimagen2$viejaimagen2,0,0,0,0,$ori_ancho,$alto,$width,$height);
            
copy($tmpimagen$original);//imagen.jpg
            
imagejpeg($nuevaimagen2,$original);
            break;
            case 
'png':
            
$viejaimagen2 imagecreatefrompng($tmpimagen); 
            
$nuevaimagen2 imagecreatetruecolor($ori_ancho$alto);//Nueva imagen
            
imagecopyresized($nuevaimagen2$viejaimagen2,0,0,0,0,$ori_ancho,$alto,$width,$height);
            
copy($tmpimagen$original);//imagen.jpg
            
imagepng($nuevaimagen2,$original);
            break;
            case 
'gif':
            
$viejaimagen2 imagecreatefromgif($tmpimagen); 
            
$nuevaimagen2 imagecreatetruecolor($ori_ancho$alto);//Nueva imagen
            
imagecopyresized($nuevaimagen2$viejaimagen2,0,0,0,0,$ori_ancho,$alto,$width,$height);
            
copy($tmpimagen$original);//imagen.jpg
            
imagegif($nuevaimagen2,$original);
            break;
            } }
    
    
//Comprobamos el ancho , para ver si supera los 120
    
if($width $ancho) {
        
$alto 135;//Alto de la imagen nueva
        //Comprobamos si la imagen es JPG
        
switch($info['extension']) { 
            case 
'jpg':
            
$viejaimagen imagecreatefromjpeg($tmpimagen); 
            
$nuevaimagen imagecreatetruecolor($ancho$alto);//Nueva imagen
            
imagecopyresized($nuevaimagen$viejaimagen,0,0,0,0,$ancho,$alto,$width,$height);
            
copy($tmpimagen$original);//imagen.jpg
            
imagejpeg($nuevaimagen,$copia);
            break;
            case 
'png':
            
$viejaimagen imagecreatefrompng($tmpimagen); 
            
$nuevaimagen imagecreatetruecolor($ancho$alto);//Nueva imagen
            
imagecopyresized($nuevaimagen$viejaimagen,0,0,0,0,$ancho,$alto,$width,$height);
            
copy($tmpimagen$original);//imagen.jpg
            
imagepng($nuevaimagen,$copia);
            break;
            case 
'gif':
            
$viejaimagen imagecreatefromgif($tmpimagen); 
            
$nuevaimagen imagecreatetruecolor($ancho$alto);//Nueva imagen
            
imagecopyresized($nuevaimagen$viejaimagen,0,0,0,0,$ancho,$alto,$width,$height);
            
copy($tmpimagen$original);//imagen.jpg
            
imagegif($nuevaimagen,$copia);
            break;
            }
            
            
            
//copia_imagen.jpg
            
$nombre_comple="http://pruebaregistro.netne.net/prueba/$original";
            
$mini_comple="http://pruebaregistro.netne.net/prueba/$copia";
            echo 
"Se ha redimensionado correctamente";
            echo 
"<br> Esto es el nombre de original $nombre_comple";
            echo 
"<br> Esto es el nombre de original $copia";
            
    
$consulta=mysql_query("INSERT INTO imagenes (id,nombre,miniatura,id_logueado,fecha) VALUES ('null','$nombre_comple','$mini_comple','$id_usuario','".$fecha."')"$conexion)or
  die(
"Problemas en el select:".mysql_error());
         
    } else {
        echo 
"La imagen debe tener un ancho mayor que 120";
    }
}
$resultados=mysql_query("select * from imagenes where id_logueado='$id_usuario'",$conexion) or
  die(
"Problemas en el select:".mysql_error());
while(
$res=mysql_fetch_assoc($resultados))
{
    
?> <A href="<?php echo $res['nombre'];?>"><img src="<?php echo $res['miniatura'];?>"></A>
     <?php
}
?>
<?php 
?>
Un saludo y gracias de antemano.
  #2 (permalink)  
Antiguo 16/12/2011, 08:53
Avatar de autonotel  
Fecha de Ingreso: junio-2003
Ubicación: Vigo
Mensajes: 480
Antigüedad: 21 años, 6 meses
Puntos: 13
Respuesta: Galeria de imagenes con jquery

Quizá esto te sirva:

http://www.hellogoogle.com/efecto_aj...avascript_css/
  #3 (permalink)  
Antiguo 16/12/2011, 09:09
 
Fecha de Ingreso: noviembre-2011
Mensajes: 516
Antigüedad: 13 años, 1 mes
Puntos: 10
Respuesta: Galeria de imagenes con jquery

E probado el plugin ese que me pusiste pero no me entero de mucho lo e configurado como ponia en la web pero al sacarlo de mysql el link no sale na no se ve no funciona nose si hago algo mal, e subido todos los archivos y todo y nada no funciona.
Con el jquery consegui que saliera la imagen en la misma pantalla pero sale un trozo de pantalla en negro y luego abajo la imagen no es lo que queria conseguir. gracias un saludo.
  #4 (permalink)  
Antiguo 16/12/2011, 09:12
Avatar de autonotel  
Fecha de Ingreso: junio-2003
Ubicación: Vigo
Mensajes: 480
Antigüedad: 21 años, 6 meses
Puntos: 13
Respuesta: Galeria de imagenes con jquery

Bueno puede uqe hayas hecho algo mal. A mi me funciona con galerias generadaas dinamicamnet con php. Has visto el ejemplo?. Mira el código fuente y compara.

En cuanto a la imagen que no consigues puede ser un problema de la generación dinamica?
  #5 (permalink)  
Antiguo 16/12/2011, 09:23
 
Fecha de Ingreso: noviembre-2011
Mensajes: 516
Antigüedad: 13 años, 1 mes
Puntos: 10
Respuesta: Galeria de imagenes con jquery

Me fijao en el codigo fuente y en todo y lo tengo igual pero no sale nada sigue saliendo como lo tenia antes nose n que puedo fallar. No me funciona quisiera hacerlo yo sin plugin ni nada creado ya al ser posible asi mejor. el problema es que nose como crear una ventanita al igual que hace este plugin si funcionase, o si alguien me puede esplicar como va este plugin tambien me vale. gracias un saludo.

Última edición por edie8; 16/12/2011 a las 09:30
  #6 (permalink)  
Antiguo 16/12/2011, 12:21
Avatar de chicohot20  
Fecha de Ingreso: mayo-2009
Mensajes: 388
Antigüedad: 15 años, 6 meses
Puntos: 43
Respuesta: Galeria de imagenes con jquery

y como los has hecho?, muestranos tu codigo.
  #7 (permalink)  
Antiguo 16/12/2011, 15:28
 
Fecha de Ingreso: noviembre-2011
Mensajes: 516
Antigüedad: 13 años, 1 mes
Puntos: 10
Respuesta: Galeria de imagenes con jquery

Este es mi codigo yamando a la libreria jquery.lightbox-0.5, y con este codigo:
Código PHP:
<!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=iso-8859-1" />
<title>Dar estilo a un bot&oacute;n input file</title>
<link href="Css/jquery.si.css" rel="stylesheet" type="text/css" />
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="Js/jquery.si.js" type="text/javascript"></script>
<script src="Js/jquery.lightbox-0.5.js" type="text/javascript"></script>
<script src="Js/funciones_img.js" type="text/javascript"></script>
<div class="file"> <script type="text/javascript">
    $(document).ready(function() {
        $("input.file").si();
    });
</script>
<SCRIPT LANGUAGE="javascript"> 
<!-- 
function validar(){ 
alert('aceptar para seguir'); 
document.formulario.submit(); 
//También te puedes referir a ese objeto mediante un arreglo de esta forma 
//document.forms[0].submit(); 

//--> 
</script> 
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
padding: 10px;
width: 100px;
}
</style>
<?php
include("privados/config.php");
$numero rand(1,10000);
$date_default_timezone_set date_default_timezone_set('Europe/Madrid');
$fecha date('d-n-o H:i:s',strtotime('+0hours'));
$nameimagen $_FILES['foto']['name'];
$tmpimagen  $_FILES['foto']['tmp_name'];

//Comprobamos si los campos están vacios...
if($nameimagen =="" or $tmpimagen=="") {
    
} else {
    
//Establecemos el ancho fijo que tendran las miniaturas
    
$ancho 180;//Ancho de la imagen nueva
    
$ori_ancho=500;
    
$foto_nom=($nameimagen);
            
$foto_nom=str_replace(" ","_",$foto_nom);
            
$nombre_foto=$numero.($nameimagen);
    
//Obtenemos informacion acerca del fichero, para conocer su extension
    
$info pathinfo($nameimagen);
    
    
$tamano getimagesize($tmpimagen);
    
print_r($tamano);
    
    
$width  =  $tamano[0];//Ancho de la imagen
    
$height =  $tamano[1];//Alto de la imagen
    
$original "fotos/$nombre_foto";
    
$copia    "fotos/mini/copia_$nombre_foto";
    
    if(
$width $ori_ancho){
    
$alto 500;//Alto de la imagen nueva
        //Comprobamos si la imagen es JPG
        
switch($info['extension']) { 
            case 
'jpg':
            
$viejaimagen2 imagecreatefromjpeg($tmpimagen); 
            
$nuevaimagen2 imagecreatetruecolor($ori_ancho$alto);//Nueva imagen
            
imagecopyresized($nuevaimagen2$viejaimagen2,0,0,0,0,$ori_ancho,$alto,$width,$height);
            
copy($tmpimagen$original);//imagen.jpg
            
imagejpeg($nuevaimagen2,$original);
            break;
            case 
'png':
            
$viejaimagen2 imagecreatefrompng($tmpimagen); 
            
$nuevaimagen2 imagecreatetruecolor($ori_ancho$alto);//Nueva imagen
            
imagecopyresized($nuevaimagen2$viejaimagen2,0,0,0,0,$ori_ancho,$alto,$width,$height);
            
copy($tmpimagen$original);//imagen.jpg
            
imagepng($nuevaimagen2,$original);
            break;
            case 
'gif':
            
$viejaimagen2 imagecreatefromgif($tmpimagen); 
            
$nuevaimagen2 imagecreatetruecolor($ori_ancho$alto);//Nueva imagen
            
imagecopyresized($nuevaimagen2$viejaimagen2,0,0,0,0,$ori_ancho,$alto,$width,$height);
            
copy($tmpimagen$original);//imagen.jpg
            
imagegif($nuevaimagen2,$original);
            break;
            } }
    
    
//Comprobamos el ancho , para ver si supera los 120
    
if($width $ancho) {
        
$alto 135;//Alto de la imagen nueva
        //Comprobamos si la imagen es JPG
        
switch($info['extension']) { 
            case 
'jpg':
            
$viejaimagen imagecreatefromjpeg($tmpimagen); 
            
$nuevaimagen imagecreatetruecolor($ancho$alto);//Nueva imagen
            
imagecopyresized($nuevaimagen$viejaimagen,0,0,0,0,$ancho,$alto,$width,$height);
            
copy($tmpimagen$original);//imagen.jpg
            
imagejpeg($nuevaimagen,$copia);
            break;
            case 
'png':
            
$viejaimagen imagecreatefrompng($tmpimagen); 
            
$nuevaimagen imagecreatetruecolor($ancho$alto);//Nueva imagen
            
imagecopyresized($nuevaimagen$viejaimagen,0,0,0,0,$ancho,$alto,$width,$height);
            
copy($tmpimagen$original);//imagen.jpg
            
imagepng($nuevaimagen,$copia);
            break;
            case 
'gif':
            
$viejaimagen imagecreatefromgif($tmpimagen); 
            
$nuevaimagen imagecreatetruecolor($ancho$alto);//Nueva imagen
            
imagecopyresized($nuevaimagen$viejaimagen,0,0,0,0,$ancho,$alto,$width,$height);
            
copy($tmpimagen$original);//imagen.jpg
            
imagegif($nuevaimagen,$copia);
            break;
            }
            
            
            
//copia_imagen.jpg
            
$nombre_comple="http://pruebaregistro.netne.net/prueba/$original";
            
$mini_comple="http://pruebaregistro.netne.net/prueba/$copia";
            echo 
"Se ha redimensionado correctamente";
            echo 
"<br> Esto es el nombre de original $nombre_comple";
            echo 
"<br> Esto es el nombre de original $copia";
            
    
$consulta=mysql_query("INSERT INTO imagenes (id,nombre,miniatura,id_logueado,fecha) VALUES ('null','$nombre_comple','$mini_comple','$id_usuario','".$fecha."')"$conexion)or
  die(
"Problemas en el select:".mysql_error());
         
    } else {
        echo 
"La imagen debe tener un ancho mayor que 120";
    }
}

$resultados=mysql_query("select * from imagenes where id_logueado='$id_usuario'",$conexion) or
  die(
"Problemas en el select:".mysql_error());
while(
$res=mysql_fetch_assoc($resultados))
{
    
?> <div id="galeria"><A href="<?php echo $res['nombre'];?>"><img src="<?php echo $res['miniatura'];?>"></A></div>
     <?php
}
?>
<?php 
?>
Este le uso tanto para subir la imagen como para visualizarla, un saludo.
  #8 (permalink)  
Antiguo 16/12/2011, 18:33
Avatar de chicohot20  
Fecha de Ingreso: mayo-2009
Mensajes: 388
Antigüedad: 15 años, 6 meses
Puntos: 43
Respuesta: Galeria de imagenes con jquery

Yo creo que, lo estas usando mal, el lightbox tiene una hoja de estilos, no la veo incluida en tu php, y tambien falta llamar a la funcion lightbox(), mas info en:
http://leandrovieira.com/projects/jquery/lightbox/
esta en la pestaña "How to use"
  #9 (permalink)  
Antiguo 17/12/2011, 04:02
 
Fecha de Ingreso: noviembre-2011
Mensajes: 516
Antigüedad: 13 años, 1 mes
Puntos: 10
Respuesta: Galeria de imagenes con jquery

Muchas gracias era eso se me olvido poner el css ahora ya funciona, gracias.
  #10 (permalink)  
Antiguo 17/12/2011, 04:12
 
Fecha de Ingreso: noviembre-2011
Mensajes: 516
Antigüedad: 13 años, 1 mes
Puntos: 10
Respuesta: Galeria de imagenes con jquery

Creo que tengo otro error no funciona como debería de funcionar pueden hecarle un vistazo?? es esta web, http://pruebaregistro.netne.net/prueba/
y este es el registro para que no tengais que registraros.
correo: [email protected]
password: pruebas
Espero que me podais ayudar ya que es la primera vez que uso este plugin y nose como debe de funcionar y cual es el error que hay en mi codigo. gracias.
Tube un error y no os salian las fotos al meteros pero ya esta solucionado ya las podeis ver.

Última edición por edie8; 17/12/2011 a las 08:04
  #11 (permalink)  
Antiguo 19/12/2011, 08:27
 
Fecha de Ingreso: noviembre-2011
Mensajes: 516
Antigüedad: 13 años, 1 mes
Puntos: 10
Respuesta: Galeria de imagenes con jquery

Use la libreria lightbox y me funciona bien ahora quiero inplementar que debajo de la foto pueda poner comentarios es decir un recuadro donde insertar el comentario y mandarlo y que luego salga debajo de la imagen todos los comentarios como puedo hacer esto usando esa libreria?? muchas gracias un saludo
  #12 (permalink)  
Antiguo 07/02/2012, 07:56
 
Fecha de Ingreso: noviembre-2011
Mensajes: 516
Antigüedad: 13 años, 1 mes
Puntos: 10
Respuesta: Galeria de imagenes con jquery

Buenas necesito hacer unos botones para la galeria de imagenes para pasar a la siguiente imagen nose como hacerlo porque por id no es muy correcto ya que si borro una foto ya no existe el id siguiente como podria hacer esto necesito una idea. gracias un saludo.

Etiquetas: formulario, galeria, html, imagenes, input, js, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:37.