This is a plug-in based, preview address: click here
How to use:
1. The usage of this plugin is very simple. The following 2 js are introduced.
<script src="js/"></script> <script src="js/"></script>
2. Initialize it (the specific configuration of various parameters depends on the situation)
var PSV = new PhotoSphereViewer({
// Complete path to the panoramic viewpanorama: 'images/',
// Elements that put panoramic imagescontainer: div
})
Configuration parameters
Here are all available configuration parameters for this panoramic plugin:
panorama: Required parameters, path to the panorama.
container: Required parameters, place div elements of the panoramic map.
autoload: optional, the default value is true, true is to automatically call the panorama, and false is to load the panorama behind (through the .load() method).
useexmpdata: optional, the default value is true, true if the Photo Sphere Viewer must read in XMP data.
default_position: optional, the default value is {}, which defines the default position and the first point seen by the user, for example: {long: , lat: /2}.
min_fov: optional, the default value is 30, the minimum area of observation, unit degrees, between 1-179.
max_fov: optional, the default value is 90, the maximum area of observation, unit degrees, between 1-179.
allow_user_interactions: optional, the default value is true, setting to false will prohibit the user from interacting with the panorama (the navigation bar is not available).
tilt_up_max: optional, default value is /2, maximum angle of upward tilt, unit radians.
tilt_down_max: optional, default value is /2, maximum angle of downward tilt, unit radians.
zoom_level: optional, the default value is 0, the default zoom level, the value is between 0-100.
long_offset: optional, the default value is PI/360, the longitude value passed by each pixel when mouse/touch moves.
lat_offset: optional, the default value is PI/180, the latitude value that each pixel passes when mouse/touch moves.
time_anim: optional, the default value is 2000, and the panorama will be automatically animated after time_anim milliseconds. (Set to false to disable it)
theta_offset: outdated option, optional, default value is 1440, horizontal speed when automatically animation.
anim_speed: optional, the default value is 2rpm, the speed of the animation, how many radians/degrees/revolutions per second/minute.
navbar: optional value, default to false. Show navigation bar.
navbar_style: optional value, default is {}. Custom styles for navigation bars. Here is a list of available styles:
backgroundColor: The background color of the navigation bar, the default value is rgba(61, 61, 61, 0.5).
buttonsColor: The foreground color of the button, the default value is transparent.
activeButtonsBackgroundColor: The background color of the button activation state, the default value is rgba(255, 255, 255, 0.1).
buttonsHeight: The height of the button, unit pixels, the default value is 20.
autorotateThickness: The thickness of the autorotate icon, unit pixels, the default value is 1.
zoomRangeWidth: The range of zoom, unit display, default value of 50.
zoomRangeThickness: The thickness of the scaled range, unit pixels, default value 1.
zoomRangeDisk: The disk diameter of the zoom range, unit pixels, the default value is 7.
fullscreenRatio: The ratio of full screen icon, the default value is 3/4.
fullscreenThickness: The thickness of the full screen icon, unit pixels, the default value is 2.
loading_msg: optional, the default value is Loading…, prompt text when the image is loaded.
loading_img: optional, the default value is null, the path of the picture displayed when loading.
size: optional, default value null, final size of the panoramic container. For example: {width: 500, height: 300}.
onready: Optional value, the default value is null. Callback function when the panorama is ready and the first image is displayed.
3. The above demo code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>360Panoramic view</title>
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!-- EnablewebAPPFull screen mode-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Hide the status bar or set the color of the status bar-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Disable cache access to pages-->
<meta http-equiv="Pragma" content="no-cache">
<meta name="applicable-device" content="mobile">
<!-- Page keywords-->
<link rel="stylesheet" href="css/">
<script src="js/"></script>
<script src="js/"></script>
<!---->
<script src="js/"></script>
<!--[if IE]>
<script src="/js/html5shiv/3.7/"></script>
<![endif]-->
</head>
<body>
<div class="main">
<h3 >Rotate to view the effect</h3>
<div ></div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
text-decoration: none;
border: 0;
outline: 0;
}
.main{
max-width: 640px;
width: 100%;
margin: 0 auto;
}
.main h3{
text-align: center;
padding: 10px 0;
}
/**
* Created by Administrator on 2016/11/29.
*/
//You must be on the server to see the effect!=function(){
getTitleHeight();
loadingAllImg();
}
//Let the panoramic view just fill the screenvar canvasHeight;
function getTitleHeight(){
var title=('title');
var titleHeight=parseFloat(getComputedStyle(title).height);
var maxHeight=;
canvasHeight=parseFloat(maxHeight-titleHeight)+'px';
}
//Panorama parameter configuration functionfunction loadingAllImg(){
var div = ('container');
var PSV = new PhotoSphereViewer({
// Complete path to the panoramic viewpanorama: 'images/',
// Elements that put panoramic imagescontainer: div,
// Optional, the default value is 2000, and the panorama will be automatically animated after time_anim milliseconds. (Set to false to disable it)time_anim: false,
// Optional value, default to false. Show navigation bar.navbar: true,
// Optional, default value null, final size of the panoramic container. For example: {width: 500, height: 300}.size: {
width: '100%',
height: canvasHeight
}
});
}
At the same time, on github, you can also find it by searching (Photo Sphere Viewer)! The plugin is not very complete yet.
The above is the 360-degree panoramic picture introduced by the editor to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!