mostrar imagen !

valenti77 · #1 (**permalink**) 15/09/2008, 15:01

Tengo el siguiente codigo javascript, el cual muestra un documento en una zona de la pagina:

Código:

// Documento JavaScript
// Esta función cargará las paginas
function llamarasincrono (url, id_contenedor)
{
    var pagina_requerida = false;
    if (window.XMLHttpRequest)
    {
        // Si es Mozilla, Safari etc
        pagina_requerida = new XMLHttpRequest ();
    } else if (window.ActiveXObject)
    {
        // pero si es IE
        try
        {
            pagina_requerida = new ActiveXObject ("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            // en caso que sea una versión antigua
            try
            {
                pagina_requerida = new ActiveXObject ("Microsoft.XMLHTTP");
            }
            catch (e)
            {
            }
        }
    }
    else
    return false;
    pagina_requerida.onreadystatechange = function ()
    {
        // función de respuesta
        cargarpagina (pagina_requerida, id_contenedor);
    }
    pagina_requerida.open ('GET', url, true); // asignamos los métodos open y send
    pagina_requerida.send (null);
}
// todo es correcto y ha llegado el momento de poner la información requerida
// en su sitio en la pagina xhtml
function cargarpagina (pagina_requerida, id_contenedor)
{
    if (pagina_requerida.readyState == 4 && (pagina_requerida.status == 200 || window.location.href.indexOf ("http") == - 1))
    document.getElementById (id_contenedor).innerHTML = pagina_requerida.responseText;
}

y este PHP que es el documento llamado:

Código PHP:

  <? // OJO, sólo funciona con imagnes en formato JPEG ... 
if(isset($_GET['id'])) { 
     
    $conexion=mysql_connect("","","") or die ("no se ha podido conectar a la BD"); 
    mysql_select_db("") or die ("no se ha podido seleccionar la BD"); 
    $sql = "SELECT archivo_binario,archivo_tipo,archivo_nombre FROM archivos WHERE id='".$_GET['id']."'"; 
    $consulta = mysql_query($sql,$conexion); 
    $imagen = mysql_result($consulta,0,"archivo_binario"); 
 
    // Envio cabeceras al navegador .. se indica que lo "que vá" es una imagen de formato MIME JPEG 
    Header ("Content-type: image/jpeg"); 
 
    // Generar el thumbnail: 
 
    // Se crea la imagen desde el campo binario de la BD 
    $img = imagecreatefromstring($imagen); 
 
    // Tamaño del Thumbanil (de la imagen a generar ..) 
    $picsize = 500; 
     
    // Se obtienen los datos del ancho y alto de la imagen. 
    $new_w = imagesx($img); 
    $new_h = imagesy($img); 
 
    // Se calcula la relación alto/ancho 
    $aspect_ratio = $new_h / $new_w; 
     
    // Se ajusta al nuevo tamaño 
    $new_w = $picsize; 
    $new_h = abs($new_w * $aspect_ratio); 
 
   // Se crea la mascara de la imagen nueva 
    $dst_img = ImageCreateTrueColor($new_w,$new_h); 
 
// Se copia y reajusta el nuevo tamaño en la nueva imagen. 
     imagecopyresampled($dst_img,$img,0,0,0,0,$new_w,$new_h,imagesx($img),imagesy($img)); 
 
    // Se entrega al buffer de salida (navegador en este caso) la imagen en formato JPEG 
    // El tercer parámetro (100) indica la calidad de la imagen: en porcentaje relación calidad/peso imagen. 
    imagejpeg($dst_img,'',100); 
} 
 
?>

y cuando lo ejecuto me muestra la imagen como caracter, cual podria ser el prioblema? algo que tenga que agregar en el javascript?

Panino5001 · #2 (**permalink**) 15/09/2008, 15:09

Probá así:

Código PHP:

   document.getElementById (id_contenedor).innerHTML = '<img src="'+pagina_requerida.responseText+'" />';

David · #3 (**permalink**) 15/09/2008, 15:11

En este caso no veo necesidad de usar AJAX, puedes asignar directamente al src de una imagen el archivo PHP

.

EDITO: Lo siento por el choque Panino5001.

valenti77 · #4 (**permalink**) 15/09/2008, 15:13

sisi eso ya lo tengo funcionando, lo que yo quiero es que me lo muestre arriba de las miniaturas, se entiende?

Es decir tengo todo esto, funcionando con thumbnails y con lo que vos decis, que al hacer click se vea, perol oque quiero lograr es que no necesita abrir otra ventana para la imagen, que la muestre ahi arriba, como si fuera una galeria de imagenes.

David · #5 (**permalink**) 15/09/2008, 15:18

Pues si ya tienes un img arriba, solo cambia su src. Por ejemplo:

Código javascript:

Ver originalimagen.src = "pagina.php?param=valor";

Con lo que se va a procesar el PHP y devolverá la imagen

.

valenti77 · #6 (**permalink**) 15/09/2008, 15:19

Muchas gracias por tu solucion Panino pero lamentablemente sigue igual...

Encima funcionando sin el Java anda perfecto, la cosa es cuando llamo desde el javascript, no habra alguna funcion que muestre imagenes, porque creo que lo q tengo yo es para mostrar HTML...

valenti77 · #7 (**permalink**) 15/09/2008, 15:30

en donde decis que ponga eso ? en el Src? eso me lo mostraria en donde yo lo quiero?

Mira hice una imagen de como quisiera que quede:

Ya queda asi, salvo que la imagen, me la muestra como caracteres...

David · #8 (**permalink**) 15/09/2008, 15:34

A ver, primero, explícanos mejor, tienes toda la lista de imágenes abajo, y cuando haces click en una de ellas quieres que muestre esa imagen en el área que mencionaste, ¿es así?. En ese caso deberías usar el evento onclick de las imágenes para cambiar el src de la imagen que está en el área que mencionaste, como en el código que te puse en el mensaje anterior.

Por cierto, ¿en qué momento se ejecuta la llamada a la página usando AJAX?

valenti77 · #9 (**permalink**) 15/09/2008, 15:39

Claro pasa que si o si tengo que llamar a ver.php porq es el que me redimensiona la imagen a 500px, para que entre justamente ahi, vos decis que poniendole a cada thumbnail, que ya estan redimensionadas, a 120 px, el evento Onclick=ver.php?id="id de la imagen" y asi me la va a mostrar en ese area que yo quiero?
Porque las imagenes estan en una base de datos como binario, por eso es que uso el codigo php, no es que las tenga en un Dir de mi server...

esto tuve que hacerlo asi porque el server no permite la subida externa de archivos, etnocnes recurri a Mysql...

PD: se ejecuta cuando el visitante hace click en la miniatura, supuestamente deberia mostrar la imagen en un mayor tamaño.

David · #10 (**permalink**) 15/09/2008, 15:42

No, en el onclick lo que debes poner es el código que te mencioné, que sería:

Código javascript:

Ver originalimagen.src = 'ver.php?id=id_de_la_imagen';

Sólo hay que poner en el name de la imagen "imagen".

EDITO: ¿Y cómo estás poniendo esa llamada en el click?

valenti77 · #11 (**permalink**) 15/09/2008, 15:55

Código PHP:

  echo "<td><img onclick=\"imagen.src = \'ver.php?id=" . $registro['id'] . "';\" src=\"ver_thumbnail.php?id=" . $registro['id'] . "\">";

Algo asi ?
Ah no que tarado, eso en el link o no ? que paciencia que me tenes ehh... jaja gracias

David · #12 (**permalink**) 15/09/2008, 16:01

Exacto, sería de esa forma, lo único que habría que tener es un tag img con el name "imagen" en el lugar donde desees que aparezca la imagen.

Prueba y nos comentas si te funcionó.

valenti77 · #13 (**permalink**) 15/09/2008, 16:08

lo probé, y me quede con esto en el area donde quiero que aparezca:

<img name="imagen">

y a cada link les puse esto:

Código PHP:

  echo "<td><a href='#' onclick=\"imagen.src = \'ver.php?id=" . $registro['id'] . "\';\"><img src=\"ver_thumbnail.php?id=" . $registro['id'] . "\"></a>";

pero no me funciona ya que el link me vuelve al inicio de la pagina, asi que probé con esto:

Código PHP:

  echo "<td><a href=\"imagen.src = \'ver.php?id=" . $registro['id'] . "\';\"><img src=\"ver_thumbnail.php?id=" . $registro['id'] . "\"></a>";

y tampoco me anda, me lo toma como si imagen.src fuera una pagina mas... que estoy haciendo mal o que malentendido hay ?

David · #14 (**permalink**) 15/09/2008, 16:11

No, no es necesario un link <a>, ya que no estás enlazando a ninguna página, el código que pusiste en el otro mensaje estaba bien, usando el onclick del tag <img>, ¿has probado ese código?.

valenti77 · #15 (**permalink**) 15/09/2008, 16:14

si, hago click pero nada, es decir, es como si hiciera click en cualquier parte de la pagina, no me aparece una manito o algo que indique que es clickeable... es como algo mas de la pagina, en cambio con el <a> si se puede hacerle click, pero no me lo toma como queremos que lo tome...

David · #16 (**permalink**) 15/09/2008, 16:16

¿No realiza ninguna acción o sólo no muestra la manito?. Si el caso es que cambia la imagen pero no muestra la manito solo necesitas cambiar el estilo (CSS).

valenti77 · #17 (**permalink**) 15/09/2008, 16:19

no, directamente no hace nada, no muestra la imagen tampoco, me parece que tengo que volver a la funcion y corregir algo de ahi, si el codigo php individualmente me anda bien, es porque el javascript algo le esta fallando...

David · #18 (**permalink**) 15/09/2008, 16:24

¿Has mirado en tu navegador si el código no está dando error?

valenti77 · #19 (**permalink**) 15/09/2008, 16:27

no, no me tira ningún error, carga normalmente

David · #20 (**permalink**) 15/09/2008, 16:29

No me refiero al cargar, sino después de hacer click en la imagen.

Y, por si acaso, ¿cuál es el código que resulta de la ejecución del PHP? Tal vez alguna comilla esté devolviendo mal.

Panino5001 · #21 (**permalink**) 15/09/2008, 16:45

Cita:

Iniciado por David el Grande

Lo siento por el choque Panino5001.

Un gusto chocar contigo ;)

valenti77 · #22 (**permalink**) 15/09/2008, 16:52

Este es el php que pone los thumbnails, que seeria el menu de la galeria de imagenes que dibuje hoy...

Código PHP:

  <?

mysql_connect("","","")or die("no se ha podido conectar ala BD");

mysql_select_db("")or die("no se ha podido seleccionar la BD");

$sql="SELECT id,archivo_nombre,archivo_tipo,archivo_peso FROM archivos";

$consulta=mysql_query($sql)or die("No se pudo ejecutar la consulta");?>

<table border="0"><tr><div class="Imagenes">

<? while ($registro=mysql_fetch_assoc($consulta)){

echo"<td><img onclick=\"imagen.src=\'ver.php?id=".$registro['id']."';\"src=\"ver_thumbnail.php?id=".$registro['id']."\">";

echo "<br>Nombre archivo:".$registro['archivo_nombre'];}

mysql_close()?>

Este , es el que genera los thumbnails:

Código PHP:

  <?php

// OJO, sólo funciona con imagnes en formato JPEG ...

if(isset($_GET['id'])) {

    mysql_connect("","","") or die ("no se ha podido conectar a la BD");
    mysql_select_db("a3344304_posts") or die ("no se ha podido seleccionar la BD");
    $sql = "SELECT archivo_binario,archivo_tipo,archivo_nombre FROM archivos WHERE id='".$_GET['id']."'";
    $consulta = mysql_query($sql,$conexion);
    $imagen = mysql_result($consulta,0,"archivo_binario");

    // Envio cabeceras al navegador .. se indica que lo "que vá" es una imagen de formato MIME JPEG
    Header ("Content-type: image/jpeg");

    // Generar el thumbnail:

    // Se crea la imagen desde el campo binario de la BD
    $img = imagecreatefromstring($imagen);

    // Tamaño del Thumbanil (de la imagen a generar ..)
    $picsize = 123;
    
    // Se obtienen los datos del ancho y alto de la imagen.
    $new_w = imagesx($img);
    $new_h = imagesy($img);

    // Se calcula la relación alto/ancho
    $aspect_ratio = $new_h / $new_w;
    
    // Se ajusta al nuevo tamaño
    $new_w = $picsize;
    $new_h = abs($new_w * $aspect_ratio);

   // Se crea la mascara de la imagen nueva
    $dst_img = ImageCreateTrueColor($new_w,$new_h);

// Se copia y reajusta el nuevo tamaño en la nueva imagen.
     imagecopyresampled($dst_img,$img,0,0,0,0,$new_w,$new_h,imagesx($img),imagesy($img));

    // Se entrega al buffer de salida (navegador en este caso) la imagen en formato JPEG
    // El tercer parámetro (100) indica la calidad de la imagen: en porcentaje relación calidad/peso imagen.
    imagejpeg($dst_img,'',100);
}

?>

Este es el que hace que se vean las imagenes, el ver.php:

Código PHP:

  <? // OJO, sólo funciona con imagnes en formato JPEG ...
if(isset($_GET['id'])) {
    
    $conexion=mysql_connect("","","") or die ("no se ha podido conectar a la BD");
    mysql_select_db("a3344304_posts") or die ("no se ha podido seleccionar la BD");
    $sql = "SELECT archivo_binario,archivo_tipo,archivo_nombre FROM archivos WHERE id='".$_GET['id']."'";
    $consulta = mysql_query($sql,$conexion);
    $imagen = mysql_result($consulta,0,"archivo_binario");

    // Envio cabeceras al navegador .. se indica que lo "que vá" es una imagen de formato MIME JPEG
    Header ("Content-type: image/jpeg");

    // Generar el thumbnail:

    // Se crea la imagen desde el campo binario de la BD
    $img = imagecreatefromstring($imagen);

    // Tamaño del Thumbanil (de la imagen a generar ..)
    $picsize = 500;
    
    // Se obtienen los datos del ancho y alto de la imagen.
    $new_w = imagesx($img);
    $new_h = imagesy($img);

    // Se calcula la relación alto/ancho
    $aspect_ratio = $new_h / $new_w;
    
    // Se ajusta al nuevo tamaño
    $new_w = $picsize;
    $new_h = abs($new_w * $aspect_ratio);

   // Se crea la mascara de la imagen nueva
    $dst_img = ImageCreateTrueColor($new_w,$new_h);

// Se copia y reajusta el nuevo tamaño en la nueva imagen.
     imagecopyresampled($dst_img,$img,0,0,0,0,$new_w,$new_h,imagesx($img),imagesy($img));

    // Se entrega al buffer de salida (navegador en este caso) la imagen en formato JPEG
    // El tercer parámetro (100) indica la calidad de la imagen: en porcentaje relación calidad/peso imagen.
    imagejpeg($dst_img,'',100);
}

?>

que en si es lo mismo que el anterior cambiando el tamaño final...

y esta la funcion ajax:

Código:

// Documento JavaScript
// Esta función cargará las paginas
function llamarasincrono (url, id_contenedor)
{
    var pagina_requerida = false;
    if (window.XMLHttpRequest)
    {
        // Si es Mozilla, Safari etc
        pagina_requerida = new XMLHttpRequest ();
    } else if (window.ActiveXObject)
    {
        // pero si es IE
        try
        {
            pagina_requerida = new ActiveXObject ("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            // en caso que sea una versión antigua
            try
            {
                pagina_requerida = new ActiveXObject ("Microsoft.XMLHTTP");
            }
            catch (e)
            {
            }
        }
    }
    else
    return false;
    pagina_requerida.onreadystatechange = function ()
    {
        // función de respuesta
        cargarpagina (pagina_requerida, id_contenedor);
    }
    pagina_requerida.open ('GET', url, true); // asignamos los métodos open y send
    pagina_requerida.send (null);
}
// todo es correcto y ha llegado el momento de poner la información requerida
// en su sitio en la pagina xhtml
function cargarpagina (pagina_requerida, id_contenedor)
{
    if (pagina_requerida.readyState == 4 && (pagina_requerida.status == 200 || window.location.href.indexOf ("http") == - 1))
    document.getElementById (id_contenedor).innerHTML = '<img src="'+pagina_requerida.responseText+'" />'}

y lo que resultaba de todo esto, antes de hacer las modificaciones que sacamos aca, me daba toda una serie de caracteres ASCII, es decir todos los simbolos raros...

David · #23 (**permalink**) 15/09/2008, 16:56

Con código resultante, me refiero a que vayas a tu navegador, hagas click con el botón derecho y vayas a Ver Código Fuente. Principalmente, el código resultante de esto:

Código PHP:

  echo"<td><img onclick=\"imagen.src='ver.php?id=".$registro['id']."';\" src=\"ver_thumbnail.php?id=".$registro['id']."\">";

He visto que le faltaba un espacio, aunque no creo que sea el problema.

Otra cosa, hal hacer click, ¿no te dió error en el navegador?.

Panino5001 · #24 (**permalink**) 15/09/2008, 17:00

El segundo parámetro de imagejpeg debería ser null según el manual. La imagen se despliega normalmente cuando abrís el php en el navegador?

Edito: mejor me voy, hay mucho tráfico en esta carretera.

valenti77 · #25 (**permalink**) 15/09/2008, 17:00

Código HTML:

<div class="Imagenes">

<td><img onclick="imagen.src=\'ver.php?id=1';"src="ver_thumbnail.php?id=1"><br>Nombre archivo:100_6090.jpg<td><img onclick="imagen.src=\'ver.php?id=2';"src="ver_thumbnail.php?id=2"><br>Nombre archivo:CIMG5486.JPG<td><img onclick="imagen.src=\'ver.php?id=3';"src="ver_thumbnail.php?id=3"><br>Nombre archivo:asd,as.jpg<td><img onclick="imagen.src=\'ver.php?id=4';"src="ver_thumbnail.php?id=4"><br>Nombre archivo:chubicum.jpg<td><img onclick="imagen.src=\'ver.php?id=5';"src="ver_thumbnail.php?id=5"><br>Nombre archivo:Imagen 055.jpg<td><img onclick="imagen.src=\'ver.php?id=6';"src="ver_thumbnail.php?id=6"><br>Nombre archivo:100_2487.jpg<td><img onclick="imagen.src=\'ver.php?id=7';"src="ver_thumbnail.php?id=7"><br>Nombre archivo:100_2487.jpg<td><img onclick="imagen.src=\'ver.php?id=8';"src="ver_thumbnail.php?id=8"><br>Nombre archivo:DSC0011.jpg<td><img onclick="imagen.src=\'ver.php?id=9';"src="ver_thumbnail.php?id=9"><br>Nombre archivo:cutout.png</div>

ahi esta, y al hascer click directamente no me pone nada

David · #26 (**permalink**) 15/09/2008, 17:02

Prueba cambiando la línea en el archivo PHP por lo que te puse en el mensaje anterior, ya que coloqué el espacio que faltaba y eliminé una contrabarra que estaba sobrando.

Si aún así no te funciona, como te dije, mira si al momento de hacer click no da algún error en el Explorador.

valenti77 · #27 (**permalink**) 15/09/2008, 17:02

Panino5001: Sí, cuando uso la misma página, como html, sin el javascript, al hacer click, me despliega una nueva pagina, en la cual se ve la imagen seleccionada sin problemas... es decir en la miniatura en la cual hiciste click...

valenti77 · #28 (**permalink**) 15/09/2008, 17:07

Ahora si funciona ! reemplazé lo que me dijiste y ahora si anda perfecto...
Muchas gracias! asi que ahora voy a borrar esa funcion

Muchas gracias a los dos !