xmlhttprequest json photo gallery

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
and77
Forum Newbie
Posts: 8
Joined: Sun Nov 21, 2010 10:03 am

xmlhttprequest json photo gallery

Post by and77 »

Hi all,
i want to exercise with xmlhttprequest and json so i tought to do a simple gallery.

javascript Code:

Code: Select all

window.addEventListener('load',init,'false');
var image_index=1;
var http_req;
var images=new Array();
function init(){
/*inizializza la pagina:aggiunge l'evento onclick al tag image,richiede al server le immagini,inizializza la pagina con la prima foto*/
	document.getElementById("img").addEventListener('click',change_image,'false');
	request_image();
	document.getElementById("img").src=images[0].src;
}

function request(){
	//var http_req;
	try{
		http_req=new XMLHttpRequest();
	}
	catch(failed){
		http_req=false;
	}
	if( !http_req ){
		return false
	}
	return http_req;
}
function request_image(){
	//inizializza oggeto xmlhttprequest
	http_req=request();
	if(!http_req){
		alert("Impossibile creare la richiesta!");
		return;
	}
	var url="../php/gallery_j.php";
	http_req.open("GET",url,false);//not an asinchronous request
	http_req.onreadystatechange=load_images;
	http_req.send(null);
}
function load_images(){
	if( http_req.readyState==4){
		if( http_req.status==200){
			var response=http_req.responseText;
			//alert(response);
			var jObj=JSON.parse(response);
			
    [color=#FF4000] for(var i=0;i<jObj.length;i++){
				alert(jObj[i].path+" "+jObj[i].w+" "+jObj[i].h);
				images[i]=new Image(jObj[i].w,jObj[i].h);
				images[i].src=jObj[i].path;
				//images[i].width=jObj[i].w;
				//images[i].height=jObj[i].h;
			}[/color]

		}
		else{
			alert("Error stauts: "+http_req.status);
		}
	}
}
function change_image(){
	if( image_index < images.length){
		document.getElementById("img").src=images[image_index].src;
		image_index++;
	}
	else{
		image_index=0;
		document.getElementById("img").src=images[image_index].src;
		image_index++;
	}
}
The problem arises on the red part of code.I have two types of errors jObj is undefined and the second is NetworkError: 404 Not Found - http://localhost/gallery/html/undefined ... /undefined is where gallery.html is.

php code:

Code: Select all

<?php
class Image{
    private $path;
    private $width;
    private $height;
    function __construct($path='',$width=0,$height=0){
        $this->path=$path;
        $this->width=$width;
        $this->height=$height;
    }
    function get_path(){
        return $this->path;
    }
    function get_width(){
        return $this->width;
    }
    function get_height(){
        return $this->height;
    }
    function set_path($path){
        $this->$path=$path;
    }
    function set_width($width){
        $this->$width=$width;
    }
    function set_height($height){
        $this->$height=$height;
    }
}


//$dir="../Immagini/16_10_San_Michele/";
$dir="/home/and/Immagini/16_10_San_Michele/";
$images=array();
$string="[";
$i=0;
if( is_dir($dir)){//if $dir is a directory
    if( $dir_handle=opendir($dir) ){//open directory
        while( false !== ($file=readdir($dir_handle))){//read the directory
            if( is_dir($file)){//if the file is a directory
                continue;
            }
            else{//if is a file
                $path="$dir"."$file";
                //echo "PERCORSO ALL'IMMAGINE: ".$path."\n";
                list($width,$height)=getimagesize($path);
                $image = new Image($path,$width,$height);
                $string.="{\"path\":\"".$image->get_path()."\",";
                $string.="\"w\":\"".$image->get_width()."\",";
                $string.="\"h\":\"".$image->get_height()."\"},";
                            
            }
        }
    }
    else{
        echo "error\n";
    }
}
else{ echo $dir." isn't a directory\n";
}
$string[strlen($string)-1]="]";//elimina la virgola finale
echo json_encode(utf8_encode($string));
?> 
the output is: (what is sent to the client)
[{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0726.JPG\",\"w\":\"4752\",\"h\":\"3168\"},{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0799.JPG\",\"w\":\"4752\",\"h\":\"3168\"},{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0908.JPG\",\"w\":\"4752\",\"h\":\"3168\"},{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0834.JPG\",\"w\":\"4752\",\"h\":\"3168\"},{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0744.JPG\",\"w\":\"4752\",\"h\":\"3168\"},{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0856.JPG\",\"w\":\"4752\",\"h\":\"3168\"},{\"path\":\"\/home\/and\/Immagini\/16_10_San_Michele\/IMG_0748.JPG\",\"w\":\"4752\",\"h\":\"3168\"}]

Any help?
Post Reply