I utilized some CSS code I learned from this tutorial and integrated it into an easy WordPress plugin shortcode!Are you interested in utilizing 360 images and my plugin on your page or site? Contact me for more information!
5/2/2018 – Updated compatibility for multiple spheres to be posted on a single page. Fixed Bug with container div.
- Upload the plugin files to the
/wp-content/plugins/360-sphere-imagesdirectory, or install the plugin through the WordPress plugins screen directly.
- 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 sphere into a post or page use the following shortcode:
[sphere size="300" url="COPY AND PASTE URL HERE" link="" speed="30" direction="right" hover="none"]
- 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
- Link= URL for image to link to
DEFAULT= none OPTIONS= any hyperlink url
- 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
DEFAULT= right OPTIONS= left, right
- Hover= pause image rotation on hover
DEFAULT= none OPTIONS= none, pause
Notes: 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.
Like the plugin?
Advanced features coming in version 1.2:
- Popup Window with WordPress VR Shortcode enabled. (Requires VR Plugin to be enabled in Jetpack)
- Popup Window with Virtual Tour, YouTube Video, Veer Media, or other linked content.
- Customization of: Title Tag, Border, Colors,
- Pro Version with 360 galleries and enhancements.