building javascript from within PHP? - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

building javascript from within PHP?

working with the IMG array object?

Baruch Menachem

11:53 pm on Aug 7, 2010 (gmt 0)

10+ Year Member

My friend has a store where he has product pictures showing up differently every week. currently, I have it set up so that when the user clicks a picture, they are taken to a different page with a larger picture on it. this seems a waste of resource.

I would like to have an enlarged picture on the page as img[0], and on click, the I would like to replace img[0] with the enlarged version of the image I clicked.

Right now the code (the java script part does not work well) looks like this


 while($roe=mysql_fetch_array($result))
 {

$item=$roe['item'];
 $description=$roe['description'];
 $caption=$roe['caption'];
 $address=$roe['photoaddress'];
 $aadress=$p.$address;
 $tablerow=<<<MEOW
<div class ="figure">
<div class= "photo">
<a href="cuteshot.php?thedisplay=$item" onclick=tellme("item");><img src="$aadress" height="200" alt="$description" /></a>
</div>

</div>
\n
MEOW;
echo $tablerow;

The way he works his page, I do not know the length of the img array at run time. I was hoping to preload images into the img array after the images are all loaded in.

What would be the best method to bring the pictures into the array on pre load and expand the array, and then get the right image.

How do you know what array element a particular image is when you click it?

Thanks

rocknbil

6:07 pm on Aug 8, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

You don't need an array. I'm going to make a couple assumptions:

-- $aadress is actually a thumbnail image (you're not scaling to down to thumbnail size from a huge image, I hope)

-- $address (one "a", two "d's") is the full sized picture.

What you need to do is pass a reference to the image to "tellme" as parameters. If "tellme" contains other info, modify accordingly. Something like this.

<a href="cuteshot.php?thedisplay=$item" onclick="return tellme('$item','$address');"><img src="$aadress" height="200" alt="$description" /></a>

then,


<script type="text/javascript"> 
function tellme(itemid,large_image) { 
 alert('Item is ' + itemid + ', do something with this?'); 
 var day = new Date(); 
 var id=day.getTime(); 
 var params = 'width=600,height=600,resizable,scrollbars'; 
 msg = '<html><title>'+itemid+'</title>'+ 
 '<style type="text/css">'+ 
 'body { font-family:Arial,Helvetica,Sans-Serif; text-align:center; }'+ 
 '</style></body><h1>'+itemid+'</h1>'+ 
 '<img src="' + large_image + '">' 
 '<form><input type="button" onclick="window.close()"'+ 
 ' value="Close Window"></form></body></html>'; 
 var win = open('',id,params); 
 win.document.write(msg); 
 win.document.close(); 
 return false; 
} 
</script>

That example opens a new window, repurpose it to whatever you need it for but you can see the effect: pass what you need to your function, no need to store an array anywhere.

Baruch Menachem

8:16 pm on Aug 8, 2010 (gmt 0)

10+ Year Member

That is cool!.

What I would rather do is get an element by ID and pass it to that div rather than open a window. The guys customers are such that opening a window would be blocked off, and if it wasn't, would cause them to navigate away from his store. I can do like
bigview=document.getElementByID('theBigView');
bigview.innerHTML=msg;
return false;

and get the same functionality, right?

Thanks again, that was real helpful!

rocknbil

2:22 am on Aug 9, 2010 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Well, you don't pass it to a div - you pass the div ID to the Javascript function in the same way (I thought that might be where you were going with it.) So if you do something like this in your PHP:

while ($row=mysql_fetch_array($result)) {
$id=$row['id'];
$div_id = 'div_' . $id; // vars can't start with numbers
<a href="cuteshot.php?thedisplay=$item" onclick="return tellme('$div_id');"><img src="$aadress" height="200" alt="$description" /></a>
// etc
}

Then in your function,

function tellme(div_id) {
alert('The affected div will be ' + div_id + '.');
if (document.getElementById(div_id)) {
alert('Yes, the div exists, we can operate on it HERE.');
}
return false;
}

Pass as many parameters you need, but keep their values anonymous.