Page 1 of 1
Assign value On Click
Posted: Wed Oct 29, 2003 6:22 pm
by johnperkins21
Ok, I'm very new to php and am having some difficulty with one issue. I have searched for this answer, but cannot find it. I have an image gallery using PHP and Javascript. On the mouseclick the large image changes to the thumbnail that I clicked. It also receives a variable from the original page to say which image was clicked from that page. So far so good. Now when the page first loads, I can set the right photo and caption, but when you click on a thumbnail, I do not know how to pass (or change) the variable for my caption array.
Here is a snippet of my code to hopefully show you what I mean:
Code: Select all
echo <<<END
<table border = 0 width = "950" height = "600" div align = center>
<tr width = 100% height = 100%>
<td width = "550" align = center>
<img vspace = "0" src = "{$imagesї$imagenumber]}" name="full_image" border = 1>
<br>
$captionsї$imagenumber]
</td>
<td align = center>
<table border = 0 div align = center cellpadding = 2>
<tr><td align = center>
<a href="javascript:;" onClick="document.full_image.src='{$imagesї0]}'">
<img src = "{$imagesї0]}" width = "66" height = "50"></a>
</td><td align = center>
<a href="javascript:;" onClick="document.full_image.src='{$imagesї1]}'">
<img src = "{$imagesї1]}" width = "66" height = "50"></a>
Any help would be appreciated. I'm pretty sure that at some point, I need to come out of my echo statement, but I'm lost as to how to change $imagenumber within href.
Thanks for all your help,
John[/quote]
Posted: Wed Oct 29, 2003 6:35 pm
by johnperkins21
Somewhat off topic, but I'm getting notified on this thread. How do I put my code in the little box to make it easier to read. I have read the FAQ and the Tutorials and BBCode link, but cannot find the answer. Just trying to make it easier for people to help me out = ).
Thanks again,
John Perkins
Posted: Wed Oct 29, 2003 7:53 pm
by volka
Disable BBCode in this post
You've checked that on the post page, I've unchecked it for you
For your question: it's not that simple to answer.
When you click a link from your code php is already set and done. The code is javascript and works client-side, at this stage there's no connection to server (until you perform a new request ...a request for a new document).
Open your browser's source view, what you see there is everything that happens at this moment ...php is not involved anymore.
And that's why I've moved the thread to "client side"
So what you're trying to do has to be done client-side (with javascript/domhtml) or by performing a new request (what you apparently want to avoid)
the best I can provide you right now is an example how to change two elements on one click
Code: Select all
<html>
<head>
<script type="text/javascript">
function switchImage(sSource, sDescription)
{
objImg = document.getElementById("full_image");
objDesc = document.getElementById("imagedesc");
if (objImg==null || objDesc==null)
return false;
objImg.src = sSource;
objImg.alt = sSource;
objDesc.value = sDescription;
return true;
}
</script>
</head>
<body>
<img src="a.png" alt="a.png" id="full_image" />
<br />
<!-- a disabled input field is ugly but easy to handle ;-) -->
<input type="text" disabled="disabled" id="imagedesc" />
<br />
<button onClick="switchImage('a.png', 'image A');">image A</button>
<button onClick="switchImage('b.png', 'image B');">image B</button>
<button onClick="switchImage('c.png', 'image C');">image C</button>
<button onClick="switchImage('d.png', 'image D');">image D</button>
<script type="text/javascript">switchImage('a.png', 'image A');</script>
</body>
</html>
Posted: Thu Oct 30, 2003 10:36 am
by johnperkins21
Wow, that helps quite a bit. I wasn't even thinking about PHP being server side. Duh. Okay, now I understand what's going on with this code. I see the function that I have to call on the click. Now, I'm trying to do this without the buttons. My page is already laid out pretty nice with a bunch of thumbnails, and adding the buttons will be a little gaudy. In theory, I should just need to call the JavaScript function and pass my variables. Here is what I came up with:
Code: Select all
<td align = center>
<a href="javascript:;" onClick="switchImage('$imagesї0]', '$captionsї0]'">
<img src = "{$imagesї0]}" width = "66" height = "50"></a>
</td>
Now, I figure that should work since the onClick event calls the switchImage function and passes my variables (in the source they come out right). Is this a functionality issue with HTML that I just don't get. Can I only do this with a button?
Thanks for the help, I'm starting to learn a lot.
Posted: Thu Oct 30, 2003 11:03 am
by volka
onClick="switchImage('$images[0]', '$captions[0]'"
that will cause a parse error
Code: Select all
onClick="switchImage('$imagesї0]', '$captionsї0]');"
Posted: Thu Oct 30, 2003 11:09 am
by johnperkins21
Oh my god. I'm sorry, I'm an idiot. That's why I'm the noob. Thanks again. It works perfectly.