31

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

5
  • Under markup they define data-photo-src... <div class="valiantContainer" data-photo-src="videos/my-photo.jpg"></div>. 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'); Dec 22, 2015 at 18:44
  • 2
    Yes all paths are supposedly correct. I logged them where they were needed to see if that was my error.
    – xzentorzx
    Dec 22, 2015 at 20:33
  • I'm glad to see you resolved the issue. Happy coding! Dec 22, 2015 at 20:37
  • 3
    Possible duplicate of Call methods using jQuery Plugin design pattern
    – Ian
    May 15, 2019 at 15:56
  • 2
    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, 2021 at 13:34

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.