Can't access prototype function in jQuery plugin

Question

I'm trying to create an image gallery consisting of multiple 360 degree images. I wanted to use Valiant360 for this, since it seemed to do all I needed it to do.

The initiation through Angular worked pretty ok, BUT now I'm at a point where I wanted to implement multiple images and it just does not work.

No error, no logs, nothing.

So here is my code...

In the html-template:

<ul class="view__content--imageList">
    <li class="view__content--listItem" ng-repeat="image in laden.images" ng-click="loadImage($index)">
        <p class="view__content--description">{{image.description}}</p>
    </li>
</ul>

In the controller within the corresponding js:

var container = $('.valiantPhoto');

laden.success(function (data)
{
    $scope.laden = data;
    console.log(data);

    $timeout(function ()
    {
        container.Valiant360({
            hideControls: false,
            fov: 35,
            fovMin: 35,
            fovMax: 35,
            clickAndDrag: true
        });
    });
});

$scope.loadImage = function (id)
{

    var image = $scope.laden.images[id].image;
    var mimage = $scope.laden.images[id].mimage;

    if ($('.view__content--360gallery').height() > 300)
    {
        container.Valiant360('loadPhoto', image);
    } else {
        container.Valiant360('loadPhoto', mimage);
    }
}

I manipulated the original plugin js to have logs and the function there now looks like this:

loadPhoto: function(photoFile) {
    console.log("Loading...");
    this._texture = THREE.ImageUtils.loadTexture( photoFile );
    console.log("Loaded: ", photoFile);
};

I've spend half a day by now trying to figure this out, but I'm not seeing it. Obviously I'm not the only one with that problem as you can see here: https://github.com/flimshaw/Valiant360/issues/29 but I have no experience with jQuery plugins except using working ones. So it might be a pretty obvious mistake, but still, I would very grateful if anybody could push me in the right direction here...

---

Edit: I did some more searching and found this https://stackoverflow.com/a/14128485/5708297

My function now looks like this and I get the logs from loadPhoto in the plugin:

$scope.loadImage = function (id)
{
    console.log("Container Height: ", $('.view__content--360gallery').height());

    var image = $scope.laden.images[id].image;
    var mimage = $scope.laden.images[id].mimage;
    var temp = container.Valiant360().data('plugin_Valiant360');

    if ($('.view__content--360gallery').height() > 300)
    {
        temp.loadPhoto(image);
    } else {
        temp.loadPhoto(mimage);
    }
}

So basically the problem is resolved :)

Answer 1

Just Answered the Question Based on Author solution:

---

I did some more searching and found this https://stackoverflow.com/a/14128485/5708297

My function now looks like this and I get the logs from loadPhoto in the plugin:

$scope.loadImage = function (id)
{
    console.log("Container Height: ", $('.view__content--360gallery').height());

    var image = $scope.laden.images[id].image;
    var mimage = $scope.laden.images[id].mimage;
    var temp = container.Valiant360().data('plugin_Valiant360');

    if ($('.view__content--360gallery').height() > 300)
    {
        temp.loadPhoto(image);
    } else {
        temp.loadPhoto(mimage);
    }
}