so i will get right into it. I am having difficulty coding a way to display thumbnails of images that are being held in my /images/ folder, the difficulty stems from my use of ajax livesearch to serve up the content of my data.xml file.
When i upload images into my /images/ folder an xml file is created saving the pathway of each image into xml format, and ajax livesearch then serves up the results, which is the image path and filename, in a div.
I cannot seem to code a way to display the thumbnail alongside the generated results from the xml file.
Here is the look of my xml file named data.xml:
<images>
<image>
<path>images/blue.jpg</path>
</image>
</images>
Here is my home.php page and all the code I am currently using:
<!-- php code for grabbing image data and placing it into data.xml -->
<?php
$path_to_image_dir = 'images'; // relative path to your image directory
$xml_string = <<<XML
<?xml version="1.0" encoding="UTF-8"?>
<images>
</images>
XML;
$xml_generator = new SimpleXMLElement($xml_string);
if ( $handle = opendir( $path_to_image_dir ) )
{
while (false !== ($file = readdir($handle)))
{
if ( is_file($path_to_image_dir.'/'.$file) )
{
list( $width, $height ) = getimagesize($path_to_image_dir.'/'.$file);
$image = $xml_generator->addChild('image');
$image->addChild('path', $path_to_image_dir.'/'.$file);
$image->addChild('height', $height);
$image->addChild('width', $width);
}
}
closedir($handle);
}
$file = fopen('data.xml','w');
fwrite($file, $xml_generator->asXML());
fclose($file);?>
<!-- php code for initiating instant search of xml data file -->
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("data.xml");
$x=$xmlDoc->getElementsByTagName('image'); //used to be link, now image, could be images
//get the q parameter from URL
$q=$_GET["q"];
//lookup all links from the xml file if length of q>0
if (strlen($q)>0) {
$hint="";
for($i=0; $i<($x->length); $i++) {
$y=$x->item($i)->getElementsByTagName('path');
$z=$x->item($i)->getElementsByTagName('height');
if ($y->item(0)->nodeType==1) {
//find a link matching the search text
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) {
if ($hint=="") {
$hint="<div>
<strong>".$y->item(0)->childNodes->item(0)->nodeValue." ".$z->item(0)->childNodes->item(0)->nodeValue."</strong>
</div>";
}
else
{
$hint=$hint ."<div>
<strong>".$y->item(0)->childNodes->item(0)->nodeValue." ".$z->item(0)->childNodes->item(0)->nodeValue."</strong>
</div>";
}
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint=="") {
$response="";
} else {
$response=$hint;
}
//output the response
echo $response;
?>
<!--code for fetching image thumbnail and displaying it-->
<html>
<head>
<script>
function showResult(str) {
if (str.length==0) {
document.getElementById("home").innerHTML="";
document.getElementById("home").style.border="0px";
return;
}
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) {
document.getElementById("home").innerHTML=xmlhttp.responseText;
document.getElementById("home").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("GET","home.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="home"></div>
</form>
</body>
</html>
I tried this approach but to no avail:
<?php
$imageID = $_GET['path'];
$xml = simplexml_load_file("data.xml");
$searchedimage = $xml->xpath('[path="'.$imageID.'"]');
foreach($searchedimage as $imageinfo){
foreach ($imageinfo as $imagedetail){
if($imagedetail->getName($image) == 'path'){
echo '<img src="'.$image.'" height="250"; "width="250" ;>';
}
else{
echo $imagedetail->getName(). ": " ;
echo $imagedetail . "<br/>";
}
}
}
?>
What i would like is to see the results paired up with the right thumbnails alongside eachother. The code above failed and if anyone knows why and can offer a coded example I would appreciate it very much. I got the ajax livesearch code from http://ift.tt/1o1XZeO
Thanks.
No comments:
Post a Comment