Dynamic news paper layout using asp.net C# web form

window.onload = function () {
        // show default image(Big image and small image) when first open
        //eq(index) can get object through index
        $(".smallbox .subbox").eq(0).trigger("click");
    }
    //set a global variable index
    var index;
    $(function () {
        //click small box can get this index and show the Big image with this index
        $(".smallbox .subbox").click(function () {
            $("#BigImg").attr("src", $(this).find("img").attr("data-big"));
            $(".smallbox .subbox").removeClass("NewSty");
            $(this).addClass("NewSty");
            this.scrollIntoView(false);
        })
    });
    function LeftChange() {
        $(".NewSty").prev().trigger("click");
    }
    function RightChange() {
        $(".NewSty").next().trigger("click");
    }

* {
        margin: 0;
        padding: 0;
    }

::-webkit-scrollbar {
    width: 10px;
}

    #Box {
        height: 300px;
        width: 600px;
        border: 1px solid red;
    }

    .smallbox {
        width: 100px;
        height:100%;
        border: 1px solid purple;
        overflow-y: auto;
        overflow-x: auto;
        float:left;
    }

    .subbox {
        border: 1px solid yellow;
    }
    .subbox img{width:100%; height:100%;}

    #bigbox {
        width: 300px;
        height: 550px;
        border: 1px solid black;
      float:left;
      margin: 10px;
    }

    #bomdiv {
        width: 500px;
        height: 100px;
    }

    #ImageButton2 {
        margin-top: 10px;
        margin-left: 150px;
    }

   .NewSty {
     border : 2px solid blue;
        /*box-shadow: 10px 10px 5px blue;*/
    }

.newsArea{
  position:absolute;
  text-decoration:none;
  background-color: rgba(0,0,255,.1);
 }

.newsArea:hover{
    background-color: rgba(0,0,255,.5);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
    <div id="Box">
        <div class="smallbox">
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/>
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/>
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/>
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/>
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/>
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/>
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/>
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/>
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG" />
                </a>
            </div>
            <div class="subbox">
                <a href="#">
                    <img alt="" src="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003_Thumb.JPG" data-big="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG"/>
                </a>
            </div>
        </div>

         <a id="ImageButton1" style="float:left;margin-top:100px;background-color:yellow;" href="#" onclick="LeftChange()"><</a>
      
        <div id="bigbox">
          <img id="BigImg" alt="" src="" style="width:100%;"/>
        </div>
           
        <a id="ImageButton2" style="float:left;margin-top:100px;background-color:yellow;" href="#" onclick="RightChange()">></a>

    </div>
      
      
      <!-- when Selected paper changed, this areas must refresh for selected page -->
      
      <a class="newsArea" style="left:150px; top:100px; width:140px; height:120px;"
              href="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG" target="_blank" onclick="alert('new page will open')">&nbsp;</a>
      
      <a class="newsArea" style="left:300px; top:40px; width:70px; height:200px;"
              href="http://epaper.tribune.com.pk/Images/Karachi/20170109/11201701090003.JPG" target="_blank" onclick="alert('new page will open')">&nbsp;</a>