How to get thumbnails as pop up with main image ?

Question

I have created one main image  and four vertical thumbnails. when i clicked on main image it will show in pop up with thumbnails . i am not getting thumbnail images.

here is my code

<div id="popup_content">

<div class="col-md-12" style="margin-top: 45px;">

<!--col-md-12 start-->

<div class="col-md-4 displayimg" id="xyz"> <!-- in col-12, 4cols start here -->

<div>

<div id="divzoom" style="cursor: pointer;">

<div id="mainpic" style="width:270px;height:500px; >

<span class="glyphicon glyphicon-zoom-in" aria-hidden="true">

<a href="#" class="topopup"> <img id="ContentPlaceHolder1_imgMainImage" class="img-

responsive" src="images/designstyles/a.jpg" height="690" width="500"/></a><a href="#" id="close"class="btnclick" ></a></span>

</div>

</div>

</div>

</div> <!-- in col-12, 4cols end here -->

<div class="col-md-1 rtsmobthumb1" id="abc"> <!-- in col-12, 1cols start here -->

<br>

<div class="tn">

<img id="lkj" src="images/designstyles/a.jpg" class="img-responsive rts_img" height="60"

width="55" />

<img id="mno" src="images/designstyles/b.jpg" class="img-responsive rts_img" height="60"

width="55" />

<img id="ghi" src="images/designstyles/c.jpg" class="img-responsive rts_img" height="60"

width="55" />

<img id="pqr" src="images/designstyles/d.jpg" class="img-responsive rts_img" height="60"

width="55" />

</div>

</div> <!-- in col-12, 1cols end here -->

</div><!-- in div dialog -->

</div>

</div>