ボタンを押したら商品カラー(メイン画像)が切り替わる動き

Question

いつもお世話になっております。
自社サイトの商品紹介ページでこちらのサイト様のような
https://brands.onisi.jp/product/bottle/detail/3?color=blue
メインがあって下のカラーをオーバーするとメインが変わる動きを
組みたいのですが、ul.liタグを使ってやるのまでは理解できるのですが、
JavaScriptについてあまり知識がなくどう連携させているのかわかりません。

お手数おかけしますが、ご教示の方お願いいたします。

Accepted Answer

ECマスターズの伊藤です。

動作のご確認ありがとうございました。

基本的な動きとなりますが、下記にJavaScriptを含むHTMLを記述いたしましたので、
ご利用くださいませ。


の
data-color="【ここ】"
が、画像のURLに含まれていたら、
画像の透過度（opacity）が変化することで
切り替わるようになっています。

下記HTMLに記述されているclass名を変更しますと
JavaScriptが動作しなくなる可能性がございますので、
編集の際はご注意ください。

＝＝＝＝＝以下をメモ帳などに貼り付けて、html形式で保存してください＝＝＝＝＝



    



    
        
        
        
        
        
        
        
        
        
    
    
        Yellow012
        Red2035
        Light Pink182
        Aubergine229
        Blue2150
        Green15-0343
        Cool Gray9
        Black419
    
    
    
        $(function(){
            $('.itemDetail__cl').children('li').hover(function(){
                let colorName = $(this).data('color');
                for(let i = 0; i < $('.main_photo').children('li').length; i++) {
                    let imgSrc = $('.main_photo').children('li').eq(i).children('img').attr('src');
                    if(imgSrc.indexOf(colorName) > -1 ){
                        $('.main_photo').children('li').eq(i).css('opacity','1')
                    }
                    else{
                        $('.main_photo').children('li').eq(i).css('opacity','0')
                    }
                }
            });
        });
    


        .item_image{
        width: 600px;
        height:300px;
        }
        .main_photo{
        position:relative;
        height: 100%;
        }
        .main_photo li{
        display: block;
        list-style-type: none;
        opacity: 1;
        height: 100%;
        width: 100%;
        text-align: center;
        position: absolute;
        transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 
        }
        .main_photo li img{
        max-width: 100%;
        height: 100%;
        }
        .main_photo li img{
        max-width: 100%;
        height: 100%;
        }
        /* サムネイル */
        .itemDetail__cl {
        list-style: none;
        }
        .itemDetail__cl li {
        margin-right: 5%;
        width: calc((100% / 4) - 5%);
        position: relative;
        }
        .itemDetail__cl {
        display: flex;
        font-weight: bold;
        line-height: 1.2;
        text-align: left;
        white-space: nowrap;
        flex-wrap:wrap;
        font-size: 10px;
        font-size: 1rem;
        transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s, transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
        }
        .itemDetail__cl li[data-color=_yellow]::before {
        background-color: #ffd700;
        border-color: #ffd700; }
        .itemDetail__cl li[data-color=_red]::before {
        background-color: #d6001c;
        border-color: #d6001c; }
        .itemDetail__cl li[data-color=_lightpink]::before {
        background-color: #fabbcb;
        border-color: #fabbcb; }
        .itemDetail__cl li[data-color=_aubergine]::before {
        background-color: #672146;
        border-color: #672146; }
        .itemDetail__cl li[data-color=_blue]::before {
        background-color: #36749d;
        border-color: #36749d; }
        .itemDetail__cl li[data-color=_green]::before {
        background-color: #88b04b;
        border-color: #88b04b; }
        .itemDetail__cl li[data-color=_coolgray]::before {
        background-color: #75787b;
        border-color: #75787b; }
        .itemDetail__cl li[data-color=_black]::before {
        background-color: #212322;
        border-color: #212322; }
        .itemDetail__cl li[data-color=_ultraviolet]::before {
        background-color: #5f4b8b;
        border-color: #5f4b8b; }
        .itemDetail__cl li[data-color=_livingcoral]::before {
        background-color: #ff6f61;
        border-color: #ff6f61; }
        .itemDetail__cl li::before, .itemDetail__cl li::after {
        box-sizing: border-box;
        content: '';
        display: block; }
        .itemDetail__cl li::before {
        margin-bottom: 1.33vw;
        height: 8vw;
        width: 100%; }

Answer

ECマスターズの伊藤です。

> 自社サイトの商品紹介ページでこちらのサイト様のような
> https://brands.onisi.jp/product/bottle/detail/3?color=blue
> メインがあって下のカラーをオーバーするとメインが変わる動きを
> 組みたいのですが、ul.liタグを使ってやるのまでは理解できるのですが、
> JavaScriptについてあまり知識がなくどう連携させているのかわかりません。

参考サイトを拝見いたしました。
１点確認をさせていただきたいのですが、

> メインがあって下のカラーをオーバーするとメインが変わる動きを

とのことですが、背景色は変更させますでしょうか。
それとも、メイン画像のみの切り替わりでよろしいでしょうか。

背景色を入れるか入れないかで
動きが変わってまいりますので、お手数ですが
ご希望の動作をご連絡くださいませ。

Answer

お返事ありがとうございます。
背景色は変更せず固定で入れたいと思っております。

どうぞよろしくお願いいたします。

Answer

ご回答ありがとうございます！

切り替わる画像を自社の商品画像に変えたとき、
なぜかオーバーすると画像が消えてしまいます…。
CSSの方でheight/width調整してみても消えてしまいます。
作成した画像は720×720のなのですが、サンプル画像と同じ長方形ではないといけないのでしょうか？

Answer

すみません、画像が表示されない現象解決いたしました。
連投になってしまい申し訳ありません。

無事に反映できました！
ありがとうございます。