CHANGE var $overlay = $('<div id="overlay"></div>'); TO var overlay = $('<div id="overlay"></div>');

CHANGE var $overlay = $('<div id="overlay"></div>'); TO var overlay = $('<div id="overlay"></div>');

I know that $ sign only used for us to remind that this variable contains Jquery object or so.
But for the sake of  learning I tried not use $ sign in my variable name but it doesn't work without a $ sign..

I want to know what changes would I have to make in my code to make it work without the $ sign. 

This is working code:

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");

//Add image in overlay
$overlay.append($image);

//Add overlay
$("body").append($overlay); 

//Capture the click event on a link to an image
$("#ImageGallery a").click(function(event)
{
event.preventDefault();
var imageLocation = $(this).attr("href");
$image.attr("src", imageLocation);
$overlay.show();
});

This one without the $sign:

var overlay = $('<div id="overlay"></div>');
var image = $("<img>");

//Add image in overlay
$overlay.append(image);

//Add overlay
$("body").append(overlay); 

//Capture the click event on a link to an image
$("#ImageGallery a").click(function(event)
{
event.preventDefault();
var imageLocation = $(this).attr("href");
$image.attr("src", imageLocation);
$overlay.show();
});