Panorama Viewers: Types, Try-One and Plugins

As a follow-up to my presentation, here is a slightly more in-depth summary of panorama viewers, which was the theme of my Friday Show and Tell at HackerYou. These nifty things make great tools to showcase photography work, interior spaces, geography, and other scenarios that require more than the browser or mobile phone’s limitations in viewport width.

Types of Panoramic Images

Panoramic images are typically stitched together, if not taken in a single shot. HTML, CSS, and Javascript can be used to help stitch the images together, and/or create dimension as well as the capability of panning and movement. Ultimately it depends on what type of panorama viewer you intend on building which will determine the complexity and nature of your code. There are 4 types of panoramas viewers that exist:

1. Partial Panoramas

Partial panoramas cover less than 360 degrees of your physical space or view, meaning they pretty much only capture a part of your environment or subject. A partial panorama viewer would let you pan across this limited snippet of a view or space.

Partial Panorama (Image) — Photography Credit: Deborah Lee Soltesz

2. Cylindrical Panoramas

These panoramic images cover all 360 degrees around the photographer, on a horizontal axis. They capture less vertically in comparison to a spherical panorama, but allow you to see everything from a centred point of view.

Cylindrical Panorama — Photography Credit: alwaysshooting on Flickr.com

3. Spherical Panoramas

Spherical panoramas also cover 360 degrees horizontally, but they cover much more vertically too — all 180 degrees. You’ll notice that when taken by a camera, spherical panorama images have a bulbous distortion. When looking at a spherical panorama viewer, you can look above, below, and all around you as if you are completely surrounded by the environment. This provides the fullest view of any targeted space.

Spherical Panorama — Photography Credit: Alex Schreyer

3. Cubic Panoramas

Cubic panoramas are stitched together like the panels of a cube would be. I played around with an existing codepen out there and each front, back, above, bottom, left and right image were placed inside its own <div>. This type of panorama viewer also provides a 360-degree horizontal view as well as a 180-degree vertical view of a physical space.

Cubic Panorama — Photography Credit: heiwa4126 on Flickr.com

How would we build one?

Thanks to a really awesome mystery codepenner out there, I learned a super easy method of creating a very simple partial panorama viewer from scratch. It even has the ability to hover scroll using only HTML and CSS.

1) The HTML

First, we need a container, a viewer div to set your image in as a background, and ‘hover regions’ that will trigger a hover action which shifts the background inside of the viewer to the left or right of the screen by a fixed amount when the mouse runs across the viewer. As the mouse is moving from right to left, the image will pan from left to right inside the viewer.

<div id="container">
<div class="hoverRegion"></div>
<div class="hoverRegion"></div>
<div class="hoverRegion"></div>
<div class="hoverRegion"></div>
<div class="hoverRegion"></div>
<div class="hoverRegion"></div>
<div class="hoverRegion"></div>
<div class="hoverRegion"></div>
<div class="hoverRegion"></div>
<div class="hoverRegion"></div>
<div class="viewer"></div>
</div>

2) The CSS

In the CSS, we need to set the height and width of the container div to the desired size, and then set viewer div inside of it to span 100% across in width and position itself relatively. We will also need to apply a z-index of -1 to the viewer to ensure that the hover regions are sitting ABOVE the viewer in order to activate the hover actions.

#container {
height: 300px;
width: 700px;
margin: 20px auto;
position: relative;
z-index: 12;
}
.viewer {
height: 100%;
width: 100%;
background: url('myimage.jpg') top left no-repeat;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: .3s background;
transition-delay: 100s;
}

Next, we are going to set the hover effects. Basically we have to tell the hover regions “When I hover over the first hover region, make the viewer shift its background to the left -250px more so I can reveal 250px more of the image.”

.hoverRegion {
height: 100%;
width: 10%;
float: left;
}
.hoverRegion:hover ~ .viewer {
transition: .3s;
}
.hoverRegion:nth-child(2):hover ~ .viewer {
background-position: -250px 0;
}
.hoverRegion:nth-child(3):hover ~ .viewer {
background-position: -500px 0;
}
.hoverRegion:nth-child(4):hover ~ .viewer {
background-position: -750px 0;
}
.hoverRegion:nth-child(5):hover ~ .viewer {
background-position: -1000px 0;
}
.hoverRegion:nth-child(6):hover ~ .viewer {
background-position: -1250px 0;
}
.hoverRegion:nth-child(7):hover ~ .viewer {
background-position: -1500px 0;
}
.hoverRegion:nth-child(8):hover ~ .viewer {
background-position: -1750px 0;
}
.hoverRegion:nth-child(9):hover ~ .viewer {
background-position: -2000px 0;
}
.hoverRegion:nth-child(10):hover ~ .viewer {
background-position: -2500px 0;
}

That’s pretty much it! Although don’t forget the body properties, which usually go first in the code.

body { 
box-sizing: border-box;
background: white;
text-align: center;
}

Plugins for Panorama Viewers

If you’d like to try out a plugin at some point rather than building a panorama viewer yourself, there are quite a few plugin options that exist out there which rely on HTML, CSS and Javascript (+JQuery) — sometimes APIs as well. Here are some of the ones I recently came by.

If anyone knows of any other ones, feel free to leave a note! Happy coding.

Like what you read? Give Caitlin Chu a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.