根据变色更改产品图片

Question

Online example of my goal:

I'm trying to display bike products on a category page. On each product there's a frame variant color, I'm displaying that using round divs.

When I click a color, the image should change as you can see on Specialized website: (underneath the product image) Specialized Example .

My own website

You can see my own example here: My own website example (scroll down till you see the product with multiple products).

My target functionality:

When I click the GREEN div I'd like to show picture 2 and when I click the RED div I'd like to see image 3, but as Default it will always be the firs

• The first color = the first image
• The second color = the second image
• And so forth

My HTML:

<div class="frameColors">
    <div class="frameColor" data-color="#95BD40" style="background-color:#95BD40"></div>
    <div class="frameColor" data-color="#000000" style="background-color:#000000"></div>
    <div class="frameColor" data-color="#C6352D" style="background-color:#C6352D"></div>
</div>
<a href="/produkter/cykler/mountain-bikes/specialized/epic-hardtails/epic-hardtail/">
    <div class="categoryImage" data-frame-color="95BD40">
        <img src="/media/1072/165519.jpg?anchor=center&amp;mode=crop&amp;width=500&amp;height=350&amp;rnd=131200748910000000" class="productImage">
    </div>
    <div class="categoryImage" data-frame-color="000000">
        <img src="/media/1071/165518.jpg?anchor=center&amp;mode=crop&amp;width=500&amp;height=350&amp;rnd=131200746750000000" class="productImage">
    </div>
    <div class="categoryImage" data-frame-color="C6352D">
        <img src="/media/1073/166762.jpg?anchor=center&amp;mode=crop&amp;width=500&amp;height=350&amp;rnd=131200749050000000" class="productImage">
    </div>
</a>

My Foreach(s):

  var imageIds = item.GetPropertyValue<string>("productImages").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
  var images = Umbraco.Media(imageIds);

     <div class="frameColors">
                @foreach (var bikeColor in images)
                {
                    var color = bikeColor.GetPropertyValue("frameColor");

                    <div class="frameColor" data-color="#@color" style="background-color:#@color"></div>
                }
            </div>

            <a href="@item.Url">
                @foreach (var img in images)
                {        
                    <div class="categoryImage" data-frame-color="@img.GetPropertyValue("frameColor")">
                        <img src="@img.GetCropUrl("product image")" class="productImage" />
                    </div>
                }
            </a>

Answer 1

Based on Adeneo reply I managed to modify the code a little so it worked out as I wanted.

First, I added a css line: .categoryImage { display:none; } .categoryImage { display:none; } to hide ALL the product images.

I then added the script based on Adeneo's reply. I start off with targeting EACH of the .frameColor divs and inside that, I added this the following line to show the first image: categoryImage.first().show();

If the CSS line is not included, all of the product images will be displayed by default, so it was necessary to HIDE all the images and inside the script, show the first image.

    $(function () {
    $(".frameColor").each(function () {
        var categoryImage = $(this).parent("div").next("a").find(".categoryImage");
        categoryImage.first().show();

        if ($(categoryImage).length > 1) {

            $(this).on('click', function () {
                var color = $(this).data('color').replace('#', '');

                $(categoryImage).hide().filter(function () {
                    return $(this).data('frame-color') === color;
                }).show();
            });
        }
        else {
            $(this).hide();
        }
    });
});

Credits goes to Adeneo for providing the original script.