вставить функцию JQuery в php-файл «Uncaught TypeError»

Im работает над моим проектом, который вставляет панорамный снимок и преобразует его в 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); } }} ?> 

 echo "<script src='/js/jquery.mousewheel.min.js'></script>"; 

 echo "<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js'></script>";