NULLED XF2 ADD-ON AIXF Media360 2.0.1 beta

https://xenforo.com/community/resources/aixf-media360.10091/

Click to expand...

Be sure to do backups!

NOTE: I don't own anything Apple, so I have not tested it on anything Apple. Part of the reason it is beta. This doesn't work in lightbox. You have to view them without it.

# AIXF Media360 — 360° Panoramas for XenForo Media Gallery

AIXF Media360 makes 360° (equirectangular) images feel native in XenForo Media Gallery.
It detects panoramic images and replaces the static photo with an interactive, draggable 360° viewer (powered by Pannellum) — right inside the standard media view.

• Drop-in; no core file edits
• Zoom & fullscreen controls
• Gentle auto-rotate (optional)
• Works with plain JPG equirectangular (2:1 aspect), e.g. 4096×2048 or 8192×4096
• CDN or local assets (your choice)

---

## Install

1. Upload the release ZIP via Admin CP → Add-ons → Install/upgrade from archive.
2. After install, visit Media Gallery → any image that’s an equirectangular pano (2:1).
You should see drag-to-look, plus zoom and fullscreen controls.

### Using CDN (default)
The add-on loads Pannellum from a public CDN. No extra files or steps.

### Using local files (optional)
If your CSP blocks CDNs:

- Place local Pannellum files in the add-on (these are included if you used the “local” build):
Code:
/js/aixf/media360/pannellum.min.js<br>/styles/aixf/media360/pannellum.css
- In ACP → Options → AIXF Media360 (if you exposed an option), set Use CDN = Off.
If you didn’t add an ACP option, set data-cdn="0" in the mount (see “How it works”).

---

## How it works (short version)

• On the media view page (public:xfmg_media_view), the add-on injects a small mount div and a boot script.
• The script waits for the original &lt;img&gt;, checks if it’s ~2:1, hides it, and mounts Pannellum with the same image URL.
• You can control behavior via data-* flags on the mount.

Example mount (already injected by the add-on; shown here for reference):
HTML:
<span><span><span>&lt;</span>div</span> <span>id</span><span><span>=</span><span>"</span>aixfPanoMount<span>"</span></span> <span>class</span><span><span>=</span><span>"</span>js-aixf360<span>"</span></span><br><span>data-enabled</span><span><span>=</span><span>"</span>1<span>"</span></span><br><span>data-cdn</span><span><span>=</span><span>"</span>1<span>"</span></span> <span>&lt;!--</span> <span>1</span> <span><span>=</span> CDN</span> <span>(default),</span> <span>0</span> <span><span>=</span> local</span> <span>--</span><span>&gt;</span></span><br>data-fov="75" <span>&lt;!-- initial zoom (HFOV) --&gt;</span><br>data-autorotate="1.2" <span>&lt;!-- deg/sec; 0 = off --&gt;</span><br>data-fullscreen="1" <span>&lt;!-- show fullscreen button --&gt;</span><br>data-ratio-tolerance="0.05" <span>&lt;!-- 2:1 detection tolerance --&gt;</span><br>style="width:100%;height:60vh"&gt;<span><span><span>&lt;/</span>div</span><span>&gt;</span></span>

---

## Recommended image sizes

• 4096×2048 (4K) — best compatibility across devices
• 8192×4096 (8K) — sharper on desktop; larger files

Filetype: JPG (standard equirectangular).
EXR/HDR are not required for this viewer (you can use tonemapped JPGs).

---

## Troubleshooting

I only see a still image.
Most likely the image isn’t ~2:1. Check dimensions (e.g., 4096×2048). You can widen data-ratio-tolerance (e.g. 0.08) if your source is slightly off 2:1.

I can drag, but no buttons.
The Pannellum CSS isn’t loaded. If you’re on CDN, ensure it isn’t blocked. For local mode, confirm this URL works in your browser:
Code:
/styles/aixf/media360/pannellum.css

Console shows 404 for init.js or pannellum.js.

• Using &lt;xf:js src="aixf/media360/init.js" /&gt; is correct (don’t prefix with js/).
• If you built your own ZIP, ensure your release includes:

Code:
upload/js/aixf/media360/init.js

CDN blocked by CSP.
Switch to local mode (see above), or loosen CSP for the CDN domain.

Lazy-load warnings.
The script waits for the actual &lt;img&gt; to finish loading; lazy-loading is fine. If your theme swaps the image node late, a short flicker can happen.

---

## Roadmap (feedback-driven)

• GPano/XMP EXIF detection (beyond 2:1 ratio)
• Mobile gyroscope (orientationOnByDefault)
• “Share this view” deep links (yaw/pitch/hfov in URL)
• Hotspots (titles/links)
• Optional XenAddons Showcase support