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">
  <title>JS Bin</title>
</head>
<body>
  <div id="screen">
  </div>
  <div id="photos">
      <img class="photo" src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg"/>
      <img class="photo" src="http://inspirationfeed.com/wp-content/uploads/2010/06/Evolution_by_will_yen-500x500.png"/>
      <img class="photo" src="https://upload.wikimedia.org/wikipedia/en/c/cd/The-catalyst-single-cover-500x500.png"/>
  </div>
</body>
</html>
 
#screen {width: 500px; height: 500px; border: 1px solid black;}
#photos img {width: 100px; margin: 20px;}
​
​
 
function clickThumb()
{
  var parent = document.getElementById('screen');
  if(parent.hasChildNodes()){
    parent.removeChild(parent.firstChild);
  }
 
  var elem = document.createElement('img');
  elem.src = this.src;
  parent.appendChild(elem);
}
​
var photos = document.getElementsByClassName('photo');
for(var i = 0; i < photos.length; i++)
{
   photos[i].addEventListener('click', clickThumb);
}
Output

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