360 image viewer how to#
360 image viewer update#
360 image viewer code#

zoommax - maximum amount of zoom, beyond 50, the image starts to look quite blurry, default is 50.zoom - amount to zoom in/out - positive is zoom in, negative is zoom out, default value is 0.vertical - vertical degrees offset to start displaying the image, eg: -20 means 'look down by 20 degrees', default is 0.horizontal - horizontal degrees offset to start displaying the image, eg: 180 means show the 'back' of the image initially, default is 0.forceinit - initialize even when a preview image is specified, useful for older browsers, default is false.

previewimg - optional URL to a preview image, this will cause the player to lazy load the image when the user clicks.

imgcubeorder - The order the images should be shown in the cube, default is 'r,l,u,d,f,b', unless KR mode, in which case default is 'r,l,u,d,b,f'.

imgcubekrmode - When using a KRPano based image cube, we horizontally flip l,r,f,b, vertically flip d,u, default is false.

360 image viewer how to#

imgcube - Is this an image cube from 6 images, default is false, see the below for how to name your images.img - URL to the 360° image(s) you want to display.You can specify options using data attributes on the script tag, or passed into the init function, here is a list of options: Panorama.Note: to specify that you want a slideshow, simply include multiple images separated by a vertical bar '|'. var panorama = document.getElementById('panorama') And, of course, once the user clicks on the image once again we stop scrolling on mousemove event.

360 image viewer update#

We update the backgroundPositionX property as the user moves the cursor horizontally over the image after clicking the image once to enable auto horizontal scroll. Now onto a bit of JavaScript required to make it tick. The background rule ensures that while scrolling horizontally we can view the entire 360 degree view captured by the image. We put the following bit of CSS to our css file, .īackground: url('/images/pexels-photo-356886.jpeg') 0 0 repeat-x

We need to add a bit of CSS as well to basically link up the two ends of the panoramic image. Var advanced360 = document.getElementById('advanced360') Var slider = document.getElementById('slider') var image360 = document.getElementById('image360') Now, our JavaScript should look as follows: Then we go about invoking the rotate function every 250 milliseconds to make the auto rotate feature work for the second image tag. We take use the value of the slider to switch to the appropriate image in the cached list preloaded. After that we handle the input event of the slider. Firstly we preload the images needed for this to work. Now onto making it work we need to write some JavaScript. The first one would be used to display an image that the user can rotate using the slider and the other one will display the same image rotating 360 degrees on its own. The image tags do not have anything special about them. We can then take the current value of the slider and arrive at the name of the image that needs to be rendered. This is the range of values that the user can slide in. Things to note in the HTML are that we have setup the input slider with a min of 1 and max of 24. Next, we add a couple of img and an input slider.

We start off with a standard template of a standard HTML5 page. I placed the images in folder named, well, images in the project. The reason for the naming convention will become clearer shortly. I renamed each of the 24 images like Car360_1.png, Car360_2.png.Car360_24.png. So, I went about taking such snaps with my phone camera. To go about this we need images of an object of interest taken from all around. Our project’s layout looks like below: Project Layout 3.

360 image viewer code#

I am comfortable with using Visual Studio Code IDE but you can choose any text editor of your choice. We use it along with the Express module to create a barebones web server to serve files and resources to the browser. Node.js in essence is JavaScript on the server-side. Some of them are required whilst others could be replaced by tools of your own choice. To build the example application, I have used the following toolset.