How to add 360 Sphere Images in Wordpress

This plugin was created by 360Production.Services to display 360 photos in a simple but interesting way.

Noted That:

To install correctly this 360-sphere-images.zip.
Fisrt Download the 360-sphere-images.zip to your computer
Extract/Open 360-sphere-images.zip to Your Computer.
Then, Find readme.txt file inside 360-sphere-images.zip and Open readme.txt.
Now, Read the Requirements of this plugin. Which Wordpress Version and PHP Version are required to run this Plugin in Your Wordpress Site.
Then, Follow the the Tips Below.

Start the Tips:

1. First Download "360-sphere-images.zip" Plugin to your Local Computer. (Click Download)

2. Then, Login to your "yourdomain.com/wp-admin" Dashboard.

3. Then, Click on "Plugins" + "Add New" from left sidemenu of Dashboard.

4. Now, Click on "Upload Plugin" button.

5. Now, Browse "360-sphere-images.zip" Downloaded plugin from your computer, Where you downloaded 360-sphere-images.zip According to Step – 1 Above then, click on "Install Now"

6. Now, Click on "Active Plugin"

7. Then, See left sidemenu. "360 Photo Spheres" folder is added on left sidemenu. Now, Click on "360 Photo Spheres" folder.

Noted that: If you do not see "360 Photo Spheres" folder on left sidemenu then, see at left sidemenu "Settings" or "Tools".

8. Now you configure yourself oR Watch video tutorial below about 360 Photo Spheres Configurtions and Settings or How to work "360 Photo Spheres" in your WordPress site.

After Activated Plugin According to Step-6 then,

Go to "Plugins" + "Installed Plugin" from Wordpress Admin Panel Leftside Menu.
or Direct go to: https://yourdomain/wp-admin/plugins.php
Then, Find "360 Photo Spheres" Activated Plugin from Plugin List.
Then, Click on "Settings" from Plugin that is 360 Photo Spheres
Now, Edit/Add/Config the setting and Click on "Save Changes" button,

Guide

Guide
Upload the plugin files to the `/wp-content/plugins/360-sphere-images` directory, 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 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 Use the iframe SRC along with the popup value for the target. For vr be sure to link to the highest quality image available.<br />The ’embed’ option allows for any standard formatted HTML or iframe tags to be embedded in the popup window.</p><p>vr option requires that Jetpack be enabled and the VR plugin for Jetpack enabled in settings.</p><p>VR: Set link=”High Quality 360 Image URL” and add: popup=”vr” to your shortcode.<br /> IFRAME: Set link=”any website SRC” and add: popup=”iframe” to your shortcode.<br /> YOUTUBE: Set link=”YouTube embed SRC” and add: popup=”youtube” to your shortcode.<br /> MAPS: Set link=”Google Maps embed SRC” and add: popup=”maps” to your shortcode.<br /> VEER: Set link=”Veer embed SRC” and add: popup=”veer” to your shortcode.<br /> ROUNDME: Set link=”RoundMe embed SRC” and add: popup=”roundme” to your shortcode.<br /> EMBED: set link=”Any HTML formatted content or code” and add: popup=”embed” to your shortcode.</p><p>PopUp VR Image Example:</p><pre><code>[sphere size="300" url="Your 360 Image URL" link="High Quality 360 Image URL" popup="vr"]</code></pre><p>PopUp YouTube Video Example:</p><pre><code>[sphere size="300" url="Your 360 Image URL" link="YouTube Embed SRC" popup="youtube"]</code></pre><p>PopUp Veer Video or Photo Example:</p><pre><code>[sphere size="300" url="Your 360 Image URL" link="Veer Embed SRC" popup="veer"]</code></pre><p>ALL OPTIONS:</p><ul><li>Size= the dimensions of the sphere in pixels<br />DEFAULT= 300 \| OPTIONS= 1 to ???</li><li>URL= the URL of the 360 image<br />DEFAULT= 360sample.jpg \| OPTIONS= any equirectangular 360 image</li><li>Speed= the amount of time for the image to rotate a complete 360 in seconds<br />DEFAULT= 30 \| OPTIONS= 1 to ???</li><li>Direction= direction of the movement for the image (OPTIONAL)<br />DEFAULT= right \| OPTIONS= left, right</li><li>Hover= pause image rotation on hover (OPTIONAL)<br />DEFAULT= none \| OPTIONS= none, pause</li><li>Title= the title of the popup (OPTIONAL)<br />DEFAULT= none \| OPTIONS= text string</li><li>Link= URL for image to link to (OPTIONAL)<br />DEFAULT= none \| OPTIONS= any hyperlink url, iframe URL, ect (see PopUp)</li><li>PopUp= the type of Link to embed (OPTIONAL)<br />DEFAULT= not used \| OPTIONS= vr, iframe, youtube, maps, veer, roundme, embed,</li></ul> </td> </tr></table> </br><TABLE class="w3-table w3-striped w3-bordered w3-border w3-white"><td><i class="fa fa-tag" style="color:green"></i> <a href="https://wordpress.horje.com/archive/simple">simple</a>, <a href="https://wordpress.horje.com/archive/interesting">interesting</a>, <a href="https://wordpress.horje.com/archive/photos">photos</a>, <a href="https://wordpress.horje.com/archive/display">display</a>, <a href="https://wordpress.horje.com/archive/created">created</a>, <a href="https://wordpress.horje.com/archive/360productionservices">360productionservices</a>, <a href="https://wordpress.horje.com/archive/plugin">plugin</a>,</td></table></br><TABLE class="w3-table w3-striped w3-bordered w3-border w3-white"><TBODY> <tr><th>Name</th></tr><tr><td><div class="list"><img src="" onerror="this.onerror=null;this.src='/wp.png';" height="50" width="50" border="0" />   <span class="action_links"><a style="text-decoration:none" class="act" href="https://wordpress.horje.com/tutorial/latest-news-plugin"><font style="color:green;">How to add Latest News Plugin in Wordpress<font></a></td> </tr><tr><td><div class="list"><img src="" onerror="this.onerror=null;this.src='/wp.png';" height="50" width="50" border="0" />   <span class="action_links"><a style="text-decoration:none" class="act" href="https://wordpress.horje.com/tutorial/get-post-content-shortcode"><font style="color:green;">How to add Get Post Content Shortcode in Wordpress<font></a></td> </tr><tr><td><div class="list"><img src="" onerror="this.onerror=null;this.src='/wp.png';" height="50" width="50" border="0" />   <span class="action_links"><a style="text-decoration:none" class="act" href="https://wordpress.horje.com/tutorial/unsafe-mimetypes"><font style="color:green;">How to add Unsafe Mimetypes in Wordpress<font></a></td> </tr><tr><td><div class="list"><img src="https://wordpress.horje.com/image/dobsondev-shortcodes/assets/icon-256x256.png?rev=1029764" onerror="this.onerror=null;this.src='/wp.png';" height="50" width="50" border="0" />   <span class="action_links"><a style="text-decoration:none" class="act" href="https://wordpress.horje.com/tutorial/dobsondev-shortcodes"><font style="color:green;">How to add Dobsondev Shortcodes in Wordpress<font></a></td> </tr><tr><td><div class="list"><img src="" onerror="this.onerror=null;this.src='/wp.png';" height="50" width="50" border="0" />   <span class="action_links"><a style="text-decoration:none" class="act" href="https://wordpress.horje.com/tutorial/pssubpages"><font style="color:green;">How to add Pssubpages in Wordpress<font></a></td> </tr></table></br><div class="w3-panel w3-border-left w3-pale-red w3-border-red"><pre class="easypost; title:;lang:;">Reffered: https://wordpress.org/</pre></div></br><center><h1>Share on:</h1><b><div class="sharethis-inline-share-buttons"></div></center><div class="footer"><footer class="w3-container w3-padding-16 w3-light-grey"><P> </P><p>Horje ® 2025</p></footer></div><script>// Get the Sidebar var mySidebar = document.getElementById("mySidebar"); // Get the DIV with overlay effect var overlayBg = document.getElementById("myOverlay"); // Toggle between showing and hiding the sidebar, and add overlay effect function w3_open() { if (mySidebar.style.display === 'block') { mySidebar.style.display = 'none'; overlayBg.style.display = "none"; } else { mySidebar.style.display = 'block'; overlayBg.style.display = "block"; } } // Close the sidebar with the close button function w3_close() { mySidebar.style.display = "none"; overlayBg.style.display = "none"; }</script></body></html>

Upload the plugin files to the /wp-content/plugins/360-sphere-images directory, 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 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 Use the iframe SRC along with the popup value for the target. For vr be sure to link to the highest quality image available.<br />The ’embed’ option allows for any standard formatted HTML or iframe tags to be embedded in the popup window.</p><p>vr option requires that Jetpack be enabled and the VR plugin for Jetpack enabled in settings.</p><p>VR: Set link=”High Quality 360 Image URL” and add: popup=”vr” to your shortcode.<br /> IFRAME: Set link=”any website SRC” and add: popup=”iframe” to your shortcode.<br /> YOUTUBE: Set link=”YouTube embed SRC” and add: popup=”youtube” to your shortcode.<br /> MAPS: Set link=”Google Maps embed SRC” and add: popup=”maps” to your shortcode.<br /> VEER: Set link=”Veer embed SRC” and add: popup=”veer” to your shortcode.<br /> ROUNDME: Set link=”RoundMe embed SRC” and add: popup=”roundme” to your shortcode.<br /> EMBED: set link=”Any HTML formatted content or code” and add: popup=”embed” to your shortcode.</p><p>PopUp VR Image Example:</p><pre><code>[sphere size="300" url="Your 360 Image URL" link="High Quality 360 Image URL" popup="vr"]</code></pre><p>PopUp YouTube Video Example:</p><pre><code>[sphere size="300" url="Your 360 Image URL" link="YouTube Embed SRC" popup="youtube"]</code></pre><p>PopUp Veer Video or Photo Example:</p><pre><code>[sphere size="300" url="Your 360 Image URL" link="Veer Embed SRC" popup="veer"]</code></pre><p>ALL OPTIONS:</p><ul><li>Size= the dimensions of the sphere in pixels<br />DEFAULT= 300 | OPTIONS= 1 to ???</li><li>URL= the URL of the 360 image<br />DEFAULT= 360sample.jpg | OPTIONS= any equirectangular 360 image</li><li>Speed= the amount of time for the image to rotate a complete 360 in seconds<br />DEFAULT= 30 | OPTIONS= 1 to ???</li><li>Direction= direction of the movement for the image (OPTIONAL)<br />DEFAULT= right | OPTIONS= left, right</li><li>Hover= pause image rotation on hover (OPTIONAL)<br />DEFAULT= none | OPTIONS= none, pause</li><li>Title= the title of the popup (OPTIONAL)<br />DEFAULT= none | OPTIONS= text string</li><li>Link= URL for image to link to (OPTIONAL)<br />DEFAULT= none | OPTIONS= any hyperlink url, iframe URL, ect (see PopUp)</li><li>PopUp= the type of Link to embed (OPTIONAL)<br />DEFAULT= not used | OPTIONS= vr, iframe, youtube, maps, veer, roundme, embed,</li></ul> </td> </tr></table> </br><TABLE class="w3-table w3-striped w3-bordered w3-border w3-white"><td><i class="fa fa-tag" style="color:green"></i> <a href="https://wordpress.horje.com/archive/simple">simple</a>, <a href="https://wordpress.horje.com/archive/interesting">interesting</a>, <a href="https://wordpress.horje.com/archive/photos">photos</a>, <a href="https://wordpress.horje.com/archive/display">display</a>, <a href="https://wordpress.horje.com/archive/created">created</a>, <a href="https://wordpress.horje.com/archive/360productionservices">360productionservices</a>, <a href="https://wordpress.horje.com/archive/plugin">plugin</a>,</td></table></br><TABLE class="w3-table w3-striped w3-bordered w3-border w3-white"><TBODY> <tr><th>Name</th></tr><tr><td><div class="list"><img src="" onerror="this.onerror=null;this.src='/wp.png';" height="50" width="50" border="0" />   <span class="action_links"><a style="text-decoration:none" class="act" href="https://wordpress.horje.com/tutorial/latest-news-plugin"><font style="color:green;">How to add Latest News Plugin in Wordpress<font></a></td> </tr><tr><td><div class="list"><img src="" onerror="this.onerror=null;this.src='/wp.png';" height="50" width="50" border="0" />   <span class="action_links"><a style="text-decoration:none" class="act" href="https://wordpress.horje.com/tutorial/get-post-content-shortcode"><font style="color:green;">How to add Get Post Content Shortcode in Wordpress<font></a></td> </tr><tr><td><div class="list"><img src="" onerror="this.onerror=null;this.src='/wp.png';" height="50" width="50" border="0" />   <span class="action_links"><a style="text-decoration:none" class="act" href="https://wordpress.horje.com/tutorial/unsafe-mimetypes"><font style="color:green;">How to add Unsafe Mimetypes in Wordpress<font></a></td> </tr><tr><td><div class="list"><img src="https://wordpress.horje.com/image/dobsondev-shortcodes/assets/icon-256x256.png?rev=1029764" onerror="this.onerror=null;this.src='/wp.png';" height="50" width="50" border="0" />   <span class="action_links"><a style="text-decoration:none" class="act" href="https://wordpress.horje.com/tutorial/dobsondev-shortcodes"><font style="color:green;">How to add Dobsondev Shortcodes in Wordpress<font></a></td> </tr><tr><td><div class="list"><img src="" onerror="this.onerror=null;this.src='/wp.png';" height="50" width="50" border="0" />   <span class="action_links"><a style="text-decoration:none" class="act" href="https://wordpress.horje.com/tutorial/pssubpages"><font style="color:green;">How to add Pssubpages in Wordpress<font></a></td> </tr></table></br><div class="w3-panel w3-border-left w3-pale-red w3-border-red"><pre class="easypost; title:;lang:;">Reffered: https://wordpress.org/</pre></div></br><center><h1>Share on:</h1><b><div class="sharethis-inline-share-buttons"></div></center><div class="footer"><footer class="w3-container w3-padding-16 w3-light-grey"><P> </P><p>Horje ® 2025</p></footer></div><script>// Get the Sidebar var mySidebar = document.getElementById("mySidebar"); // Get the DIV with overlay effect var overlayBg = document.getElementById("myOverlay"); // Toggle between showing and hiding the sidebar, and add overlay effect function w3_open() { if (mySidebar.style.display === 'block') { mySidebar.style.display = 'none'; overlayBg.style.display = "none"; } else { mySidebar.style.display = 'block'; overlayBg.style.display = "block"; } } // Close the sidebar with the close button function w3_close() { mySidebar.style.display = "none"; overlayBg.style.display = "none"; }</script></body></html>