вставить функцию JQuery в файл php & quot; Uncaught TypeError & quot;

Я работаю над своим проектом, который вставляет панорамное изображение и преобразует его в фотографию 360, используя функцию jQuery, которую я нашел в Интернете.
Я новичок в JQuery, и я не знаю, как решить следующую ошибку, я пытаюсь включить эту функцию .js в мой файл php при загрузке изображения, но эта функция jquery не работает:

jquery.mousewheel.min.js:

(function(c) {
var a = ["DOMdMouseScroll", "mousewheel"];
c.event.special.mousewheel = {
setup: function() {
if (this.addEventListener) {
for (var d = a.length; d;) {
this.addEventListener(a[--d], b, false)
}
} else {
this.onmousewheel = b
}
},
teardown: function() {
if (this.removeEventListener) {
for (var d = a.length; d;) {
this.removeEventListener(a[--d], b, false)
}
} else {
this.onmousewheel = null
}
}
};
c.fn.extend({
mousewheel: function(d) {
return d ? this.bind("mousewheel", d) : this.trigger("mousewheel")
},
unmousewheel: function(d) {
return this.unbind("mousewheel", d)
}
});

function b(f) {
var d = [].slice.call(arguments, 1),
g = 0,
e = true;
f = c.event.fix(f || window.event);
f.type = "mousewheel";
if (f.wheelDelta) {
g = f.wheelDelta / 120
}
if (f.detail) {
g = -f.detail / 3
}
d.unshift(f, g);
return c.event.handle.apply(this, d)
}})(jQuery);

jquery.panorama360.js:

(function($) {
$.fn.panorama360 = function(options) {
this.each(function() {
var settings = {
start_position: 0,
image_width: 0,
image_height: 0,
mouse_wheel_multiplier: 20,
bind_resize: true
};
if (options) $.extend(settings, options);
var viewport = $(this);
var panoramaContainer = viewport.children('.panorama-container');
var viewportImage = panoramaContainer.children('img:first');
if (settings.image_width <= 0 && settings.image_height <= 0) {
settings.image_width = parseInt(viewportImage.data("width"));
settings.image_height = parseInt(viewportImage.data("height"));
if (!(settings.image_width) || !(settings.image_height)) return;
}
var image_ratio = settings.image_height / settings.image_width;
var elem_height = parseInt(viewport.height());
var elem_width = parseInt(elem_height / image_ratio);
var image_map = viewportImage.attr('usemap');
var image_areas;
var isDragged = false;
var mouseXprev = 0;
var scrollDelta = 0;

viewportImage.removeAttr("usemap").css("left", 0).clone().css("left", elem_width + "px").insertAfter(viewportImage);

panoramaContainer.css({
'margin-left': '-' + settings.start_position + 'px',
'width': (elem_width * 2) + 'px',
'height': (elem_height) + 'px'
});

setInterval(function() {
if (isDragged) return false;
scrollDelta = scrollDelta * 0.98;
if (Math.abs(scrollDelta) <= 2) scrollDelta = 0;
scrollView(panoramaContainer, elem_width, scrollDelta);
}, 1);
viewport.mousedown(function(e) {
if (isDragged) return false;
$(this).addClass("grab");
isDragged = true;
mouseXprev = e.clientX;
scrollOffset = 0;
return false;
}).mouseup(function() {
$(this).removeClass("grab");
isDragged = false;
scrollDelta = scrollDelta * 0.45;
return false;
}).mousemove(function(e) {
if (!isDragged) return false;
scrollDelta = parseInt((e.clientX - mouseXprev));
mouseXprev = e.clientX;
scrollView(panoramaContainer, elem_width, scrollDelta);
return false;
}).bind("mousewheel", function(e, distance) {
var delta = Math.ceil(Math.sqrt(Math.abs(distance)));
delta = distance < 0 ? -delta : delta;
scrollDelta = scrollDelta + delta * 5;
scrollView(panoramaContainer, elem_width, delta * settings.mouse_wheel_multiplier);
return false;
}).bind('contextmenu', stopEvent).bind('touchstart', function(e) {
if (isDragged) return false;
isDragged = true;
mouseXprev = e.originalEvent.touches[0].pageX;
scrollOffset = 0;
}).bind('touchmove', function(e) {
e.preventDefault();
if (!isDragged) return false;
var touch_x = e.originalEvent.touches[0].pageX;
scrollDelta = parseInt((touch_x - mouseXprev));
mouseXprev = touch_x;
scrollView(panoramaContainer, elem_width, scrollDelta);
}).bind('touchend', function(e) {
isDragged = false;
scrollDelta = scrollDelta * 0.45;
});

if (image_map) {
$('map[name=' + image_map + ']').children('area').each(function() {
switch ($(this).attr("shape").toLowerCase()) {
case 'rect':
var area_coord = $(this).attr("coords").split(",");
$area1 = $("<a class='area' href='" + $(this).attr("href") + "' title='" + $(this).attr("alt") + "'</a>");
panoramaContainer.append($area1.data("stitch", 1).data("coords", area_coord));
panoramaContainer.append($area1.clone().data("stitch", 2).data("coords", area_coord));
break;
}
});
$('map[name=' + image_map + ']').remove();
image_areas = panoramaContainer.children(".area");
image_areas.mouseup(stopEvent).mousemove(stopEvent).mousedown(stopEvent);
repositionHotspots(image_areas, settings.image_height, elem_height, elem_width);
}

if (settings.bind_resize) {
$(window).resize(function() {
elem_height = parseInt(viewport.height());
elem_width = parseInt(elem_height / image_ratio);
panoramaContainer.css({
'width': (elem_width * 2) + 'px',
'height': (elem_height) + 'px'
});
viewportImage.css("left", 0).next().css("left", elem_width + "px");
if (image_map) repositionHotspots(image_areas, settings.image_height, elem_height, elem_width);
});
}
});

function stopEvent(e) {
e.preventDefault();
return false;
}

function scrollView(panoramaContainer, elem_width, delta) {
var newMarginLeft = parseInt(panoramaContainer.css('marginLeft')) + delta;
if (newMarginLeft > 0) newMarginLeft = -elem_width;
if (newMarginLeft < -elem_width) newMarginLeft = 0;
panoramaContainer.css('marginLeft', newMarginLeft + 'px');
}

function repositionHotspots(areas, image_height, elem_height, elem_width) {
var percent = elem_height / image_height;
areas.each(function() {
area_coord = $(this).data("coords");
stitch = $(this).data("stitch");
switch (stitch) {
case 1:
$(this).css({
'left': (area_coord[0] * percent) + "px",
'top': (area_coord[1] * percent) + "px",
'width': ((area_coord[2] - area_coord[0]) * percent) + "px",
'height': ((area_coord[3] - area_coord[1]) * percent) + "px",
});
break;
case 2:
$(this).css({
'left': (elem_width + parseInt(area_coord[0]) * percent) + "px",
'top': (area_coord[1] * percent) + "px",
'width': ((area_coord[2] - area_coord[0]) * percent) + "px",
'height': ((area_coord[3] - area_coord[1]) * percent) + "px",
});
break;
}
});
}
}})(jQuery);

PHP-файл:

   <?php
echo '<link rel="stylesheet" href="/css/panorama360.css">';
echo "<script
src='https://code.jquery.com/jquery-3.1.1.min.js'
integrity='sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8='
crossorigin='anonymous'></script>";
echo "<script src='/js/jquery.mousewheel.min.js'></script>";
echo "<script src='/js/jquery.panorama360.js'></script>";
echo "<script>$(function(){ $('.panorama-view').panorama360(); });</script>";
if(isset($_POST['upload'])) {
$image_name= $_FILES['image']['name'];
$image_type= $_FILES['image']['type'];
$image_size= $_FILES['image']['size'];
$image_tmp= $_FILES['image']['tmp_name'];

if(move_uploaded_file($image_tmp,"uploadedimg/$image_name"))
{
echo "<script type='text/javascript'>alert('File Uploaded!');</script>";
}

$folder= "uploadedimg/";if(is_dir($folder)) {

if($handle = opendir($folder)){

while(($file= readdir($handle)) !=false){

if($file === '.' || $file === '..')
continue;
echo '<div class="panorama round" style=" width:1200px; height:500px; padding:10px ;background-color:#444; position: relative;">';
echo '<div class="panorama-view">';
echo '<div class="panorama-container">';
echo '<img src="uploadedimg/'.$file.'" data-width="4077" data-height="500" alt="Panorama" >';
echo '</div>';
echo '</div>';
echo '</div>';
}
closedir($handle);
}
}}  ?>