360° Panorama Demo

Jaevyn Atom Hoyt ·

Portfolio Demo Panorama

360° Panorama Viewer Demo

This post demonstrates how to embed interactive 360° panoramas in your Jekyll blog posts.

How to Use

To add a 360° panorama to any post, simply use this include:

<div id="unique-id" style="width: 100%; height: 400px; border: 1px solid #ccc; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">
  <p>Loading 360° panorama...</p>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('Initializing panorama viewer for: unique-id');
    console.log('Image path: /assets/images/your-panorama.jpg');
    
    if (typeof pannellum === 'undefined') {
        console.error('Pannellum library not loaded!');
        document.getElementById('unique-id').innerHTML = '<p style="color: red;">Error: Pannellum library not loaded. Please check the console for details.</p>';
        return;
    }
    
    try {
        pannellum.viewer('unique-id', {
            type: 'equirectangular',
            panorama: '/assets/images/your-panorama.jpg',
            autoLoad: true,
            autoRotate: -2,
            compass: true,
            showZoomCtrl: true,
            showFullscreenCtrl: true,
            showControls: true,
            mouseZoom: true,
            draggable: true,
            friction: 0.15,
            minZoom: 1,
            maxZoom: 3,
            defaultZoom: 1,
            defaultLong: 0,
            defaultLat: 0,
            hotSpots: []
        });
        console.log('Panorama viewer initialized successfully');
    } catch (error) {
        console.error('Error initializing panorama viewer:', error);
        document.getElementById('unique-id').innerHTML = '<p style="color: red;">Error loading panorama: ' + error.message + '</p>';
    }
});
</script> 

Example Panorama

Here’s an example of how the panorama viewer looks (you’ll need to replace the image path with your actual panorama):

Loading 360° panorama...

Features

The panorama viewer includes:

• Click and drag to look around
• Mouse wheel to zoom in/out
• Auto-rotation (can be disabled)
• Fullscreen mode
• Compass indicator
• Zoom controls

Image Requirements

For best results, your panorama should be:

• Equirectangular format (2:1 aspect ratio)
• High resolution (at least 2048x1024 pixels)
• JPEG or PNG format
• Properly stitched (no visible seams)

Customization Options

You can customize the viewer with these parameters:

<div id="my-panorama" style="width: 800px; height: 600px; border: 1px solid #ccc; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">
  <p>Loading 360° panorama...</p>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('Initializing panorama viewer for: my-panorama');
    console.log('Image path: /path/to/image.jpg');
    
    if (typeof pannellum === 'undefined') {
        console.error('Pannellum library not loaded!');
        document.getElementById('my-panorama').innerHTML = '<p style="color: red;">Error: Pannellum library not loaded. Please check the console for details.</p>';
        return;
    }
    
    try {
        pannellum.viewer('my-panorama', {
            type: 'equirectangular',
            panorama: '/path/to/image.jpg',
            autoLoad: true,
            autoRotate: -2,
            compass: true,
            showZoomCtrl: true,
            showFullscreenCtrl: true,
            showControls: true,
            mouseZoom: true,
            draggable: true,
            friction: 0.15,
            minZoom: 1,
            maxZoom: 3,
            defaultZoom: 1,
            defaultLong: 0,
            defaultLat: 0,
            hotSpots: []
        });
        console.log('Panorama viewer initialized successfully');
    } catch (error) {
        console.error('Error initializing panorama viewer:', error);
        document.getElementById('my-panorama').innerHTML = '<p style="color: red;">Error loading panorama: ' + error.message + '</p>';
    }
});
</script> 

Creating 360° Panoramas

To create your own 360° panoramas, you can use:

• Smartphone apps: Google Street View, 360 Camera
• DSLR cameras with fisheye lenses
• 360° cameras: GoPro Fusion, Insta360
• Software: PTGui, Hugin, Adobe Photoshop

The resulting image should be in equirectangular projection for best compatibility with the viewer.