Image gallery from Mysql with Ajax

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
emmbec
Forum Contributor
Posts: 112
Joined: Thu Sep 21, 2006 12:19 pm
Location: Queretaro, Mexico

Image gallery from Mysql with Ajax

Post by emmbec »

Hi, I am trying to build an image gallery from some image data stored in a mysql databse using Ajax. I have a small thumbnail of these images and when clicked I would like to have the bigger size picture to be displayed, without having to reload the whole page using Ajax. I have the following HTML code in my thumbnails:

Code: Select all

<img onClick="show_picture('6');" src="my_thumb.jpg">

To simplify my code lets assume the following:
The 6 is the ID in the database corresponding to that image.

This is my JavaScript code (summarized for easier understanding):

Code: Select all

function show_picture(picture){ 
	xmlHttp=GetXmlHttpObject()
	var url="show_largePicture.php"
	url=url+"?picture"+picture	
	xmlHttp.onreadystatechange=stateChanged
	xmlHttp.open("GET",url,true)
	xmlHttp.send(null)
}
function stateChanged() { 
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ 		
		document.getElementById("Divpicture").innerHTML=xmlHttp.responseText   //The "Divpicture" is a DIV inside my HTML document
	}
} 
function GetXmlHttpObject(){ 
	var objXMLHttp=null
	if (window.XMLHttpRequest){
		objXMLHttp=new XMLHttpRequest()
	}
	else if (window.ActiveXObject){
		objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
	}
	return objXMLHttp
}

And finally here is my php code which is supposed to display the image from the database (show_largePicture.php):

Code: Select all

<?php
        $picture=$_REQUEST["picture"];
	$table_name ="images";
	$img_field = "b_imagedata";
	$mime_field = "c_type";
	include_once("../scripts/connect.php");	 //This connects to MySQL database
	$sqlQuery = "SELECT ".$img_field.",".$mime_field." FROM ".$table_name." WHERE i_imagen= ".$picture;
	$sqlResult= mysql_query ($sqlQuery,$db);
	$data = mysql_fetch_array($sqlResult);
	mysql_close($db);
	header("Content-Type: ".$data[$mime_field]);
	echo $data[$img_field];
}
?>
If I try show_largePicture.php?picture=5 alone it works ok, I can see the image that's stored in my database, but If I try it using the thumbnails with Ajax, it just doesn't work, it displays a few weird characters (I guess is the image data).

Any ideas on what I may be doing wrong? Is it even possible to do it?

Thanks!

P.S. I hope I posted this in the right forum section since it has three different programming languages...
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

why not just change the src attribute on the image tag to the full size image.
User avatar
emmbec
Forum Contributor
Posts: 112
Joined: Thu Sep 21, 2006 12:19 pm
Location: Queretaro, Mexico

Post by emmbec »

Which tag?? the first one??? what I'm trying to do is have all the thubnails in the bottom of my page and in the "MAIN" area have the full image displayed, keeping the thumbnails in their original position.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

Ya, ~Burrito makes sense.

You know the ID of the image, & the image is stored in a database. So, why not change show_picture() to do just this:

Code: Select all

function show_picture(picture)
{
   document.getElementById('divThatHoldsTheImage').innerHTML="<img src = '/path/to/show_largePicture.php?id="+picture+"' />";
}

Besides, what you've got wont work ;). Your stateChanged function is storing what AJAX gives you back as the XHTML code & text inside your Divpicture element. However, show_largePicture.php is outputing raw image data - essentially acting as the image itself. You don't want to put what show_largePicture.php outputs as html code, because it's acting like an image.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

actually I meant to just change the src attribute of the image, not necessarily write out the whole image tag using innerHTML.

ie:

Code: Select all

function changeImage(id)
{
   document.getElementById("someImage").src = "/path/to/image.gif?id="+id;
}
but either works I guess.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

Hmm, I'm not sure why I didn't realize that.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply