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

Under markup they define data-photo-src...
. Are you defining / updating data-photo-src correctly? Also, when you are setting image in $scope.loadImage, is it pointing to the right image path? $('.valiantContainer').Valiant360('loadPhoto', 'path/to/file.jpg'); — developthewebz, Dec 22 '15 at 18:44
Yes all paths are supposedly correct. I logged them where they were needed to see if that was my error. — xzentorzx, Dec 22 '15 at 20:33
Possible duplicate of [Call methods using jQuery Plugin design pattern](https://stackoverflow.com/questions/14128446/call-methods-using-jquery-plugin-design-pattern) — Ian, May 15 '19 at 15:56
You should add the solution as an answer and accept it so that user coming to this thread clearly see the solution. — Daniels118, Oct 12 '21 at 13:34

score 1 · Answer 1 · answered Nov 11 '21 at 07:33

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

Can't access prototype function in jQuery plugin

1 Answers1