How to create a 360 image viewer using JavaScript?
Tags: html, css, javascript, beginners
Published: 2021-06-05 13:45:25

***Hello guys, today I am going to show you how to create 360° image viewer using <a href="https://pannellum.org/">pannellum</a>, in this article you will learn how to How do you display a 360 image in HTML, and also you can learn how to use pannellum js***

By using pannellum js you can create 360° image viewer, 360° video viewer, 360° virtual tour and many more.

### What is pannellum?
![Alt 360 image viewer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6zmcl80b075rqqq5zn1.jpg)

Pannellum js is a lightweight, free, and open-source panorama viewer library for the web. By using pannellum js you can create a 360° image viewer, 360° video viewer, 360° virtual tour, and many more.

See Also: <a href="https://blog.stackfindover.com/how-to-control-video-with-scrolltrigger-gsap-animation/">How to control video with ScrollTrigger</a>

### How to create a 360 image viewer step by step

#### Step 1 — Creating a New Project
In this step, we need to create a new project folder and files(index.html, style.css, main.js) for creating a 360 image viewer. In the next step, you will start creating the structure of the webpage.

#### Step 2 — Setting Up the basic structure
In this step, we will add the HTML code to create the basic structure of the project.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to display a 360 image in HTML?</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    
</body>
</html>
```

This is the base structure of most web pages that use HTML.

Add the following code inside the `<body>` tag:

```html
<div id="panorama-360-view"></div>
```

### Step 3 — Add Pannellum library and main js file

```html
<!-- Pannellum library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pannellum/2.5.6/pannellum.css"
        integrity="sha512-UoT/Ca6+2kRekuB1IDZgwtDt0ZUfsweWmyNhMqhG4hpnf7sFnhrLrO0zHJr2vFp7eZEvJ3FN58dhVx+YMJMt2A=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/pannellum/2.5.6/pannellum.js"
        integrity="sha512-EmZuy6vd0ns9wP+3l1hETKq/vNGELFRuLfazPnKKBbDpgZL0sZ7qyao5KgVbGJKOWlAFPNn6G9naB/8WnKN43Q=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- End Pannellum library -->
<script src="main.js"></script>
```

#### How to get Pannellum library?
Method 1: By CDN JS -> <a href="https://cdnjs.com/libraries/pannellum">Get CDN</a>
Method 2: You can download Pannellum officially -> <a href="https://pannellum.org/download/">Get CDN</a>

### Step 4 — Adding Styles for the Classes
In this step, we will add styles to the section class Inside style.css file

```css
* {
    padding: 0;
    margin: 0;
}

#panorama-360-view {
    width: 100vw;
    height: 100vh;
}
```

### Step 5 — Adding Js Code
In the final step we have to do code for `main.js`

```js
pannellum.viewer('panorama-360-view', {
    "type": "equirectangular",
    "panorama": "https://i.ibb.co/6PGHKkT/360-image.jpg",
    "autoLoad": true
})
```
#### #Final Result
{% youtube s7a9A5zDcFY %}