How to learn image zoomer

Author Name : Md. Shahab uddin Category Name : Java Script

How to learn image zoomer

This is link

<link href="css/jquery-picZoomer.css" rel="stylesheet">
<script src="js/jquery.picZoomer.js" type="text/javascript"></script>
<script type="text/javascript">
$('.picZoomer').picZoomer();
$('.piclist li').on('click', function (event) {
var $pic = $(this).find('img');
$('.picZoomer-pic').attr('src', $pic.attr('src'));
});
</script>

 

This is HTML Code:

<div class="picture_area">
<div class="topImage card">
<div class="thumb-image">
<div class="picZoomer">
<img src="images/house1.png" alt="House">
</div>
</div>
</div>
<ul class="piclist">
<li><img src="images/bachalor-mess.png" alt="House"></li>
<li><img src="images/family-house.png" alt="House"></li>
<li><img src="images/female-house.jpg" alt="House"></li>
</ul>
</div>

This is css code

.piclist{

}
.piclist img{
height: 15%;
display: flex;
list-style: none;
}
.piclist li{
padding: 5px 15px;
float: left;
list-style: none;
}