Image swap from multiple galleries

[R1CKRUD3]

I realized that I didn’t format my previous question well, so I deleted it and changed the format a bit. Hopefully this will be more helpful to you guys. I am trying to create a site that will allow users to create their own t-shirts. The t-shirts have a logo on them and I am allowing users to change the colors of the left and right eye independently, the outlines for the left and right eye. The color of the mouth and it’s outline as well as the entire logo’s color. Here is an example of the code:

HTML: 

<button class="accordion"> Logo Colors </button>
    <div class="panel" id="logogallery">
        <img id="SuperPrimrose" src="Markers/LogoMarkers/SuperPrimrose.jpg" alt="SuperPrimrose">
        <img id="SuperLemonYellow" src="Markers/LogoMarkers/SuperLemonYellow.jpg" alt="SuperLemonYellow">
        <img id="Gold8000" src="Markers/LogoMarkers/Gold8000.jpg" alt="Gold8000">
    </div

<button class="accordion"> Left Eye Colors </button>
    <div class="panel" id="LEgallery">
        <img id="LEBearsNavy" src="Markers/LEMarkers/BearsNavy.jpg" alt="BearsNavy" title="BearsNavy">
        <img id="LEBlack" src="Markers/LEMarkers/Black.jpg" alt="Black">
        <img id="LEBlackLightGreen" src="Markers/LEMarkers/BlackLightGreen.jpg" alt="BlackLightGreen" title="Black">
       </div>

<button class="accordion"> Right Eye Colors </button>
    <div class="panel" id="REgallery">
        <img id="REBearsNavy" src="Markers/LogoMarkers/BearsNavy.jpg" alt="BearsNavy" title="BearsNavy">
        <img id="REBlack" src="Markers/LogoMarkers/Black.jpg" alt="Black">
       </div>

CSS:

div#logogallery {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 250px;
}

div#logogallery img {
    width: 25px;
    margin: 2px;
}
div#logofullsize {
    position: absolute;
    width: 500px;
    height: 400px;
    margin: 10px;
    top: 350px;
    right: 750px;
    background-size: contain;

div#LEgallery {
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 250px;
}

div#LEgallery img {
    width: 25px;
    margin: 2px;
}
div#LEfullsize {
    position: absolute;
    width: 500px;
    height: 400px;
    margin: 10px;
    top: 350px;
    right: 750px;
    background-size: contain;
}


/*Logo Color Image Style CSS*/

div.SuperPrimrose {
    background: url('Colors/LogoColor/SuperPrimrose.png') no-repeat left top;
}

div.SuperLemonYellow {
    background: url('Colors/LogoColor/SuperLemonYellow.png') no-repeat left top;
}

div.Gold8000 {
    background: url('Colors/LogoColor/Gold8000.png') no-repeat left top;


/*LE Color Image Style CSS*/

div.LESuperPrimrose {
    background: url('Colors/LEColor/SuperPrimrose.png') no-repeat left top;
    }
div.LESuperLemonYellow {
    background: url('Colors/LEColor/SuperLemonYellow.png') no-repeat left top;
    }
div.LEGold8000 {
    background: url('Colors/LEColor/Gold8000.png') no-repeat left top;
    }
div.LESuperDolphinYellow {
    background: url('Colors/LEColor/SuperDolphinYellow.png') no-repeat left top;

JQUERY:

    $(document).ready(function(){
        $("img").click(function(e) {
            var newclass = $(this).attr("id");
            var oldclass = $("#logofullsize").attr('class');
            $("#logofullsize").fadeOut(function() {
                $("#logofullsize").removeClass(oldclass).addClass(newclass).fadeIn('slow');
            })
        })
    });

    $(document).ready(function(){
        $("img").click(function(e) {
            var newclass = $(this).attr("id");
            var oldclass = $("#LEfullsize").attr('class');
            $("#LEfullsize").fadeOut(function() {
                $("#LEfullsize").removeClass(oldclass).addClass(newclass).fadeIn('slow');
            })
        })
    });

The site is set up so that you click a drop down (ex Logo Colors, LE Colors etc) and thumbnail colors appear. you click the color and the logo on the page changes to that specific color. I have 2 problems.

I can’t get all elements to appear on the page at once, meaning, only the main logo appears on the page. But the eyes, mouth, and outlines for them all don’t show.
Lets say the main logo appears on the page. I can click the “logo” drop down and the colors will appear. I click a color and the logo changes to the specified color. However, lets say I click the “left eye” drop down and click a color from there. Instead of changing the color of the eye in the logo, it swaps out the logo for a picture of the left eye in that color.
How can I make it so all of the elements of the logo "eyes, mouth, outlines, etc appear on the page together and make it so when I click a marker from either left eye, right eye, mouth, etc. it doesn’t change the overall image, just that aspect?

[ralphm]

This sounds complex, but I think at a minimum you’d have to show us a live demo, preferably stripped down to the essentials.

[R1CKRUD3]

Here is the link to the codepen https://codepen.io/R1CKRUD3/pen/OmeqLe

[StevenHu]

I’m wondering why you have a different jpg for each color when all you really need to do is provide a button that changes the color of the one jpg (or better yet, svg with transparent BG).

Or use a sprite sheet that swaps the images.

[R1CKRUD3]

I saw another website do it in this way so I tried to replicate not (not copying and pasting the code of course). But I am still unsure of the most efficient way to do this.

[StevenHu]

With an image sprite, you have all images arranged in a grid on one master, then clicking on different buttons you provide the code to shift it into different places so the image you want appears. See https://www.w3schools.com/css/css_image_sprites.asp

With CSS colors, all you do is ID the eyes or whatever and when a button is pressed, you code it to change color. No image swapping. See https://www.w3schools.com/css/css3_colors.asp