JSFiddle - React, Tailwind, and code Playground
HTML
<img class="main" src="">
<p>
<img src="http://paramwebeek.com/wp-content/uploads/2013/09/demo.png" />
<img src="http://www.toolsformoney.com/financial_software_demos.jpg" />
<img src="http://paramwebeek.com/wp-content/uploads/2013/09/demo.png" />
<img src="http://www.toolsformoney.com/financial_software_demos.jpg" />
</p>
CSS
.main{
width:320px;
height:320px;
border:1px solid #00F;
}
JavaScript
//On domready parsing the each image of the p tag and applying css to the imgae
$('p img').css({
'width':'75px',
'border':'1px solid #F00'
});
//Now for each img binding click event to change the src of the main image.
$('p img').on("click", function(){
//alert($(this).attr('src'));
$('.main').attr('src', $(this).attr('src'));
});