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
