phpファイル "Uncaught TypeError"にJQuery関数を挿入

Question

私のプロジェクトでは、パノラマ画像を挿入し、インターネット上で見つけたjQuery関数を使って360の写真に変換するプロジェクトに取り組んでいます。 私は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>"; 

、それ私は私の問題は、私はこれを交換し、私のPHPファイル内のファイルjquery.mousewheel.min.jsにあったと思います10

Answer 1

完全に動作します