mpetroff/pannellum

clearing the cache of the program

zeleamaaa opened this issue · 2 comments

I have successfully displayed an image using pannellum. when I click "click to load panorama" the image is successfully loaded but the message doesn't disappear so it interferes with displaying the image. I have tried various methods but to no avail. Can you provide a solution to my problem? below I have included the code that I have used. I used React JS in making it and this is the file for my panorama image


import React, { useEffect } from 'react';
import { pannellum } from "./pannellum";

const PanoramaViewer = () => {
useEffect(() => {
const panoramaContainer = document.getElementById('panorama-container');
pannellum.viewer(panoramaContainer, {
type: 'equirectangular',
panorama: 'https://pannellum.org/images/alma.jpg',
});

return () => {
};

}, []);

return <div id="panorama-container" style={{ width: '100%', height: '500px' }} />;
};

export default PanoramaViewer;


Capture

Thank you in advance

Hi Zeleamaaa,

Have you tried using the autoLoad: true option in your pannellum.viewer configuration?

This should make the panorama load immediately instead of waiting for the user to click, and should help avoid this message appearing.

Unless, you'd prefer for the user to click to load?

import React, { useEffect } from 'react';
import { pannellum } from "./pannellum";

const PanoramaViewer = () => {
useEffect(() => {
const panoramaContainer = document.getElementById('panorama-container');
pannellum.viewer(panoramaContainer, {
type: 'equirectangular',
panorama: 'https://pannellum.org/images/alma.jpg',

// Add this here.
autoLoad: true,


});

return () => {
};
}, []);

return <div id="panorama-container" style={{ width: '100%', height: '500px' }} />;
};

export default PanoramaViewer;

Hi Zeleamaaa,

Have you tried using the autoLoad: true option in your pannellum.viewer configuration?

This should make the panorama load immediately instead of waiting for the user to click, and should help avoid this message appearing.

Unless, you'd prefer for the user to click to load?

import React, { useEffect } from 'react';
import { pannellum } from "./pannellum";

const PanoramaViewer = () => {
useEffect(() => {
const panoramaContainer = document.getElementById('panorama-container');
pannellum.viewer(panoramaContainer, {
type: 'equirectangular',
panorama: 'https://pannellum.org/images/alma.jpg',

// Add this here.
autoLoad: true,


});

return () => {
};
}, []);

return <div id="panorama-container" style={{ width: '100%', height: '500px' }} />;
};

export default PanoramaViewer;

Thank you, this is very helpful, I can apply it. I also just realized that some of my configurations were wrong, which caused this problem