Are events available we could listen to?
Would like to use two threesixty instances which are in sync with their spin.

I would imagine to listen to the spin event and then set the the sprite on the other one.
Are there events implemented? Did not find them in the docs.

Hello, I m trying to implement this library to my react project. I am wondering how can I import the library to my component? I tried to copy the codepen example on my component, but I got a ref error

ReferenceError: ThreeSixty is not defined

I installed the library to my package.json

Hi. Any ideas about support to mobile responsiveness if rotated images are larger than mobile viewport?

I have currently implemented ThreeSixtyJS on my Wordpress site which was functioning without an issue here: http://dev.ridewithelka.co.uk/

However, I am now getting the following error: "ThreeSixty is not a constructor"

Could this be caused by a jQuery version dependency?

I have a threesixty instance that doesn't always show the image. Width is 720px, height is 479px.

If I try to show the image in a maximized browser on a 1080p screen, and I'm using Chrome or Edge, it doesn't appear. If I use Ctrl-mouse wheel down to change the zoom level, the images appear when I reach 50%. Zooming in to 110% also starts to show the image. Changing back to 100% hides the image again.

At certain zoom levels most frames display, but the first and last 2 or 3 don't, consistently on every rotation.

If I show the same image in Chrome or Edge in a maximized window on a 1920x1200 screen, the image appears at any zoom level. Firefox also shows the image at any zoom level regardless of resolution.

Is there anything I can try to fix this?

当图片资源是多张序列图片时，首次播放时，会闪屏

It looks like that, at the moment, when start dragging from inside the container, text on the page is still selected.
Perhaps we could add a preventDefault for cancelling those events while dragging here?

To work around this at the moment, I am having to prevent the default myself on the container by listening the window mousedown event against the container target.

useEffect(() => {
	function onMouseDown(e) {
		Object.is(e.target, divRef.current) && e.preventDefault();
	}
	addEventListener("mousedown", onMouseDown);
	return () => removeEventListener("mousedown", onMouseDown);
}, [divRef]);

return (
	<div ref={divRef} />
);

On mobile devices, whenever swiping up and down over a threesixty target will have the default scroll behaviour prevented. Would it be possible to perhaps add a passive event listener to allow scrolling up/down a page over a target?

Thanks

Hi there, I am trying to use your plugin, but I notices a slight problem.
I am passing an array of 50 images. First I preload the images, then I call your plugin.

The problem is that every time I rotate, the plugin reloads the images even if they are loaded already.

If I fully rotate the object 5 times for example, in the "network tab" in Chrome, there are 250 requests.
This causes flickering because each time the images are being loaded again.

Is there a way to solve this?

Thanks

Hi.

I'm trying to make the plugin works with an image array as said in documentation, It works if I just have one image path, with more than one the request crashes and answers an 404 not found, it is because of threesixty concatenates the array indexes and tries to get the images as one:

const threesixty = new ThreeSixty(document.getElementById('threesixty'), {
            image: [
                'static/img/rotation/1.jpeg',
                'static/img/rotation/2.jpeg'
           ]
});

The resulting request is the following:

http://localhost:5003/static/img/rotation/1.jpeg,static/img/rotation/2.jpeg

Take a look to the comma present in the URL. Due this the images are not found.

Is there a way to avoid paths concatenation and get the files one by one?

Thanks a lot

Whenever using play(false, 1) it spins once, but then it stops on the last frame of the cycle rather than the first one.
For product previews, this might not be ideal since the first frame is facing the camera and the last would be a bit off angle.
Is there a way to make it stop on the first frame instead?
Thanks

Hello, I have forked this repo https://github.com/ashivliving/threesixty.js to stop the flickering, Also I removed the use of sprite.

Kudos to this repo.

Hi @mladenilic

I really love how this works! It would be really nice to use an array of images rather than a sprite. Is that something that is doable with your ThreeSixty?

Hey great lightweight library for 360 pictures, I am pulling in the latest version from 'https://cdn.jsdelivr.net/npm/@mladenilic/threesixty.js/dist/threesixty.js'

After I initialize, I set to auto play via

threesixty.play(true, 2);

However it doesn't stop spinning after two spins. It continues on an infinite loop.
I looked into the source code, and it looks like logic for handling spin limit isn't there.

Am I just missing something?

Thanks.

Are there any events or methods we can use to get the current index when dragging? I wanted to keep a range slider in sync based on when they drag the image.

A method like this to expose to the public API would probably work.

        self.getIndex = function () {
          return index;
        };

If you like I could submit a pull request.

Thank you!

Unless something has escaped me, the width/height value is required not only for defining the space on the screen but also in the calculation of background movement.

Could we also have an option to define a width-to-height ratio (1:1 for example) where the width of the element would be set to 100%, and the padding-bottom of the element would be set to an appropriate percentage? This would create a responsive and ratio-respecting space.

To transition for index to index, you could then use width percentages (100%, 200%, 300%, so on).

Not sure if anyone's thought to add this, tried it already, or would be interested in said feature. I may need to make the change however to support a client project. If I make it, I'll try to include a PR.

Hi, thanks for the working, simple lib!

Would you consider adding a destroy method to the three sixty instance, that would clean up every event-listener and perhaps delete the slider?

Consider the following element on your web page:

By default: The target area for gestures will match the width/height of the image only:

Requested update: I'd propose a new property in the config to allow override of the default behavior, so you can listen for and capture gestures on another element all together. This would allow a user to interact with the 360 view within a much greater area:

I hope my suggestion is clear, please let me know if you'd like to see this as a PR. I have a project going on and may provide the perfect opportunity to make the change.

I have a sprite sheet in which every image is 328x328. Everything is working fine. But a further requirement is to load the same sprite with larger resolution so every 328x328 image in the new sprite is 2188x2188.
When I load this higher res sprite in a 328x328 div size it doesn't fit nor works correctly.
How would you scale down the larger sized sprites to smaller in your library.

By the way thank you for this awesome work I am really enjoying working on it.