Magnificent Pop Up

Magnify the image on click of the image

by Priyaranjan KS

HTML

<link rel="stylesheet" href="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
<script src="https://rawgit.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>
<section class="">
  <div class="container">
    <table>
      <thead>
        <tr class="header">
          <th>
            National Flower
         </th>
          <th>
            Country
          </th>
          <th>
            Image
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tulip</td>
          <td>Peru</td>
          <td><image  class="FlowerLink" src="https://lh5.ggpht.com/gDsUvYasttZ9ucT9IiL6hCZO_miY_Z2Esc7fdP8bR-_up7U3ymvrwK1LollkEeo2oAgy=h900" height="100" width="100"></image></td>
        </tr>
        <tr>
          <td>Lotus</td>
          <td>India</td>
          <td><image  class="FlowerLink" src="http://withanopenheartdotorg.files.wordpress.com/2013/01/tumblr_lqf3n7sp3d1qbe09go1_1280_large.png?w=320&h=294" height="100" width="100"></image></td>
        </tr>
        <tr>
          <td>Sunflower</td>
          <td>Switzerland</td>
          <td><image  class="FlowerLink" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTo4nS-7mMfZlhUpwLqLBFtQGNwR4FIH4am2CMqeRMUtGN3peXw" height="100" width="100"></image></td>
        </tr>
        
      </tbody>
    </table>
  </div>
</section>

CSS

table {
  border-spacing: 0;
  width:100%;
}
td {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px;
}
th{
background:#87CEFA;
 padding: 10px 25px;
}
td + td {
  border-left:1px solid #eee;
}

JavaScript

$(".FlowerLink").each(function(){
//alert($(this).attr('src'));
$(this).wrap("<a class=\"FlowerLinkWrapper\"  href=\"" + $(this).attr('src')  + "\"></a>");
});

$('.FlowerLinkWrapper').magnificPopup({
  type: 'image',
    closeOnContentClick: true,
                 image: {
                     verticalFit: true
                 },
                 zoom: {
                     enabled: true,
                     duration: 800 // don't foget to change the duration also in CSS
                 }
});