Hello. I'm trying to make some kind of image gallery with php and javascript (w/ ajax), but I've run into some problems.
The basic idea is the following: I've got a <span> tag and, when I click a button, the inner html of the tag changes to <img src="x" />. The problem is that, unless the image is small -less than 80kB-, it won't load properly. Some browsers won't display it entirely, some others won't even show it.
The code related to it:
- var xmlHttp;
-
-
function Ajax(data, url, method) {
-
try
-
{
-
xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
-
} catch (e) {
-
try {
-
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
-
} catch (e) {
-
try{
-
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
-
}catch (e){
-
alert("Your browser does not support AJAX!");
-
return false;
-
}
-
}
-
}
-
-
xmlHttp.onreadystatechange = function() {
-
if (method == 'updatePhoto') updatePhoto();
-
if (method == 'getPhotoCount') getPhotoCount();
-
};
-
-
xmlHttp.open("POST", url, false);
-
-
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
-
xmlHttp.setRequestHeader("Content-length", data.length);
-
xmlHttp.setRequestHeader("Connection", "close");
-
-
xmlHttp.send(data);
-
}
-
-
function updatePhoto() {
-
if (xmlHttp.readyState == 4) {
-
document.getElementById('photoBlock').innerHTML = "<img src='images/" + xmlHttp.responseText+ "' />";
-
}
-
}
-
-
function getPhotoCount() {
-
if (xmlHttp.readyState == 4) {
-
photoCount = xmlHttp.responseText;
-
}
-
}
The php file just returns the image location within the server. There's a <span> tag with id 'photoBlock' in the main html webpage.
