Visualización de imágenes con AJAX

Esto es lo que estoy haciendo.

Estoy construyendo un website donde los usuarios de Twitter suben imágenes a mi website desde su cliente de tweetbot. Mi aplicación, recupera la foto de tweetbot y la carga en mi server de nube racskpace. He hecho todo eso con éxito Ahora estoy en el process de diseñar una interfaz de usuario que se parece a la siguiente. También hay un cargador de Internet.

http://d.pr/i/x4A0

El cargador web funciona bien. Lo que quiero es observar las tres imágenes a continuación. Quiero que cambie en vivo. Por ejemplo, si un usuario carga una foto a través de su cliente de tweetbot, las fotos deberían aparecer aquí. El process de carga se realiza con el file /api/index.php. Entonces, cualquier código que necesite poner allí para que cada vez que el usuario cargue, se ejecute el file /api/index.php y mi UI debería reflejarlo en vivo.

Así que he excavado un poco en AJAX para hacer esto. He incluido la siguiente function en mi /api/index.php

<script type="text/javascript"> function showPhoto(str) { if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { $shortenedurl = xmlhttp.responseText; } } xmlhttp.open("GET", "getphoto.php?q=" + str, true); xmlhttp.send(); } </script> 

También ejecuté la function al agregar showPhoto ($ shortenedurl) al final del file /api/index.php

El getPhoto.php se ve así:

 <?php $q=$_GET["q"]; $con = mysql_connect("","",""); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("", $con); $result = mysql_query("SELECT * FROM tblphoto WHERE shorturl = '$q'"); $row = mysql_fetch_array( $result ); $tweet = $row['tweet']; $sn = $row['user']; $thumb = $row['thumb']; mysql_close($con); ?> <div class="one-third column feature"> <h2> <?php echo $sn; ?> </h2> <img src=<?php echo $thumb; ?>/> <p> <?php echo $tweet; ?> </p> </div> <div class="one-third column feature"> <h2>Two</h2> <img src="http://lorempixum.com/400/100/nature/2" /> <p>Lorem ipsum dolor sit amet...</p> </div> <div class="one-third column feature"> <h2>Three</h2> <img src="http://lorempixum.com/400/100/nature/3" /> <p>Lorem ipsum dolor sit amet...</p> </div> 

Luego incluyo getPhoto.php en el índice.html de mi UI.

También quiero poder recorrer la database y mostrar solo tres imágenes a la vez. Entonces, si un usuario carga una foto, la foto más a la izquierda se cambia a la más reciente. La izquierda anterior toma la position dos y la central anterior toma la position tres. La foto más correcta se descarta.

En este momento, no se muestra nada, como en la captura de pantalla. ¿Estoy en la dirección correcta o lo estoy haciendo mal?

First src uri no se cita correctamente en su getImages.php:

Intenta replace

 <img src=<?php echo $thumb; ?> /> 

con

 <img src="<?php echo $thumb; ?>" /> 

Acabo de hacer un proyecto en el que el usuario puede upload fotos usando el cargador de subida jajax y ha usado jQuery para casi todo, así que mi respuesta está basada en gran medida en jQuery.

Lo que se refiere a la visualización de fotos, creo que solo debes hacer una request de javascript que solicite urls de image, o tal vez tags de image completa. Es su elección y depende de lo que necesita:

Script que solicita imágenes:

 $.ajax({ type: 'POST', url: 'getPhotos.php', success: function(data){ // Replace <div id="#photos"> contents with data returned from server: $('#photos').empty().append(data); } }); 

Archivo PHP que proporciona imágenes:

 // Start session to keep track of already displayed images session_start(); if (!isset($_SESSION['index'])) $_SESSION['index'] = 0; // Increment photo index to show other (next) photo every time request is made: $_SESSION['index']++; $index = $_SESSION['index']; // If all photos already displayed, start over again: if ($index > getPhotoCount()) $index = 1; // Get photo uri from sql or somewhere: $photourl = getPhotoURI( $index ); echo '<img src="'.$photourl.'" />';