Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <ul class="Items">
    <li v-for="image in images">
      <img :src="image.img_src" >
    </li>
  </ul>
  
  <ul class="Colors">
    <li v-for="color in colors">
      <input type="radio" name="color" id="color-{{ color.id }}" v-model="picker">
      <span>{{ color.name }}</span>
    </li>
  </ul>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
​
</body>
</html>
 
ul {
  list-style: none;
}
ul li img {
  width: 110px;
}
 
new Vue({
  
  el: 'body',
  
  data: {
    images: [
      {img_src: 'http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg'},
      {img_src: 'http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg'},
      {img_src: 'http://scr.templatemonster.com/35100/35151_gall_nature_small_3.jpg'}
    ],
    colors: [
      {id: 1, name: 'Black'},
      {id: 2, name: 'Red'},
      {id: 3, name: 'Green'}
    ]
  }
  
})
​
  $('.Colors > li').on('mouseenter', function() {
    var i = $(this).index();
    $('.Items > li.active').fadeOut(200, function() {
      $(this).removeClass('active').parent('ul').children('li').eq(i).fadeIn(100).addClass('active');
    });
  });
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers