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,

<?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
     }
?>

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...

         <?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="" />

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

$('.target').change(function() {
     src = $('input:radio[name="img"]:checked').val();
     $("#right").html("<img src=\"" +src+ "\" />");
});