JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="imgDisplay">
</div>
<div id="thumbnails">
<div id="thumb1" class="thumb">
<img src="http://bit.ly/1w2ZWCa" alt=""/>
<div id="text">Angel</div>
</div>
<div id="thumb2" class="thumb">
<img src="http://www.huntsvillephotographicsociety.org/wp-content/uploads/2013/06/Reelfoot-Lake-TN-054cc-640x320.jpg" alt=""/>
<div id="text">Thumb</div>
</div>
<div id="thumb3" class="thumb">
<img src="http://www.sub5zero.com/wp-content/uploads/2013/01/wheelsandmore-Tuning_FF_Ferrari-640x320.jpg" alt=""/>
<div id="text">Thumb</div>
</div>
<div id="thumb4" class="thumb">
<img src="http://i1.2pcdn.com/node14/image/article/201402/16/20140216061931a0dpm8gshhqsxaj1.jpg" alt=""/>
<div id="text">Thumb</div>
</div>
<div id="thumb5" class="thumb">
<img src="http://i1.2pcdn.com/node14/image/article/201402/16/20140216061951a0dpm8h4esu2dezk.jpg" alt=""/>
<div id="text">Thumb</div>
</div>
<div id="thumb6" class="thumb">
<img src="http://bit.ly/1w2ZWCa" alt=""/>
<div id="text">Angel</div>
</div>
<div id="thumb7" class="thumb">
<img src="http://www.huntsvillephotographicsociety.org/wp-content/uploads/2013/06/Reelfoot-Lake-TN-054cc-640x320.jpg" alt=""/>
<div id="text">Thumb</div>
</div>
<div id="thumb8" class="thumb">
<img src="http://www.sub5zero.com/wp-content/uploads/2013/01/wheelsandmore-Tuning_FF_Ferrari-640x320.jpg" alt=""/>
<div id="text">Thumb</div>
</div>
<div id="thumb9" class="thumb">
<img...
CSS
body {
background: #666;
}
#imgDisplay {
background-image: url(http://drpacholec.com/wp-content/uploads/2012/07/6-640x320.jpg);
width:640px;
height:320px;
margin: 30px auto;
border:5px solid white;
box-shadow: 0px 0px 0px 15px rgba(0, 0, 0, 0.3),
0px 20px 15px 0px rgba(0, 0, 0, 0.6);
}
#thumbnails {
width:640px;
margin:10px auto;
}
.thumb {
width:100px;
height:50px;
background:#666;
margin:10px 12px;;
float:left;
padding-bottom: 20px;
text-align:center;
border: 2px solid white;
}
#text {
bottom:10px;
margin-top: -6px;
color:white;
text-shadow: 1px 1px black;
border-top: 2px solid white;
}
.thumb img {
width:100px;
height:50px;
}
JavaScript
$(document).ready(function() {
$('#thumb1').click(function() {
$('#imgDisplay').anystretch("http://bit.ly/1w2ZWCa", {speed: 1000});
});
$('#thumb2').click(function() {
$('#imgDisplay').anystretch("http://www.huntsvillephotographicsociety.org/wp-content/uploads/2013/06/Reelfoot-Lake-TN-054cc-640x320.jpg", {speed: 1000});
});
$('#thumb3').click(function() {
$('#imgDisplay').anystretch("http://www.sub5zero.com/wp-content/uploads/2013/01/wheelsandmore-Tuning_FF_Ferrari-640x320.jpg", {speed: 1000});
});
$('#thumb4').click(function() {
$('#imgDisplay').anystretch("http://i1.2pcdn.com/node14/image/article/201402/16/20140216061931a0dpm8gshhqsxaj1.jpg", {speed: 1000});
});
$('#thumb5').click(function() {
$('#imgDisplay').anystretch("http://i1.2pcdn.com/node14/image/article/201402/16/20140216061951a0dpm8h4esu2dezk.jpg", {speed: 1000});
});
$('#thumb6').click(function() {
$('#imgDisplay').anystretch("http://bit.ly/1w2ZWCa", {speed: 1000});
});
$('#thumb7').click(function() {
$('#imgDisplay').anystretch("http://www.huntsvillephotographicsociety.org/wp-content/uploads/2013/06/Reelfoot-Lake-TN-054cc-640x320.jpg", {speed: 1000});
});
$('#thumb8').click(function() {
$('#imgDisplay').anystretch("http://www.sub5zero.com/wp-content/uploads/2013/01/wheelsandmore-Tuning_FF_Ferrari-640x320.jpg", {speed: 1000});
});
$('#thumb9').click(function() {
$('#imgDisplay').anystretch("http://i1.2pcdn.com/node14/image/article/201402/16/20140216061931a0dpm8gshhqsxaj1.jpg", {speed: 1000});
});
$('#thumb10').click(function() {
$('#imgDisplay').anystretch("http://i1.2pcdn.com/node14/image/article/201402/16/20140216061951a0dpm8h4esu2dezk.jpg", {speed: 1000});
});
});
/*
* jQuery Anystretch
* Version 1.2 (@jbrooksuk / me.itslimetime.com)
* https://github.com/jbrooksuk/jquery-anystretch
* Based on Dan Millar's Port
*...