Here's a fiddle without any help of a plugin: http://jsfiddle.net/SzR6h/25/

Answer to your comment

Assume that your bigger images have a completely different name, I'd put that name in a data-*-Attribute in the image tag, e.g.

<img src="http://0.s3.envato.com/files/19320511/Scenery%2080x80%20Avatar.png"
data-image-big="url_to_image_big"/>

In your javaScript, you can then get image URL by writing:

var urlBigImage = $img.data('image-big');

There are a lot of jQuery plugins available for this

Thickbox

LightBox

FancyBox

FaceBox

NyroModal

PiroBox

Thickbox Examples

For a single image

1. Create a link element ()
2. Give the link a class attribute with a value of thickbox (class="thickbox")
3. Provide a path in the href attribute to an image file (.jpg .jpeg .png .gif .bmp)

From your question it is not entirely clear what you want to achieve. But since your are mentioning you want to create a pop-up I expect you want to have a dedicated element (div) to showcase your enlarged image.

So in the example below there is an #image-pop-up element that is hidden by default. Since you are already using jQuery, judging by the $('.img-thumbnail') in your example, you can use some of the default jQuery functions to add and remove an image to the #image-pop-up element. And also hide and show it. Adding the image when you click on the thumbnail, and removing it when you click on the enlarged image.

Also do not comma separate your classes in a HTML element!

$(document).ready(function(){
    $('.img-thumbnail').on('click', function() {
        $('#image-pop-up').prepend('<img src=' + $(this).attr('src') + ' id="enlarged-image" />');
        $('#image-pop-up').show();
    });
    
    $('#image-pop-up').on('click', function() {
        $(this).hide();
        $('#enlarged-image').remove();
    });
   
});

#image-pop-up {
  width: 100vw;
  height: 100%;
  box-sizing: border-box;
  padding: 5px;
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  display: none;
}
 
#image-pop-up img {
  width: 100%;
}

figure {
  height: 80px;
  width: auto;
  float: left;
  display: block;
  margin: 0 10px 0 0;
}
 
.img-thumbnail {
  height: 100%;
  border-style: groove;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="image-pop-up"></div>

<figure>       
  <img class = "double img-thumbnail" src="https://www.fillmurray.com/400/300" alt="Poodle"             
  title="View larger image..."/>    
  <figcaption class="caption1">Bill 1</figcaption>
</figure>

<figure>       
  <img class = "double img-thumbnail" src="https://www.fillmurray.com/400/500" alt="Poodle"             
  title="View larger image..."/>    
  <figcaption class="caption1">Bill 2</figcaption>
</figure>

<figure>       
  <img class = "double img-thumbnail" src="https://www.fillmurray.com/200/300" alt="Poodle"             
  title="View larger image..."/>    
  <figcaption class="caption1">Bill 3</figcaption>
</figure>