Difference between revisions of "Panorama on web pages"
From Publication Station
(Created page with "[https://pannellum.org/ Pannellum] JavaScript library is a panorama viewer, that allows to easily display and navigate panorama images on web pages. In order to use Pannellum...") |
|||
| Line 18: | Line 18: | ||
See live example in http://publicationstation.wdka.hro.nl/pannellum/ | See live example in http://publicationstation.wdka.hro.nl/pannellum/ | ||
==HTML code== | ==HTML code== | ||
| Line 70: | Line 69: | ||
</source> | </source> | ||
[[Category:Research]] [[Category:Tutorial]] | |||
Revision as of 12:01, 12 December 2016
Pannellum JavaScript library is a panorama viewer, that allows to easily display and navigate panorama images on web pages.
In order to use Pannellum you must:
- Download Pannellum: https://pannellum.org/download/
- Place the downloaded files:
pannellum.css, pannellum.htm, pannellum.jsin a folder - Save a panorama image in the same folder
- Wikimedia commons is a good source of panoramic images under free licenses
- Pannellum images with a maximum of 8000px wide, so you might need to resize the panorama image file
- Use the API example in Pannellum documentation to write your HTML page. An example of the change code can be seen below
- Set the pannellum.viewer with the settings for your image, most important parameters are:
"panorama":defines the image file to use"type":the type of the image: equirectangular, cubemap, or multires- A full list of Pannellum parameters and methods can is available in its API documentation
To run it you will need to store the folder with the library, html page and images in webserver.
Example
See live example in http://publicationstation.wdka.hro.nl/pannellum/
HTML code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A simple example</title>
<link rel="stylesheet" href="pannellum.css"/>
<script type="text/javascript" src="pannellum.js"></script>
<style>
/*CSS for fullscreen */
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
cursor: default;
width: 100%;
height: 100%;
}
/*
/* CSS for non-full screen */
#panorama {
width: 600px;
height: 400px;
}
*/
</style>
</head>
<body>
<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
"type": "equirectangular",
"panorama": "Mars.jpg",
"autoLoad": true,
"showFullscreenCtrl":false
});
</script>
</body>
</html>
