fooカラーボックスを使用して画像を変更する

Question

fooカラーボックスをクリックするたびにコンテナdiv内に画像を表示できますか？もしそうなら、誰かが私に方法を教えてください。私はJavascriptを私はちょうどdata-imageを更新し、あなたがこれを好きなことができる方法のjavascript

.foo { 
 
     float: left; 
 
     width: 20px; 
 
     height: 20px; 
 
     margin: 5px; 
 
     border: 1px solid rgba(0, 0, 0, .2); 
 
    } 
 
    .white { 
 
     background: #FFFFFF; 
 
    } 
 
    .yellow { 
 
     background: #FAFF38; 
 
    } 
 
    .orange { 
 
     background: #FFA200; 
 
    } 
 

 
    .red { 
 
     background: #FF0000; 
 
    } 
 
    .dorange { 
 
     background: #FF5500; 
 
    } 
 
    .lgreen { 
 
     background: #80FF00; 
 
    } 
 

 
    .green { 
 
     background: #45C731; 
 
    } 
 

 
    .turk { 
 
     background: #17DDBC; 
 
    } 
 
    .lblue { 
 
     background: #00A2FF; 
 
    }.blue { 
 
     background: #1713F6; 
 
    }.purple { 
 
     background: #AB09D3; 
 
    }.black { 
 
     background: #000000; 
 
    }

<div id="colour"> 
 
       <div class="foo white" data-image="http://mebe.co/mustang"> 
 
       </div> 
 
       <div class="foo black" data-image="http://mebe.co/ford"> 
 
       </div> 
 
       <div class="foo yellow" data-image="http://mebe.co/f150"> 
 
       </div> 
 
       <div class="foo orange" data-image="http://mebe.co/yukon"> 
 
       </div> 
 
       <div class="foo red" data-image="http://mebe.co/370z"> 
 
       </div> 
 
       <div class="foo dorange" data-image="http://mebe.co/gtr"> 
 
       </div> 
 
       <div class="foo lgreen" data-image="http://mebe.co/sentra"> 
 
       </div> 
 
       <div class="foo green" data-image="http://mebe.co/dodge"> 
 
       </div> 
 
       <div class="foo turk" data-image="http://mebe.co/civic"> 
 
       </div> 
 
       <div class="foo lblue" data-image="http://mebe.co/gmc"> 
 
       </div> 
 
       <div class="foo blue" data-image="http://mebe.co/bmw"> 
 
       </div> 
 
       <div class="foo purple" data-image="http://mebe.co/sentra"> 
 
       </div> 
 
      </div> 
 

 
<div class="container" style="background-color:lightgrey; border-width:1px; border-style:solid; width:500px; height:500px; z-index:1; visibility:; float: left; visibility:; background-color: lightgrey;visibility:;"></div>

Answer 1

を使用してこの作業を行うには考えているように何が起こっているかを知る必要があります。

$(document).ready(function() { 
 
    $('.foo.active').each(function(){ 
 
    \t $('.container img').attr('src', $(this).data("image")); 
 
    }); 
 
    $('.foo').on('click',function(){ 
 
    \t $('.container img').attr('src', ''); 
 
    \t $('.container img').attr('src', $(this).data("image")); 
 
    }); 
 
});

.foo { 
 
    float: left; 
 
    width: 20px; 
 
    height: 20px; 
 
    margin: 5px; 
 
    border: 1px solid rgba(0, 0, 0, .2); 
 
    cursor: pointer; 
 
} 
 
.white { 
 
    background: #FFFFFF; 
 
} 
 
.yellow { 
 
    background: #FAFF38; 
 
} 
 
.orange { 
 
    background: #FFA200; 
 
} 
 
.red { 
 
    background: #FF0000; 
 
} 
 
.dorange { 
 
    background: #FF5500; 
 
} 
 
.lgreen { 
 
    background: #80FF00; 
 
} 
 
.green { 
 
    background: #45C731; 
 
} 
 
.turk { 
 
    background: #17DDBC; 
 
} 
 
.lblue { 
 
    background: #00A2FF; 
 
} 
 
.blue { 
 
    background: #1713F6; 
 
} 
 
.purple { 
 
    background: #AB09D3; 
 
} 
 
.black { 
 
    background: #000000; 
 
} 
 
.container { 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    width: 500px; 
 
    z-index: 1; 
 
    float: left; 
 
} 
 
.container img{ 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="colour"> 
 
    <div class="foo white active" data-image="https://opensource.org/files/osi_keyhole_300X300_90ppi.png"> 
 
    </div> 
 
    <div class="foo black" data-image="http://www.lilianricaud.com/travail-en-reseau/wp-content/uploads/2012/04/google-chrome-300x300.png"> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <img src="" alt="sample"> 
 
</div>