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ó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.