Load() doesnt work - Githubissues

K0M15CH commented 8 years ago

Hi Jeremy,

I create your Object like described in your documentation. In an array, I have to display multiple PhotoSpheres. For a more fluid expirience I wanted to load only the first one, and as soon the next is viewed, load that one. But: If i disable autoload and try to start .load() my browser(chrome) is returning undefined. If I want to access the object, it returns undefined.

And if i change the display-attribute of a div to display, nothing appears, although, if i display it while the Spheres is loading (with autoload:true), everything is looking like it should

content_right[index] = document.createElement("div");
content_right[index].style.display = 'none';
content_right[index].id = "photosphere_" + index;

spheres[index] = PhotoSphereViewer({
    container: content_right[index],
    panorama: data['link'],
    navbar: false,
    loading_msg:'Laden...',
    autoload:false

if(index == 0){
    spheres[0].load();
        content_right[0].style.display = "block";
});

Thank you in advance, and if its me, who is to dumb to understand it, please point out my mistake

JeremyHeleine commented 8 years ago

Hi,

The .load() method works for me so I think the problem comes from your implementation. Let's find what's wrong! The first thing I notice is the condition which is inside the definition of the arguments sent to PSV. Is it your real code or just an error of copy/paste?

K0M15CH commented 8 years ago

I'm sorry for not answering. Here is a short full code-snippet. Chrome still alerts

Uncaught TypeError: Cannot read property 'load' of undefined

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="psv-api/three.min.js"></script>
<script src="psv-api/photo-sphere-viewer.min.js"></script>
<style type="text/css">
    #psv{
        position: absolute;
        width:95%;
        min-height: 600px;
        height:95%;
    }
</style>
<script type="text/javascript">
$( document ).ready(function(){
    var sphere = PhotoSphereViewer({
        container: document.getElementById('psv'),
        panorama:'http://localhost/test/img/testimg.jpg',
        autoload: false,
    });
    sphere.load();
});
</script>   
<body><div id="psv"></div></body>
</html>

JeremyHeleine commented 8 years ago

And you don't have any other error? This error seems to indicate that the sphere object is undefined, that it's not created correctly. I think the comma after the autoload: false is a problem. Can you please try removing it?

K0M15CH commented 8 years ago

That defenitly doesn't changes anything. If I enable autoloading, I get:

three.min.js:9 THREE.WebGLRenderer 71

And as a warning:

three.min.js:1 THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter should be set to THREE.NearestFilter or THREE.LinearFilter. ( )

JeremyHeleine commented 8 years ago

I just made some tests and, in fact, weird things appeared.

If you try to create directly the object as you do (var psv = new PhotoSphereViewer(/* options */);), the psv variable contains undefined. On the contrary, if you do var psv;, and you do psv = new PhotoSphereViewer(/* options */);, then it works, the psv variable contains an instance of PhotoSphereViewer.

To be honest, I don't understand what happens here. Of course, I'll try to find the origin of this issue but, in the meantime, maybe you can define the variable before creating the object (as described above).

maroluke commented 7 years ago

Hi Jeremy,

I get the same error message, even if i create the object as you explained above. Could you find a solution?

Thanks in advance

JeremyHeleine commented 7 years ago

Hi,

What options do you use?

wojciech93 commented 7 years ago

Hello, I have similar problems. Can someone show me how to use propertly method "setPanorama" with transition option that fires on html button click ? One more when i used this code from website in methods overview example :

//Button click event

function showPanoram() {
                viewer.on('ready', function () {
                    viewer.load();
                });
            }

Im getting console browser error : Uncaught TypeError: viewer.on is not a function but with this code not :

function showPanoram() {
                viewer.load();
            }

<script type="text/javascript">
            var viewer;

            viewer = new PhotoSphereViewer({
                container: 'photoSpheareViewer',
                panorama: 'panorams/noname1.jpg',
                max_fov: '80',
                navbar: [
                    'autorotate',
                    'zoom',
                    'caption',
                    'fullscreen'
                ],
                loading_img: 'svg/45.svg',
                autoload: false
            });

            function showPS1() {
                viewer.load();
            }
</script>

<link rel="stylesheet" href="scss/photo-sphere-viewer.scss">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/D.min.js"></script>
<script type="text/javascript" src="js/uevent.min.js"></script>
<script type="text/javascript" src="js/doT.min.js"></script>
<script type="text/javascript" src="js/photo-sphere-viewer.min.js"></script>

JeremyHeleine commented 7 years ago

Hi,

Photo Sphere Viewer does not have any .on() method. Instead, you can find the .addAction() method (which can be used the same way you tried to use .on()).

An alternative is to use the onready option during the construction of the object (the value of this option is the callback function).

wojciech93 commented 7 years ago

So is there an method to toggle between diffrent panorams on button click event ? How to use it ? I don't know on which documentation I need to look at. This one have diffrent things http://photo-sphere-viewer.js.org/api/PhotoSphereViewer.html#methods

swizermeng commented 7 years ago

Hi Jeremy, I have a similar problem. When I create a basic psv object and run it , it goes wrong :"Cannot read property 'loaded' of undefined"

var viewer;
viewer = PhotoSphereViewer({ panorama: { left: 'left.jpg', front: 'front.jpg', right: 'right.jpg', back: 'back.jpg', top: 'top.jpg', bottom: 'bottom.jpg' }, container: container, min_fov : 1, max_fov : 179, zoom_level: 20, loading_img:'photosphere-logo.gif', loading_txt:'Loading...', navbar:true, });

JeremyHeleine commented 6 years ago

Hi @wojciech93, there's currently no way to change the panorama once it is loaded. The link you refer to is a fork of Photo Sphere Viewer, it's not my work (just based on mine).

Hi @swizermeng, I don't recognize the object you use as a value for panorama. Do you use a fork?

ken00815 commented 6 years ago

Hi Jeremy, I tried to follow the "Get Started" page. But I got the below error.

Uncaught TypeError: Cannot read property 'loaded' of undefined at new PhotoSphereViewer (PhotoSphereViewer.js:86) at (index):38

`<!DOCTYPE html>

Photo Sphere Viewer Testing

` Would you help to see what did i go wrong? Many thanks.

JeremyHeleine / Photo-Sphere-Viewer

Load() doesnt work #34