JSFiddle - React, Tailwind, and code Playground

by Carlos Medina

HTML

<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>

<table class="display" id="datatable">
  <thead>
    <th>Name</th>
    <th>Address</th>
    <th>Image</th>
  </thead>
  <tbody>
    <tr>
      <td>Name 1</td>
      <td>Address 1</td>    
      <td>
        <a class="image-popup" href="http://www.online-image-editor.com//styles/2014/images/example_image.png">
          <img style="height: 40px; width: 40px;" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
        </a>
      </td>
    </tr>
    <tr>
      <td>Name 2</td>
      <td>Address 2</td>
      <td>
        <a class="image-popup" href="http://i.picasion.com/images/example.jpg">
          <img style="height: 40px; width: 40px;" src="http://i.picasion.com/images/example.jpg" />
        </a>
      </td>
    </tr>
  </tbody>
</table>

JavaScript

$(document).ready(function() {


  var table = $('#datatable').dataTable({
    aLengthMenu: [
      [1, 2],
      [1, 2]
    ],
    iDisplayLength: 1,
    "fnDrawCallback": function () {
        $('.image-popup').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    closeBtnInside: false,
    fixedContentPos: true,

    image: {
      verticalFit: true
    },
    zoom: {
      enabled: true,
      duration: 300 // don't foget to change the duration also in CSS
    },

  });
    }
  });
});

 
  

$(document).on('click', '.image-popup', function() {

  alert('You Clicked Image');
})