Product view -for an eCommerce website

      No Comments on Product view -for an eCommerce website

Product view for an eCommerce website-

See the Pen eCommerce product view JavaScript by kanika (@kanika22) on CodePen.

HTML:
<body><div class='col-md-5'>
<div class='col-md-2' id='thumb_container'>
  <img src='television.svg'  alt='image1' onClick='sendimg(this);' >
  <img src='smart.svg' alt='image2' onClick='sendimg(this);'>
  <img  src='laptop.svg'  alt='image3'   onClick='sendimg(this);'>
  <img src='fridge.svg'   alt='imag4' height='60' width='60' style='border:solid 1px lightgray;'
  onClick='sendimg(this);'>
 <img  src='photo-camera.svg'   alt='image5' onClick='sendimg(this);'>
</div>
<div class='col-md-9' id='main_image'>
  <img id='mainimg' src='http://zoyorent.com/svg/television.svg'  alt='image'>
</div>
</div>
</body>
CSS:
body
{
  margin:2%;
}
#thumb_container
{
  text-align:right;
  padding:0px;
}
#thumb_container img
{
  height:70px;
  width:70px;
  border:solid 1px lightgray;
  padding:5px;
}
#main_image
{
  border:solid 1px lightgray;
  
}
#main_image img
{
  padding:20px;
  height:350px;
  width:100%;
}
JavaScript:
function sendimg(a)
{
document.getElementById('mainimg').src=a.src;

}

Product view for an eCommerce website

Leave a Reply

Your email address will not be published. Required fields are marked *