這個外掛並未在最新的 3 個 WordPress 主要版本上進行測試。開發者可能不再對這個外掛進行維護或提供技術支援,並可能會與更新版本的 WordPress 產生使用上的相容性問題。

360 Photo Spheres

外掛說明

This plugin was created by 360Production.Services to display 360 photos in a simple but interesting way. The plugin is designed to be simple to load and use and allows multiple spheres containing 360 equirectangular photographs to be displayed on each page.

Thank you to CssAnimation.Rocks for this sphere CSS tutorial!

ToDo

  • click and drag to change image direction.
  • shadow around image to create more of a globe effect.
  • shadow below image to create a floating effect.

安裝方式

  1. Upload the plugin files to the /wp-content/plugins/360-sphere-images directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the ‘Plugins’ screen in WordPress

Upload an equirectangular 360 image to your Media Library and copy the URL for the uploaded image.

Insert a simple sphere into a post or page using the following shortcode:

[sphere size="300" url="Your 360 Image URL"]

Typically you want the height of your 360 image to be the same size as your sphere for faster image loading.
If you are using a 300px sphere you will want your equirectangular image to be 600px x 300px for optimal loading.
360 images should be in a 2:1 ratio and stitch smoothly on both sides for best results.
Using an image that fits your sphere size will ensure faster page loading time.

Further customization comes with Speed, Direction, Hover, and Title Options:

[sphere size="300" url="Your 360 Image URL" speed="30" direction="right" hover="pause" Title="360 Photo Spheres"]

To link to another page:

[sphere size="300" url="Your 360 Image URL" link="target link"]

To use PopUp: The ‘popup’ parameter works with the ‘link’ parameter when the pop-up has a value, the external link no longer functions
All link parameters are designed to make embedding popups for those platforms easier. Copy the src value from <iframe src=’…. when embedding your content from these platforms.
Use the iframe SRC along with the popup value for the target. For vr be sure to link to the highest quality image available.
The ’embed’ option allows for any standard formatted HTML or iframe tags to be embedded in the popup window.

vr option requires that Jetpack be enabled and the VR plugin for Jetpack enabled in settings.

VR: Set link=”High Quality 360 Image URL” and add: popup=”vr” to your shortcode.
IFRAME: Set link=”any website SRC” and add: popup=”iframe” to your shortcode.
YOUTUBE: Set link=”YouTube embed SRC” and add: popup=”youtube” to your shortcode.
MAPS: Set link=”Google Maps embed SRC” and add: popup=”maps” to your shortcode.
VEER: Set link=”Veer embed SRC” and add: popup=”veer” to your shortcode.
ROUNDME: Set link=”RoundMe embed SRC” and add: popup=”roundme” to your shortcode.
EMBED: set link=”Any HTML formatted content or code” and add: popup=”embed” to your shortcode.

PopUp VR Image Example:

[sphere size="300" url="Your 360 Image URL" link="High Quality 360 Image URL" popup="vr"]

PopUp YouTube Video Example:

[sphere size="300" url="Your 360 Image URL" link="YouTube Embed SRC" popup="youtube"]

PopUp Veer Video or Photo Example:

[sphere size="300" url="Your 360 Image URL" link="Veer Embed SRC" popup="veer"]

ALL OPTIONS:

  • Size= the dimensions of the sphere in pixels
    DEFAULT= 300 | OPTIONS= 1 to ???
  • URL= the URL of the 360 image
    DEFAULT= 360sample.jpg | OPTIONS= any equirectangular 360 image
  • Speed= the amount of time for the image to rotate a complete 360 in seconds
    DEFAULT= 30 | OPTIONS= 1 to ???
  • Direction= direction of the movement for the image (OPTIONAL)
    DEFAULT= right | OPTIONS= left, right
  • Hover= pause image rotation on hover (OPTIONAL)
    DEFAULT= none | OPTIONS= none, pause
  • Title= the title of the popup (OPTIONAL)
    DEFAULT= none | OPTIONS= text string
  • Link= URL for image to link to (OPTIONAL)
    DEFAULT= none | OPTIONS= any hyperlink url, iframe URL, ect (see PopUp)
  • PopUp= the type of Link to embed (OPTIONAL)
    DEFAULT= not used | OPTIONS= vr, iframe, youtube, maps, veer, roundme, embed,

常見問題集

How can I help?

Feel free to donate to this plugin development.

使用者評論

閱讀全部 2 則使用者評論

參與者及開發者

以下人員參與了開源軟體〈360 Photo Spheres〉的開發相關工作。

參與者

〈360 Photo Spheres〉外掛目前已有 1 個本地化語言版本。 感謝全部譯者為這個外掛做出的貢獻。

將〈360 Photo Spheres〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

1.0

5/2/2018 Updated compatibility for multiple spheres to be posted on a single page. Fixed Bug with container div.

1.1

5/10/2018 – Add support for Link, Direction, Hover