Answer:

First, you must dynamically generate your images path dynamically, so it is easy to change them dynamically as well.

Explanation:

You can automatically generate the path of your images in this way using this function jquery then declare it at the beginning of your JS to use it later:

function setSRCImagens(caminho){
  $('.img-container img').each(function(index){
    $(this).attr('src', caminho+index+'.jpg');
    $(this).attr('index', caminho+index);
  });      
}

And then you can run in the event onLoad or documentReady (when your page loads):

setSRCImagens("img/gallery/work/");

To put the small images.

And you can run in the onClick event of your images:

var newImgLocation = '<div id="showimg" class="midway-horizontal midway-vertical"><img class="imgshow midway-horizontal midway-vertical" src=""/></div>';
$(".main-container").append(newImgLocation);
$('#showimg img').attr('src', $(this).attr('index')+'Large.jpg');

To put "Large" at the end of the src path, just like the little one from the black box you made and make it big.

Example running in JSFiddle (do not contain images)

Very Important:

You should make sure that your images follow this order of name: 0.jpg , 1.jpg ... and 0Large.jpg , 1Large.jpg ... on.

The best thing you do is to use some specific plugin for this, I'd recommend colorbox , you do not need to break the head programming javascript , in addition to other features, then just customize css , if this is really necessary, here is a simple example:

<a class="group1 cboxElement" href="img/gallery/work/001Large.jpg" title="Esse title vai aparecer no plugin.">
   <img src="img/gallery/work/001.jpg" />
</a><br/>

<a class="group1 cboxElement" href="img/gallery/work/002Large.jpg" title="Esse title vai aparecer no plugin.">
   <img src="img/gallery/work/002.jpg" />
</a><br/>

<a class="group1 cboxElement" href="img/gallery/work/003Large.jpg" title="Esse title vai aparecer no plugin.">
   <img src="img/gallery/work/003.jpg" /> 
</a>

In the head you call js and his css, available for dowload here , in addition it includes the following code:

$(".group1").colorbox({rel:'group1'});

Use data attributes :

html:

<img src="img/gallery/003.jpg" 
     data-large-img="img/gallery/Large003.jpg"
     alt="" 
     width="100%" />

js:

$(document).ready(function () {
  $("img").click(function() {
    var largeImg = $(this).data("large-img");
    alert(largeImg); // img/gallery/Large003.jpg
  }
});

Example jsfiddle

A very easy way to solve your problem is to use Regular Expressions to change the image address without having to modify your code a lot.

Example to find filename that is a number followed by .jpg :

/\/([0-9]+)\.jpg/i     //apenas números
/\/([0-9a-z]+)\.jpg/i  //números e letras

To understand what this expression does, use it at RegExper.com .

Applying to your code:

var imgLocation = $(this).attr("src").replace(/\/([0-9]+)\.jpg/i, '/$1large.jpg'); 
// De: img/gallery/work/001.jpg
// Para: img/gallery/work/001large.jpg

var newImgLocation = '<div id="showimg" class="midway-horizontal midway-vertical"><img class="imgshow midway-horizontal midway-vertical" src="' + imgLocation + '"/></div>';

$(".main-container").append(newImgLocation);

Most of the problems whose solution depends on navigating through the DOM is resolved by structuring HTML in the proper way. The structure presented by Kenny, used by many plugins like Lightbox, Colorbox among others, solves this problem well with a simple one:

$( this ).attr( 'href' );

Inside a jQuery.click () you can already get the path of the larger image.

Your current structure, although not the most appropriate, also allows you to reproduce the behavior, you just need to know how to add any string in the path of the original image.

All you need is:

See my implementation

The "trick" here is to find the last point in the path string and replace everything after it with the string that distinguishes the large image and its extension.

In this solution we take into account that the large image extension will always JPG, but if for some obscure reason you have that the large image will keep the image extension small, and that the extension of the small image can vary between multiple formats (normal in image upload) just get the extension before:

src.split( '.' ).pop();

See working on the second review . In this review I switched the extension from the first JPG image to PNG so that it was very clear (in the Console of course) that the original extension was being used.