JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script src="http://people.iola.dk/olau/flot/jquery.flot.stack.js"></script>
<div id="home">
<div id="leftBlock">
<div class="YourPic">
<img src=""/>
</div>
</div>
<div id="rightBlock">
<img id="img1" class="image" src="http://dummyimage.com/160x160/000/fff&text=image+1" width=160/>
<img id="img2" class="image" src="http://dummyimage.com/160x160/000/fff&text=image+2" width=160/>
<img id="img3" class="image" src="http://dummyimage.com/160x160/000/fff&text=image+3" width=160/>
</div>
</div>
CSS
#rightBlock {
float: right;
position: fixed;
height: auto;
width: 160px;
top: 0;
right: 0;
}
#leftBlock{
position: fixed;
}
JavaScript
$('#rightBlock').on('click', '.image', function(e) {
$('.YourPic').children('img').attr('src', $(e.target).attr('src'));
var imgID = $(this).attr('id');
if (imgID == 'img1')
{
$(this).hide(300);
$('#img2').show();
$('#img3').show();
}
else if (imgID == 'img2')
{
$('#img1').show();
$('#img3').show();
$(this).hide(300);
}
else if (imgID == 'img3')
{
$('#img1').show();
$('#img2').show();
$(this).hide(300);
}
});