test/index.html

<!DOCTYPE html>
<html>
<head>
  <title>Example Lightbox</title>
  <link rel="stylesheet" type="text/css" href="../dist/minimal-lightbox.css">
</head>
<style type="text/css">
  body {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
  }

  .inset-image {
    width: 50%;
    float: left;
    margin-top: 10px;
    margin-right: 30px;
  }

  .bg-image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 200px;
    height: 80px;
  }

  img {
    max-width: 100%;
  }
</style>
<body>
  <img src='http://lorempixel.com/1000/400' data-action='zoom'/>
  <p>
    Placeholder Images for every case. Webdesign or Print. It's simple and absolutely free! Just put the custom url in your code like this:
    to get your FPO / dummy image.
  </p>

  <div class='inset-image'>
    <div class='bg-image' style='background-image: url(http://lorempixel.com/600/300);' data-action='zoom'></div>  
  </div>
  
  <p>
    Placeholder Images for every case. Webdesign or Print. It's simple and absolutely free! Just put the custom url in your code like this:
    to get your FPO / dummy image.
  </p>
  <p>
    Placeholder Images for every case. Webdesign or Print. It's simple and absolutely free! Just put the custom url in your code like this:
    to get your FPO / dummy image.
  </p>

  <div class='inset-image'>
    <img src='http://lorempixel.com/600/800' data-action='zoom'/>
  </div>

  <script type="text/javascript" src="../dist/minimal-lightbox.js"></script>
</body>
</html>