Change an image src with radio buttons

[EcazS]

Hmm...
I have a second option, but it's javascript related. But let's say I have something like this,
[syntax=php]
<?php
$images = glob('templates450/*.{jpg,jpeg,png,JPG,JPEG,PNG}', GLOB_BRACE);
foreach($images as $image){
?>
<p><input type="radio" name="img" class="radio" value="<?php echo $image; ?>" />
<img src="<?php echo "{$image}"; ?>" alt="<?php echo $image; ?>" /></p>
<?php
}
?>
[/syntax]
do you know how to when a radio box is selected it echoes out the right image? I did Google around but since my javascript knowledge is very, very, very poor I don't know if I actually found what I wanted.

[jacek]

do you want to do it when you submit the form, or on select ?

[EcazS]

do you want to do it when you submit the form, or on select ?

On select, so it'll be like a "live preview" sort of thing

[jacek]

okay... then your php should look something like this...

[syntax=php] <?php
$images = glob('templates450/*.{jpg,jpeg,png,JPG,JPEG,PNG}', GLOB_BRACE);
foreach($images as $image){
?>
<p><input type="radio" name="img" class="radio" value="<?php echo $image; ?>" /></p>
<?php
}

?>

<img src="<?php echo "{$images[0]}"; ?>" alt="" />[/syntax]
Then you need to use javascript to do something with the value of the radio button when you select it.

Start by making a function that sets the src of the image and then play around with the onselect (maybe ?) event that radio buttons have.

[jacek]

Also, split into a new topic, mostly because I want there to be a post in the javascript section

[EcazS]

You're not gonna like this but.......



i did it in jquery

[jacek]

Well if you insist in being lazy, at least post the solution so google people find it

[EcazS]

Well if you insist in being lazy

This is what I did, not sure how "efficient" it is but it works
[syntax=javascript]
$('.target').change(function() {
src = $('input:radio[name="img"]:checked').val();
$("#right").html("<img src=\"" +src+ "\" />");
});
[/syntax]