Change image on click with Bootstrap JS radio button

Question

I'm using the latest version of Bootstrap and I want to use the javascript radio button to change between two pictures.

I got two images, let say Image1 and Image2. Underneath I want to use a radio button with two options; "Show Image1" and "Show Image2". Image1 should be showed as default. When I push "Show Image2" Image1 should disappear and be replaced with Image2, if I push "Show Image1" after that, Image1 should be showed again.

The appearance should be something like this: http://i.solidfiles.net/246a3403cb.png

Is it possible to do this with html/css/js? I would really appreciate if someone could make an JS Fiddle and explain how to do this the best way. Using a css/html hack doesn't feel like a good way doing this...

Twitter Bootstrap Radio Button (Scroll down to "Radio")

Solution 1

Here is the jsfiddle

Markup the images, and hide the second. Add the radio btn-group from your link

<div>
    <img src="http://www.google.com/images/icons/product/chrome-32.png" title="image 1" alt="image 1" id="image1" class="image-toggle" />
    <img src="http://www.google.com/images/icons/product/search-32.png" title="image 2" alt="image 2" id="image2" class="image-toggle" style="display:none;" />
</div>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary image-toggler" data-image-id="#image1">
    <input type="radio" name="options" id="option1"> Show Image 1
  </label>
  <label class="btn btn-primary image-toggler" data-image-id="#image2">
    <input type="radio" name="options" id="option2"> Show Image 2
  </label>
</div>

After the inclusion of your js, add this

<script>
    $('.image-toggler').click(function(){
        $('.image-toggle').hide();
        $($(this).attr('data-image-id')).show();
    })
</script>

Solution 2

Since you are using Bootstrap, then I would suggest you try doing this with the Bootstrap Carousel.

see here: http://getbootstrap.com/javascript/#carousel

You can see

<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>

the data-slide attribute can be used on anchors and they link to a data-target, see the Bootstrap example. This may work some how on the Bootstrap radio buttons, they are just html radio buttons by the way.. however since it needs to link to the image my bet is you will have to call it yourself.

I suggest you use jQuery and the Bootstrap Carousel methods

.carousel('prev')

Cycles to the previous item.

.carousel('next')

Cycles to the next item.

manually on the click on the radio buttons.. I will leave you to try that out.

If your looking for another approach then there are plenty of tutorials around for building an image switcher, but in your case you want it to work manually.

Try some of these websites to get you started: http://designm.ag/tutorials/21-best-websites-for-teaching-yourself-web-development/

Comments

[user2646903]

Thank you very much! This is exactly what I wanted. It's implemented and works fine (i.solidfiles.net/65e860d632.png no styling).

[Jack]

Looks just like what I need on JFiddle, but not working on my code... I copy and pasted the script to the head of my .html file. all bootstrap components are included. The first picture is shown, but the switch never happens...