Download AIXF Media 360 2.0.1 Beta

XF 兼容性

2.3.x

摘要: 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):

/js/aixf/media360/pannellum.min.js
/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 <img>, 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：

<div id="aixfPanoMount" class="js-aixf360"
data-enabled="1"
data-cdn="1" <!-- 1 = CDN (default), 0 = local -->
data-fov="75" <!-- initial zoom (HFOV) -->
data-autorotate="1.2" <!-- deg/sec; 0 = off -->
data-fullscreen="1" <!-- show fullscreen button -->
data-ratio-tolerance="0.05" <!-- 2:1 detection tolerance -->
style="width:100%;height:60vh"></div>

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:

/styles/aixf/media360/pannellum.css

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

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

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 <img> to finish loading; lazy-loading is fine. If your theme swaps the image node late, a short flicker can happen.

## Roadmap (feedback-driven)