Coding
Web
360 Image Pano

Title: 360 Image Pano
Version: v1.0
Date: 05/05/2019
Info: An ultra-simple, minimilistic way to embed scrollable 360 panoramic pictures. Uses HTML, JS and CSS
DOWNLOAD

Info

Not great for mobiles. Unlikely to work well at all.

I have a few images on my phone taken with the Google Cardboard Camera app. It works well enough but you look stupid taking the pictures and have to be intelligent in lining them up which spinning on the spot without falling. The final output is a very wide picture which requires a specific app or plugin to create the intended infinite scroll effect.

All the examples I could find had dependencies on other libraries and required so much configuration that I may as well have written one from scratch. I didn't even want to use jQuery, so I didn't.

This is, what I would consider, an ultra-simple method of creating an infinite scollable area. All I do is place the image as a background in a div with an x-repeat and move it left or right. The div gives us freedom of placement and size while allowing us to add content inside for controls or notes such as description text.

The image will scroll infinitely while the mouse is held down. Speed is adjusted by moving the mouse/touch event further from the initial point of click. For size restricted demos ones with floating objects, the scroll should stop when focus is lost.

Although intended solely for desktop, I added touch handlers for mobile and verified functionality on Android. These panoramic images can be very large, so for web demonstrations I've used relatively small files. The downloads have much larger images to give an idea of the final product.

Noting, as ever... I'm not a programmer so don't expect miracles. I needed something and this was what worked for me.


Examples

01 - Simple scroll:

  • Horizontal scroll with no controls
  • Support for mouse and touch events
  • Size restricted to 400*400px
  • Demo

02 - Fullscreen scroll with basic control arrows:

  • Fullscreen horizontal scroll
  • Basic arrow controls at side of screen
  • Arrow scroll will stop of moving cursor while depressing
  • Demo

03 - Fullscreen scroll with basic autoplay controls:

  • Fullscreen horizontal scroll
  • Basic autoplay controls for left, right and stop
  • Speed will increase/decrease the more times a direction button is pressed
  • Autoplay will stop when a manual scroll is triggered
  • Demo

04 - Multiple images displayed at same time:

  • Same functionality as example '01' but with 2 images
  • Image URL's scritped in CSS
  • image areas held in JS array to apply listeners
  • Demo

05 - Select image from list:

  • Same functionality as example '01' but with selection boxes
  • Initial image URL is scripted in CSS
  • Scroll position resets on selection
  • Demo

06 - Select image from list with size change:

  • Same functionality as example '05' but with size changes on selection
  • Size and image location changes were moved to the JS file and cased
  • Demo

Resources and Issues

Also available on GitHub here.

If you choose a div solution which is fullscreen or resizes with the screen, you'll notice the background image repositions as the screen is resized. I didn't find this to be much of an issue but it's definately something to watch out for.

There's no image load detection. That's because it's not reliably doable with just html, css and js. I'd recommend a simpler solution of just putting some 'loading' div underneath the scroll div which will be hidden when the image finally loads. Not an ideal solution but it's cheap, reliable and supported everywhere.