Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Intentando hacer una galeria, algo no funciona

 Estas en el tema de Intentando hacer una galeria, algo no funciona en el foro de Frameworks JS en Foros del Web. Hola, soy totalmente nuevo en esto de AJAX, y para experimentar un poco estoy haciendo una especie de galeria, con un menu de 4 imagenes ...
  #1 (permalink)  
Antiguo 07/12/2006, 19:43
 
Fecha de Ingreso: diciembre-2006
Mensajes: 5
Antigüedad: 18 años
Puntos: 0
Intentando hacer una galeria, algo no funciona
Hola, soy totalmente nuevo en esto de AJAX, y para experimentar un poco estoy haciendo una especie de galeria, con un menu de 4 imagenes que se muestran en la parte superior y con un link a la derecha para ver una nueva imagen, que hace que la que este mas a la izquierda desaparezca, y un link a la izquierda, que hace lo mismo pero obviamente al revez.
Cuando el usuario hace click en una imagen, esta deberia mostrarse en tamaño mas grande en la parte inferior de la pagina (por motivos de simplificacion, la imgen que se muestra aca es la misma que la del menu, y la url esta almacenada en una base de datos).
El menu funcionaba perfectamente hasta que intenté hacer que al hacer click en una imagen del menu, esta se muestre debajo del menu.
Ahora no funciona ni el menu con las imagenes.
El codigo esta muy mal echo, y esta basado en un ejemplo de AJAX que encontre en internet. Ni siquiera uso XML, pero primero quiero que funcione, para despues mejorarlo
Los archivos son 3:
galeriajax.htm:
Código HTML:
<html>
    <head>
    <style type="text/css">
    html, body {
       width: 100%;
       padding: 0;
       margin: 0;
    }
    #izquierda {
       float: left;
       width: 10%;
    }
    #derecha {
       float: right;
       width: 10%;
    }
    #galeria {
       float: left;
       width: 80%;
    }
   #fotos {
      margin: 0 auto;
      width: 65%;
   }
   #mostrar {
      width: 50%;
      clear: both;
      margin: 0 auto;
   }
    </style>
        <script>

            function Move(movimiento)
            {
	       var what = "showGallery(req.responseText)";
	        var url = "galeriajax.php";
                callGallery("mover="+movimiento);
            }
            function verFoto(foto) {
	       var what = "showPhoto(req.responseText)";
	       var url = foto;
	       callPhoto();
	    }
            function showGallery(galeria)
            {
                if(galeria != "No hay foto")
                {
                    var resultado = document.getElementById("fotos");
		    resultado.innerHTML = galeria;
                }
            }
	    function showPhoto(foto) {
	       var resultado = document.getElementById("mostrar");
	       resultado.innerHTML = foto;
	    }

        </script>
        <script src="galeriajax.js" type="text/javascript"></script>
    </head>
    <body>
        <a id="izquierda" href="javascript:Move('izquierda');">Izquierda</a>
	<div id="galeria"><div id="fotos"></div></div>
	<a id="derecha" href="javascript:Move('derecha');">Derecha</a>
	<div id="mostrar"></div>
    </body>
</html>
galeriajax.js:
Código: 
function callGallery(data)
{
    // branch for native XMLHttpRequest object
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = processGallery;
	   req.open('POST', url, true);
           req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	   req.send(data);
    // branch for IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        req = new ActiveXObject('Microsoft.XMLHTTP')
        if (req) {
            req.onreadystatechange = processGallery;
               req.open('POST', url, true);
               req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	       req.send(data);
	    }
        }
}

function callPhoto() {
if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = processPhoto;
	          req.open('GET', url, true);
               req.setRequestHeader('Accept','image/jpeg');
	       req.send(null);
    // branch for IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        req = new ActiveXObject('Microsoft.XMLHTTP')
        if (req) {
            req.onreadystatechange = processPhoto;
                      req.open('GET', url, true);
               req.setRequestHeader('Accept','image/jpeg');
	       req.send(null);
	    }
        }
}

function processGallery() {
    // only if req shows 'loaded'
    if (req.readyState == 4) {
        // only if 'OK'
        if (req.status == 200) {
            eval(what);
        } else {
            alert('There was a problem retrieving the XML data: ' +
                req.responseText);
        }
    }
}
function processPhoto() {
    // only if req shows 'loaded'
    if (req.readyState == 4) {
        // only if 'OK'
        if (req.status == 200) {
            eval(what);
        } else {
            alert('There was a problem retrieving the XML data: ' +
                req.responseText);
        }
    }
}
galeriajax.php
Código PHP:
<?php
session_start();
$db = mysql_connect("host", "user", "password");
mysql_select_db("fotos", $db);
if (!isset($_SESSION['primerVisita'])) {
   $_SESSION['primerVisita'] = "visitada";
   $_SESSION['primerFoto'] = 1;
   $consulta = mysql_query("select * from fotos order by id desc");
   $_SESSION['ultima'] = mysql_num_rows($consulta);
   $id = 1;
   $_SESSION['fotoID'] = array();
   $_SESSION['fotoURL'] = array();
   while ($foto = mysql_fetch_assoc($consulta)) {
      $_SESSION['fotoID'][$id] = $foto['id'];
      $_SESSION['fotoURL'][$id] = $foto['url'];
      $id++;
   }
}
if (isset($_POST['mover'])) {
   if ($_POST['mover'] == "izquierda") {
      if ($_SESSION['primerFoto'] == 1)
         $_SESSION['primerFoto'] = $_SESSION['ultima'];
      else
         $_SESSION['primerFoto']--;
   }
   else if ($_POST['mover'] == "derecha") {
      if ($_SESSION['primerFoto'] == $_SESSION['ultima'])
         $_SESSION['primerFoto'] = 1;
      else
         $_SESSION['primerFoto']++;
   }
}
$id = $_SESSION['primerFoto'];
for ($cont = 1; $cont <= 4; $cont++) {
   echo "<img onClick=\"verFoto('".$_SESSION['fotoURL'][$id]."')\" src=\"".$_SESSION['fotoURL'][$id]."\" />";
   if ($id == $_SESSION['ultima'])
      $id = 1;
   else
      $id++;
}
?>
Incluso en el archivo PHP uso sesiones, que seguramente no se la mejor forma de hacerlo, acpeto sugerencias, pero lo mas importante es que funciona la parte de AJAX.
El error seguramente este en galeriajax.htm o galeriajax.js, por que desde que modifique esos archivos que dejo de funcionar incluso el menu. Tengo dudas en la forma en que uso setRequestHeader, sobre todo para adquirir imagenes.

Cualquier ayuda en bienvenida, aunque se que probablemente sea algo confuso, si es asi no duden en preguntar.

Cualquier avance que tengo lo voy a postear.

Muchas gracias por el tiempo
  #2 (permalink)  
Antiguo 12/12/2006, 11:27
 
Fecha de Ingreso: diciembre-2006
Mensajes: 5
Antigüedad: 18 años
Puntos: 0
Re: Intentando hacer una galeria, algo no funciona
¿Alguna idea?
  #3 (permalink)  
Antiguo 19/12/2006, 12:06
 
Fecha de Ingreso: diciembre-2006
Mensajes: 5
Antigüedad: 18 años
Puntos: 0
Re: Intentando hacer una galeria, algo no funciona
Por lo visto la forma en que intento llamar a una imagen es cualquier cosa. Asi que directamente implemente una pagina llamada getphoto.php que recive el nombre de la foto por POST y devuelve el codigo HTML para postear la imagen. Pero el codigo sigue sin funcionar, yo ya no se por que sera, lo revise de arriba a abajo y no encuentro el error. Cuando hago click en "derecha" o "izquierda" se deberia llamar mediante AJAX a la pagina galeriajax.php, pero en vez de eso, se queda como si nada, como si no hubiera echo click. Pongo todos los codigos como los tengo ahora, a ver si alguien encuentra el error:

galeriajax.htm:

Código HTML:
<html>
    <head>
    <style type="text/css">
    html, body {
       width: 100%;
       padding: 0;
       margin: 0;
    }
    #izquierda {
       float: left;
       width: 10%;
    }
    #derecha {
       float: right;
       width: 10%;
    }
    #galeria {
       float: left;
       width: 80%;
    }
   #fotos {
      margin: 0 auto;
      width: 65%;
   }
   #mostrar {
      width: 50%;
      clear: both;
      margin: 0 auto;
   }
    </style>
    <script src="galeriajax.js" type="text/javascript"></script>
        <script>

            function Move(movimiento)
            {
	       var what = "showGallery(req.responseText)";
	        var url = "galeriajax.php";
                llamar("mover="+movimiento);
            }
            function verFoto(foto) {
	       var what = "showPhoto(req.responseText)";
	       var url = "getphoto.php";
	       llamar("imagen="+foto);
	    }
            function showGallery(galeria)
            {
                if(galeria != "No hay foto")
                {
                    var resultado = document.getElementById("fotos");
		    resultado.innerHTML = galeria;
                }
            }
	    function showPhoto(foto) {
	       var resultado = document.getElementById("mostrar");
	       resultado.innerHTML = foto;
	    }

        </script>
    </head>
    <body>
        <a id="izquierda" href="javascript:Move('izquierda');">Izquierda</a>
	<div id="galeria"><div id="fotos"></div></div>
	<a id="derecha" href="javascript:Move('derecha');">Derecha</a>
	<div id="mostrar"></div>
    </body>
</html>
galeriajax.js:

Código: 
function llamar(info)
{
    // branch for native XMLHttpRequest object
    if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
	req.onreadystatechange = processReq;
	   req.open('POST', url, true);
           req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	   req.send(info);
    // branch for IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        req = new ActiveXObject('Microsoft.XMLHTTP')
        if (req) {
            req.onreadystatechange = processReq;
               req.open('POST', url, true);
               req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	       req.send(info);
	    }
        }
}

function processReq() {
    // only if req shows 'loaded'
    if (req.readyState == 4) {
        // only if 'OK'
        if (req.status == 200) {
            eval(what);
        } else {
            alert('There was a problem retrieving the XML data: ' +
                req.responseText);
        }
    }
}
galeriajax.php:

Código PHP:
<?php
session_start();
$db = mysql_connect("localhost", "root");
mysql_select_db("fotos", $db);
if (!isset($_SESSION['primerVisita'])) {
   $_SESSION['primerVisita'] = "visitada";
   $_SESSION['primerFoto'] = 1;
   $consulta = mysql_query("select * from fotos order by id desc");
   $_SESSION['ultima'] = mysql_num_rows($consulta);
   $id = 1;
   $_SESSION['fotoID'] = array();
   $_SESSION['fotoURL'] = array();
   while ($foto = mysql_fetch_assoc($consulta)) {
      $_SESSION['fotoID'][$id] = $foto['id'];
      $_SESSION['fotoURL'][$id] = $foto['url'];
      $id++;
   }
}
if (isset($_POST['mover'])) {
   if ($_POST['mover'] == "izquierda") {
      if ($_SESSION['primerFoto'] == 1)
         $_SESSION['primerFoto'] = $_SESSION['ultima'];
      else
         $_SESSION['primerFoto']--;
   }
   else if ($_POST['mover'] == "derecha") {
      if ($_SESSION['primerFoto'] == $_SESSION['ultima'])
         $_SESSION['primerFoto'] = 1;
      else
         $_SESSION['primerFoto']++;
   }
}
$id = $_SESSION['primerFoto'];
for ($cont = 1; $cont <= 4; $cont++) {
   echo "<a href=\"javascript:verFoto('".$_SESSION['fotoURL'][$id]."')\"><img src=\"".$_SESSION['fotoURL'][$id]."\" /></a>";
   if ($id == $_SESSION['ultima'])
      $id = 1;
   else
      $id++;
}
?>
getphoto.php:

Código PHP:
<?php
$imagen = $_POST['imagen'];
echo "<img src=\"".$imagen."\" />";
?>
Soy totalmente nuevo en AJAX, pero me base en un codigo que encontre en internet. Al principio funcionaba, pero cuando le agregue mas cosas dejo de funcionar. Lo revise completamente y no encuentro que es lo que hace que no funcione. Seguro es un error tonto, pero la verdad no lo veo... si alguien sabe...

Saludos
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 05:59.