diff --git a/docs/README.md b/docs/README.md index 8f58a2f64..4064e96a7 100644 --- a/docs/README.md +++ b/docs/README.md @@ -20,7 +20,7 @@ features: footer: Licensed under MIT License, documentation under CC BY 3.0 --- - + ::: tip Thanks to Jéremy Heleine I forked the original Photo Sphere Viewer [by Jérémy Heleine](http://jeremyheleine.me) to provide a better code architecture and a bunch of new features. diff --git a/docs/guide/cubemap.md b/docs/guide/cubemap.md index cb57f85cb..6d0b9a890 100644 --- a/docs/guide/cubemap.md +++ b/docs/guide/cubemap.md @@ -6,4 +6,4 @@ Photo Sphere Viewer supports cubemaps as six distinct image files. The files can All features of Photo Sphere Viewer are fully supported when using cubemaps but the `fisheye` option gives funky results. - + diff --git a/docs/plugins/README.md b/docs/plugins/README.md index a0d185f86..42ab739b9 100644 --- a/docs/plugins/README.md +++ b/docs/plugins/README.md @@ -2,6 +2,36 @@ Plugins are used to add new functionalities to Photo Sphere Viewer. They can access all internal APIs of the viewer as well as the THREE.js renderer to make the viewer even more awesome. +## Import official plugins + +Official plugins (listed on the left menu) are available in the the main `photo-sphere-viewer` package inside the `dist/plugins` directory. Some plugins also have an additional CSS file. + +**Example for the Markers plugins:** + +:::: tabs + +::: tab Direct import +```html + + + + + +``` +::: + +::: tab ES import +Import `photo-sphere-viewer/dist/plugins/markers.css` with the prefered way depending on your tooling. + +```js +import MarkersPlugins from 'photo-sphere-viewer/dist/plugins/markers'; +``` +::: + +:::: + + + ## Using a plugin All plugins consists of a JavaScript class which must be provided to the `plugins` array. Some plugins will also take configuration object provided in a nested array. diff --git a/docs/plugins/plugin-autorotate-keypoints.md b/docs/plugins/plugin-autorotate-keypoints.md index 7b4ef88d2..d6dc2bebb 100644 --- a/docs/plugins/plugin-autorotate-keypoints.md +++ b/docs/plugins/plugin-autorotate-keypoints.md @@ -49,7 +49,7 @@ The plugin reacts to the standard `autorotateDelay` and `autorotateSpeed` option The following demo randomly generates some markers and automatically pan between them. - + ## Configuration diff --git a/docs/plugins/plugin-markers.md b/docs/plugins/plugin-markers.md index 8c1003da2..b515a6a6f 100644 --- a/docs/plugins/plugin-markers.md +++ b/docs/plugins/plugin-markers.md @@ -52,7 +52,7 @@ markersPlugin.on('select-marker', (e, marker) => { The following example contains all types of markers. Click anywhere on the panorama to add a red marker, right-click to change it's color and double-click to remove it. - + ## Markers options diff --git a/docs/plugins/plugin-resolution.md b/docs/plugins/plugin-resolution.md index c9b6e8d1a..f6d785faa 100644 --- a/docs/plugins/plugin-resolution.md +++ b/docs/plugins/plugin-resolution.md @@ -41,7 +41,7 @@ const viewer = new PhotoSphereViewer.Viewer({ The following example provides two resolutions for the panorama, "small" is loaded by default. - + ## Configuration diff --git a/docs/plugins/plugin-settings.md b/docs/plugins/plugin-settings.md index 5f5d26a7f..53acc4961 100644 --- a/docs/plugins/plugin-settings.md +++ b/docs/plugins/plugin-settings.md @@ -26,7 +26,7 @@ const viewer = new PhotoSphereViewer.Viewer({ The following example manually adds two settings. - + ## Adding a setting diff --git a/docs/plugins/plugin-visible-range.md b/docs/plugins/plugin-visible-range.md index 8a4fda0c3..f6c78395b 100644 --- a/docs/plugins/plugin-visible-range.md +++ b/docs/plugins/plugin-visible-range.md @@ -34,7 +34,7 @@ visibleRangePlugin.setLatitudeRange(null); In this example only the front portion of the sphere is visible. - + ## Configuration