jquery visualisation fade and reorder specific images

Question

I made some renders of a room in different light setups. Then make 3 buttons to control lights. The idea is to fade in or fade out a specific image. In that way, I can turn on and off random lights. I have all variations of image.

Press buttons from left to right to see what I mean.

jsfiddle SCRIPT

I was thinking about 3 variables

v1,v2,v3

and all f this can be "1" or "0" so I can call all variables for example

"101"  <- mean that first and last light are on

and another problem is reordering the images to put the proper one below the active one.

Can anyone help me with this problem?

Answer 1

Well, the first thing you have to remember is to fadeOut all of your images, then fadeIn the one you want as your starting image. Then do the same thing when you click the button. For easier jQuery approach I added a dummy class active to your button like this:

<a class="sim1 sim-button active" href="#">v1</a>     
<a class="sim2 sim-button active" href="#">v2</a>
<a class="sim3 sim-button active" href="#">v3</a>

Check out this Fiddle, then below is my jQuery code:

$(document).ready(function(){
    $("#sim-img img").each(function(){
        $(this).fadeOut(100);
    });
    var selected_image = ".i111";
    $(selected_image).fadeIn(1000);
    $(".sim-button").click(function(){
        if($(this).hasClass("active")){
            $(this).removeClass("active");
        }else{
            $(this).addClass("active");
        }
        console.log("prev: "+selected_image);
        $(selected_image).fadeOut(1000);
        selected_image = ".i";
        $(".sim-button").each(function(){
            if($(this).hasClass("active")){
                selected_image += "1";
            }else{
                selected_image += "0";
            }
        });
        $(selected_image).fadeIn(1000);
        console.log("next: "+selected_image);
    });   
});