Embed interactive 360° panoramas in WordPress Gutenberg using Marzipano for virtual tours or exhibitions.

Cyb10101

<p>A plugin for the WordPress Gutenberg block editor.</p>
<p>Easily embed interactive 360° panorama images converted into multi-resolution tiles using <a href="https://www.marzipano.net/" rel="nofollow ugc">Marzipano</a>.</p>
<p>Perfect for virtual tours, exhibitions or immersive media content.</p>
<h3>Links</h3>
<ul>
<li><a href="https://wordpress.org/plugins/cyb-marzipano-viewer" rel="ugc">Plugin on WordPress</a></li>
<li><a href="https://github.com/Cyb10101/wordpress_cyb-marzipano-viewer" rel="nofollow ugc">Source Code</a></li>
</ul>
<h3>Note</h3>
<p>The goal of the project was to implement a panorama in a relatively simple way.<br />
The basic configuration is done via JSON. Everything else is features.<br />
So there is more magic here than planned.</p>
<p>Marzipano is displayed in the backend, but is almost impossible to use there.</p>
<h3>Usage</h3>
<ol>
<li>Generate panorama with the <a href="https://www.marzipano.net/tool/" rel="nofollow ugc">Marzipano Tool</a></li>
<li>Download the archive and extract the files</li>
<li>Copy <code>app-files/tiles/*</code> to <code>/panorama/marzipano/project/</code> (for example)</li>
<li>Copy <code>app-files/data.js</code> to <code>/panorama/marzipano/project/</code></li>
<li>Rename <code>data.js</code> to <code>config.json</code>, then edit it:
<ol>
<li>Remove at begin <code>var APP_DATA =</code></li>
<li>Remove at end <code>;</code></li>
</ol>
</li>
<li>Add the <strong>Marzipano Viewer</strong> WordPress block in the Gutenberg editor</li>
<li>Embed <code>/panorama/marzipano/project/config.json</code></li>
</ol>
<h3>Credits</h3>
<p>This plugin uses <a href="https://www.marzipano.net" rel="nofollow ugc">Marzipano (Apache License 2.0)</a> for displaying panoramic images.</p>
<p>Portions of the configuration logic and structure were adapted from Marzipano’s example viewer<br />
(index.html, index.js, style.css), modified to integrate with WordPress Gutenberg blocks.</p>
<p>Includes files Marzipano project (Apache 2.0 License):</p>
<ul>
<li>vendor/images/*.png</li>
<li>vendor/DeviceOrientationControlMethod.js</li>
<li>vendor/marzipano.js</li>
</ul>
<p>All third-party components retain their original licenses.</p>


Alternatives to Cyb Marzipano Viewer

Top alternatives