Question

I wish to create an click-triggered image carousel, such as if you click on the button, an image fades in and when you click another button for the next option, the current image fades out and the a button image fades in.

An example of this web’s can be found under Products and Services on the GE-Energy website (scroll a bit down).

How could this effect be achieved?

Answer 1

This effect is achieved by using jQuery to fade the images out and in. In code this would be along the lines of:

$('#image1').fadeOut();
$('#image2').fadeIn();

And the HTML:

<img src="first_image.jpg" id="image1"/>
<img src="second_image.jpg" id="image2"/>

Edit:

This is the minimum JavaScript you would need in your HTML source:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#showfirst').click(function(e) {
        if($('#image1').css('display') != 'none') return;
        $('#image2').fadeOut();
        $('#image1').fadeIn();
        e.preventDefault();
    });
    $('#showsecond').click(function(e) {
        if($('#image2').css('display') != 'none') return;
        $('#image1').fadeOut();
        $('#image2').fadeIn();
        e.preventDefault();
    });
</script>

And the following HTML:

<a href="#" id="showfirst">Show first image</a>
<a href="#" id="showsecond">Show second image</a>
<img src="first_image.jpg" id="image1"/>
<img src="second_image.jpg" id="image2" style="display:none"/>