meme/templates/index.html

<!DOCTYPE html>

<head>
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href="https://unpkg.com/nanogallery2/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="https://unpkg.com/nanogallery2/dist/jquery.nanogallery2.min.js"></script>
</head>

<body>
  <div style="text-align: center;">
    <img height="auto" width="10%" src="../../assets/img/header.png">
  </div>
  <h1 style="text-align: center;">Meme Templates</h1>
  <div style="text-align: center;
                background-color:rgba(56,91,85,.5);
                padding:5px;">
    <h4>
      All memes here are posted after taking permission from the person and creator of
      meme and this is a offtopic community collaboration for fun only</h4>
    <h5>click here to know how to add a new meme (link to page will be added here)</h5>
  </div>

  <div id="meme_gallery"></div>

  <script>
    let data = null;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        data = JSON.parse(this.responseText);
        jQuery("#meme_template").nanogallery2({
          items: data,
          thumbnailWidth: 'auto',
          thumbnailHeight: 200,
          itemsBaseURL: 'https://i.imgur.com/',
          locationHash: false
        });
      }
    };
    xmlhttp.open("GET", "meme_template_data.json", true);
    xmlhttp.send();

  </script>

</body>

</html>