360° Side-by-Side Viewer - Iframe Documentation

Learn how to embed the 360° panorama viewer in your website using iframes with external image URLs.

Back to UASview.org

Gallery Viewer Demo

This iframe shows the gallery viewer with multiple panorama pairs using external GitHub images:

Show iframe code
<iframe src="/software/360-side-by-side-gallery?images=%5B%7B%22id%22%3A%22snow-mountains%22%2C%22original%22%3A%22https%3A%2F%2Fraw.githubusercontent.com%2FFelipegalind0%2FAI-InPainted-360-Images%2Frefs%2Fheads%2Fmain%2Fdji_fly_20250331_150822_16_1743644668050_pano.jpg%22%2C%22processed%22%3A%22https%3A%2F%2Fraw.githubusercontent.com%2FFelipegalind0%2FAI-InPainted-360-Images%2Frefs%2Fheads%2Fmain%2Fdji_fly_20250331_150822_16_1743644668050_pano_processed_logod.jpg%22%2C%22title%22%3A%22Mountain%20Lake%20View%22%7D%2C%7B%22id%22%3A%22river-bridge%22%2C%22original%22%3A%22https%3A%2F%2Fraw.githubusercontent.com%2FFelipegalind0%2FAI-InPainted-360-Images%2Frefs%2Fheads%2Fmain%2Fdji_fly_20250404_164558_118_1743819398340_pano.jpg%22%2C%22processed%22%3A%22https%3A%2F%2Fraw.githubusercontent.com%2FFelipegalind0%2FAI-InPainted-360-Images%2Frefs%2Fheads%2Fmain%2Fdji_fly_20250404_164558_118_1743819398340_pano_processed_logod.jpg%22%2C%22title%22%3A%22River%20Bridge%20Canyon%22%7D%2C%7B%22id%22%3A%22red-rocks%22%2C%22original%22%3A%22https%3A%2F%2Fraw.githubusercontent.com%2FFelipegalind0%2FAI-InPainted-360-Images%2Frefs%2Fheads%2Fmain%2Fdji_fly_20250404_155934_102_1743819342225_pano.jpg%22%2C%22processed%22%3A%22https%3A%2F%2Fraw.githubusercontent.com%2FFelipegalind0%2FAI-InPainted-360-Images%2Frefs%2Fheads%2Fmain%2Fdji_fly_20250404_155934_102_1743819342225_pano_processed_logod.jpg%22%2C%22title%22%3A%22Red%20Rock%20Resort%22%7D%5D" width="100%" height="600" frameborder="0" allowfullscreen></iframe>

API Documentation

Single Image Viewer

/software/360-side-by-side-viewer

Parameters:

  • img1 - First/main image URL (required)
  • img2 - Second image URL (optional)
  • compare - Set to "true" for side-by-side comparison
  • leftLabel - Custom label for left side
  • rightLabel - Custom label for right side

Example:

?img1=https://example.com/original.jpg&img2=https://example.com/processed.jpg&compare=true&leftLabel=Before&rightLabel=After

Gallery Viewer

/software/360-side-by-side-gallery

Parameters:

  • images - JSON array of image objects (required)

Image Object Properties:

  • id - Unique identifier
  • original - Original image URL
  • processed - Processed image URL
  • title - Display title
  • leftLabel - Custom left label
  • rightLabel - Custom right label

Individual Viewer Examples

Single Image (no comparison):

Show code<iframe src="/software/360-side-by-side-viewer?img1=https://raw.githubusercontent.com/Felipegalind0/AI-InPainted-360-Images/refs/heads/main/dji_fly_20250331_150822_16_1743644668050_pano.jpg" width="100%" height="300" frameborder="0" allowfullscreen></iframe>

Side-by-side comparison:

Show code<iframe src="/software/360-side-by-side-viewer?img1=https://raw.githubusercontent.com/Felipegalind0/AI-InPainted-360-Images/refs/heads/main/dji_fly_20250331_150822_16_1743644668050_pano.jpg&img2=https://raw.githubusercontent.com/Felipegalind0/AI-InPainted-360-Images/refs/heads/main/dji_fly_20250331_150822_16_1743644668050_pano_processed_logod.jpg&compare=true" width="100%" height="300" frameborder="0" allowfullscreen></iframe>

Features

  • Drag divider to compare images
  • Mouse wheel or pinch to zoom
  • Click and drag to pan around
  • Fullscreen support
  • Mobile touch support
  • Custom labels and titles
  • External image URL support
  • Gallery navigation