Page 1 of 1

Change an image src with radio buttons

Posted: Sun May 08, 2011 8:37 pm
by 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.

Re: Imagejpeg output

Posted: Sun May 08, 2011 8:46 pm
by jacek
do you want to do it when you submit the form, or on select ?

Re: Imagejpeg output

Posted: Sun May 08, 2011 8:48 pm
by EcazS
jacek wrote: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

Re: Imagejpeg output

Posted: Sun May 08, 2011 8:52 pm
by 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.

Re: Change an image src with radio buttons

Posted: Sun May 08, 2011 8:54 pm
by jacek
Also, split into a new topic, mostly because I want there to be a post in the javascript section ;)

Re: Change an image src with radio buttons

Posted: Sun May 08, 2011 9:22 pm
by EcazS
You're not gonna like this but.......



i did it in jquery :|

Re: Change an image src with radio buttons

Posted: Sun May 08, 2011 9:26 pm
by jacek
Well if you insist in being lazy, at least post the solution so google people find it ;)

Re: Change an image src with radio buttons

Posted: Sun May 08, 2011 9:29 pm
by EcazS
jacek wrote:Well if you insist in being lazy
:lol:

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+ "\" />");
});