Reference Error: $ is not defined -while loading the DZI xml file -OpenSeaDragon - openseadragon

Question

Below is the code snippet that iam using to load and display DZI xml files. I am getting reference error:$ is not defined.
var dziFilesUrl = '//DZI//dzc_output_files//';
// Change this to the contents of the .dzi file from your server.
var dziData = '<?xml version="1.0" encoding="utf-8"?><Collection MaxLevel="8" TileSize="256" Format="jpg" NextItemId="1" xmlns="http://schemas.microsoft.com/deepzoom/2008"><Items><I Id="0" N="0" Source="dzc_output_images/worldmap.xml"><Size Width="5000" Height="3752" /><Viewport Width="1" X="-0" Y="-0" /></I></Items></Collection>';
// This converts the XML into a DZI tile source specification object that OpenSeadragon understands.
var tileSourceFromData = function (data, filesUrl) {
var $xml = $($.parseXML(data));
var $image = $xml.find('Image');
var $size = $xml.find('Size');
var dzi = {
Image: {
xmlns: $image.attr('xmlns'),
Url: filesUrl,
Format: $image.attr('Format'),
Overlap: $image.attr('Overlap'),
TileSize: $image.attr('TileSize'),
Size: {
Height: $size.attr('Height'),
Width: $size.attr('Width')
}
}
};
console.log(dzi);
return dzi;
};
// This creates the actual viewer.
var viewer = OpenSeadragon({
id: 'openseadragon1',
prefixUrl: '//DZI/',
tileSources: tileSourceFromData(dziData, dziFilesUrl)
});
Please let me know what I need to correct.
I am using latest OpenSeaDragon Version 2.3.0

Answer 1

You need to include jQuery. More discussion here:
https://github.com/openseadragon/openseadragon/issues/1255