JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/dimsemenov/Magnific-Popup/master/dist/jquery.magnific-popup.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/dimsemenov/Magnific-Popup/master/dist/magnific-popup.css">
<button id="open-popup">Open popup</button>

<div id="my-popup" class="mfp-hide white-popup">
  Inline popup
</div>

<div class="parent-container">
	
		<div id="test-popup" class="white-popup mfp-hide">
			<li>
	  			<img src="http://angelssante.fr/images/twitter-logo.png">
	  		</li>
		</div> 

		<div id="test-popup2" class="white-popup mfp-hide">
			<li>
	  			<img src="https://upload.wikimedia.org/wikipedia/en/a/a0/GOM_Player_Logo.png">
	  		</li>
		</div> 
</div>

CSS

#open-popup {padding:20px}
.white-popup {
  position: relative;
  background: #FFF;
  padding: 40px;
  width: auto;
  max-width: 200px;
  margin: 20px auto;
  text-align: center;
}

JavaScript

$('#open-popup').magnificPopup({
    items: [
      {
        src: 'http://upload.wikimedia.org/wikipedia/commons/thumb/6/64/Peter_%26_Paul_fortress_in_SPB_03.jpg/800px-Peter_%26_Paul_fortress_in_SPB_03.jpg',
        title: 'Peter & Paul fortress in SPB'
      },
      {
        src: 'http://vimeo.com/123123',
        type: 'iframe' // this overrides default type
      },
      {
        src: $('<div class="white-popup">Dynamically created element</div>'), // Dynamically created element
        type: 'inline'
      },
      {
        src: '<div class="white-popup">Popup from HTML string</div>', // HTML string
        type: 'inline'
      },
      {
        src: '#my-popup', // CSS selector of an element on page that should be used as a popup
        type: 'inline'
      }
    ],
    gallery: {
      enabled: true
    },
    type: 'image',
    image: {
			    titleSrc: function(item) {
			      //return //item.el.attr('title');
			      var $gallery = $('.parent-container');
			      var $result = '';
			      if ($gallery.find('li').length > 0) {
			        $result = '<div class="mfp-pager">' +
			          '<div class="dots">' +
			          '<ul class="dots" style="display: inline-block;">';
			        for (var i = 0; i < $gallery.find('li').length; i++) {
			          var $cl_active = '';
			          if (item.index == i) $cl_active = ' class="active"';
			          else $cl_active = '';
			          var $thumb = $gallery.find('li:eq(' + i + ')').find('img').attr('src');
			          $result += '<li' + $cl_active + '>' +
			            '<button type="button" onclick="javascript:$(\'.parent-container\').magnificPopup(\'goTo\', ' + i + ');"><img src="' + $thumb + '" width="100px" height="100px"></button>' +
			            '</li>';
			        }

			      }
	      		return $result;
	    		}
});