开发者

display image onclick inside of php

开发者 https://www.devze.com 2023-03-09 05:02 出处:网络
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 p

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/

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号