Recently, I created a basic slideshow with 4 images where upon clicking, the selected image displays in a larger div box. The functionality is quite straightforward, but if you have any queries, feel free to ask. As of now, with only 4 images in the slideshow, the current code suffices. However, what if there were over 100 pictures? In that case, duplicating and pasting the javascript function for each onclick event would not be an ideal solution in terms of cleanliness. Hence, my query revolves around how to modify the javascript so that clicking on any image automatically displays it in the larger container, making the overall code more streamlined. Thank you.
http://jsfiddle.net/jzhang172/p3Lg96p8/
function clickFunction(){
document.getElementById("big").style.backgroundImage="url('http://assets22.pokemon.com/assets/cms2/img/pokedex/full/007.png')";
}
function clickFunction2(){
document.getElementById("big").style.backgroundImage="url('http://cdn.bulbagarden.net/upload/thumb/f/fb/143Snorlax.png/250px-143Snorlax.png')";
}
function clickFunction3(){
document.getElementById("big").style.backgroundImage="url('http://img2.wikia.nocookie.net/__cb20140410200831/pokemon/images/0/02/025Pikachu_Dream.png')";
}
function clickFunction4(){
document.getElementById("big").style.backgroundImage="url('http://pre03.deviantart.net/27f2/th/pre/f/2012/218/0/7/_004_charmander___1st_attempt_sugimori_style_by_white__flame-d59zqwh.png')";
}#container{
border:solid 2px;
width:1100px;
height:600px;
position:relative;
overflow:hidden;
}
#big{
border:solid 2px;
border-color:blue;
height:350px;
background:gray;
background-repeat:no-repeat;
background-position:center;
}
.slides{
text-align:center;
margin-top:30px;
border: solid 2px red;
height:200px;
}
.thumb{
border:solid 2px green;
width:260px;
height:100%;
margin:0px;
display:inline-block;
}
.thumb img{
width:100%;
height:100%;
}
.thumb:hover{
border:solid 4px red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>MySlide</title>
<body>
<div id="container">
Container
<div id="big">
big
</div>
<div class="slides">
<div class="thumb one" onclick="clickFunction()">
<img src="http://assets22.pokemon.com/assets/cms2/img/pokedex/full/007.png">
</div>
<div class="thumb 2"onclick="clickFunction2()">
<img src="http://cdn.bulbagarden.net/upload/thumb/f/fb/143Snorlax.png/250px-143Snorlax.png">
</div>
<div class="thumb 3"onclick="clickFunction3()">
<img src="http://img2.wikia.nocookie.net/__cb20140410200831/pokemon/images/0/02/025Pikachu_Dream.png">
</div>
<div class="thumb 4"onclick="clickFunction4()">
<img src="http://pre03.deviantart.net/27f2/th/pre/f/2012/218/0/7/_004_charmander___1st_attempt_sugimori_style_by_white__flame-d59zqwh.png">
</div>