display image onclick inside of php
I'm trying to show all files in a folder with php and place a radio button next to each image. When a radio button is selected I'd like redisp开发者_StackOverflow社区lay the image somewhere on the page. the end goal is to have three collections of images, and the user can select three and see the selection together, as a triptych.
I know that i must implement some onclick code, but I don't know how to go about doing it.
my code:
<?php
$dir = "image_gallery/";
//open dir
if ($opendir = opendir($dir))
{
//read dir
while (($file = readdir ($opendir)) !==FALSE)
{
if ($file!="."&&$file!=".."&&$file!="DS_Store")
echo "<img src='$dir/$file' width='200'><input type='radio' value='$file' name='filename'><br>";
//echo "<input type='radio' value='yes' name='$file' />";
}
}
?>
<input type="submit" name="submit" value="That's Right!">
</form>
</body>
</html>
I'm hoping to be able to display the $file variable onclick rather than reading all the image sources into an array and call upon the nth entry of the array.
I appreciate any input.
also a link to working code, http://www.evan-livingston.com/test/list.php
EDIT
non functioning code;
<html>
<head>
<script type="text/javascript">
function listSelectedImages() {
var selected = $('input[type=radio]:checked'),
selection = $.map(selected, function(e){
return e.value;
});
$('#selection').text(selection.join(', '));
}
$('input[type=radio]').change(listSelectedImages);
</script>
</head>
<body>
<form action="bad_words.php" method=post>
<a href="../main.page.php">back to main page</a>
<br/>
<br/>
<img src='image_gallery//11.01.29.3-13.jpg' width='200'>
<input type='radio' value='11.01.29.3-13.jpg' name='filename'>
<br>
<img src='image_gallery//11.01.29.3-3.jpg' width='200'>
<input type='radio' value='11.01.29.3-3.jpg' name='filename'>
<br>
<input type="submit" name="submit" value="That's Right!">
</form>
<div id="selection"></div>
</body>
</html>
@Dagon means (in the comments to your question), that you have to deal with the events triggered by a selection (change) of an image in the browser (using Javascript) rather than on the server (using PHP).
I understand that you want to list the values of the selected radio buttons somewhere next to the list?
Here's a simple example using jQuery which does that to get you started:
function listSelectedImages() {
var selected = $('input[type=radio]:checked'),
selection = $.map(selected, function(e){
return e.value;
});
$('#selection').text(selection.join(', '));
}
// This will ensure that the inputs you're trying to access
// are actually loaded onto the page already
$(function(){
$('input[type=radio]').change(listSelectedImages);
});
Working example: http://jsfiddle.net/dXUYb/
UPDATE
In order to show the images rather than a list of file names, you could e.g. do something like this:
function listSelectedImages() {
$('input[type=radio]:checked')
.prev('img')
.clone()
.insertAfter('#selection');
}
$('input[type=radio]').change(listSelectedImages);
I would recommend to wrap the images and inputs in <label> tags to allow clicking on the image itself as well too select it.
Here's an updated example: http://jsfiddle.net/dXUYb/5/
加载中,请稍侯......
精彩评论