insert JQuery function in php file " Uncaught TypeError "

Question

Im working on my project that inserts a panorama picture and converts it to a 360 photo using a jQuery function that i found on the internet. i'm a beginner in JQuery and i dont know how to solve the following error, im trying to include this .js function in my php file when im uploading the picture but this jquery function isnt working :

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 file:

   <?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);
    }   
}}  ?>

Looks like some issue about order of file inclusions. Can you please try including "jquery.panorama360.js" before "jquery.mousewheel.min.js" ? — Nitesh
– Nitesh, Commented Dec 19, 2016 at 14:10
@Nitesh My post is edited witht he file jquery.panorama360.js — menna
– menna, Commented Dec 19, 2016 at 14:24
Can you please elaborate on what you are trying to achieve in your PHP code? I foresee it will be better handled in jQuery rather than PHP but need your input for clarity. — nyedidikeke
– nyedidikeke, Commented Dec 19, 2016 at 14:27
@nyedidikeke i want to be able to upload a .jpg picture from which the user can select from his computer and use the jQuery function that i used in the previous uploaded files — menna
– menna, Commented Dec 19, 2016 at 14:41
Sorry @menna; just got here: had a challenge relocating the post. Glad to note you've successfully debugged and fixed it, fixing the broken link. — nyedidikeke
– nyedidikeke, Commented Dec 23, 2016 at 16:09

menna · Accepted Answer · 2016-12-23 13:16:17Z

0

i guess my problem was in the file jquery.mousewheel.min.js in my php file i replaced this:

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

with this:

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

and it works perfectly

answered Dec 23, 2016 at 13:16

menna

411 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

insert JQuery function in php file " Uncaught TypeError "

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related