open an image in new tab when click on that image without anchor tag.

somewhere in the project we have some images and not have anchor tag as parent. And now we want that on click of that image, image should open in new tab.Point out that image may be repeated twice or many more. For more clearance just  understand the following code.==>

CSS==>

<style type="text/css">
    .ApImage{float:left; width: 100%; border: 2px dotted #f00; margin-bottom: 10px;}
    .apPic{display: inline-block; width: 100%; height: auto;}
</style>

HTML==>

 <div class="container">
      <div class="ApImage">
          <img class="img-responsive apPic" alt="arch_image" src="https://images.adsttc.com/media/images/55f8/107f/9644/1e1f/b100/003e/large_jpg/dubai_board_i_flattened-psd.jpg?1442320488" />
      </div>

      <div class="ApImage">
          <img class="img-responsive apPic" alt="arch_image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRW2QCJOPP7k2R5f5yitWWdPCvlEhbnsOgiUjvKX-nfGtK2ftge">
      </div>

      <div class="ApImage">
          <img class="img-responsive apPic" alt="arch_image" src="https://static1.squarespace.com/static/59e78f2bbce176d742a7b444/t/5a4d7e7488199ef51b534061/1515030350223/diagramming02.jpg">
      </div>

    </div>


Jquery==>

  <script type="text/javascript">
      $(document).ready(function(){
        $(".apPic").click(function(){         
            $(this).each(function(){
              var url = $(this).attr('src'); //getting the src value in url variable
              alert("Opening the Link in new tab.");
              window.open(url, "_blank");   // open the variable url in a new window tab.

            })
        });
      }) ; 
    </script>



For complete code reference  and Demo, download file from the below link provided.

click here to Dowload