Embed panorama photos on your website with Panorama Viewer

Last update: Oct 8, 2022

Related tags

Overview

#Panorama Viewer by Pete R. Embed interactive Panorama Pictures on your site with this simple plugin. Created by Pete R., Founder of Travelistly and BucketListly

Demo

View demo

Compatibility

Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. I have not tested this on IE.

Basic Usage

You can now display your panorama photos on your site with this plugin. To do this, first you have to include the latest jQuery library together with jquery.panorama_viewer.js and panorama_viewer.css into your document's <head>. Now all you have to do this add your image to your HTML like this:

<div class="panorama">
 <img src="your-panorama.jpg">
 ...
</div>

Make sure to change the source of the image to your image and call the function as shown below:

  $(".panorama").panorama_viewer({
    repeat: false,              // The image will repeat when the user scroll reach the bounding box. The default value is false.
    direction: "horizontal",    // Let you define the direction of the scroll. Acceptable values are "horizontal" and "vertical". The default value is horizontal
    animationTime: 700,         // This allows you to set the easing time when the image is being dragged. Set this to 0 to make it instant. The default value is 700.
    easing: "ease-out",         // You can define the easing options here. This option accepts CSS easing options. Available options are "ease", "linear", "ease-in", "ease-out", "ease-in-out", and "cubic-bezier(...))". The default value is "ease-out".
    overlay: true               // Toggle this to false to hide the initial instruction overlay
  });

Now you will be able to display your panoramic photos without having to rely on the global width of the website. I hope you will find this useful. Stay tuned for more updates.

If you want to see more of my plugins, visit The Pete Design, or follow me on Twitter and Github.

Other Resources

Tutorial

A Web Viewer for Blender.

BlenderWebViewer a Web Viewer for Blender. To get started: Clone the repo Install the add-on for Blender (blenderPlugin.zip) change the path field in

Nov 29, 2022

[ThatProject] ESP32 LoRa GPS Data Viewer

Map Viewer for MCU with LoRa & GPS Data ThatProject Channel LoRa module has caught the attention of many people for a number of reasons. Being able to

Aug 7, 2022

JavaScript Online DWG/DXF Viewer

dwg-viewer-js A DWG viewer you can buy for $420 (US) I had originally made this for a software company but they cancelled at the last moment so if any

Jul 6, 2022

Quick spreadsheet viewer in vanilla JS

Heihō Quick spreadsheet viewer in vanilla JS What it does ? The heiho.js script is quick and simple spreadsheet viewer. It is meant to preview the con

Sep 8, 2022

An OpenStoriesFeed viewer

Dec 17, 2022

🔆🔎👀 Smart Contract Storage Viewer, DataType Guesser, Toolbox & Transaction Decoder

🔆 🔎 👀 Smart Contract Storage HexViewer Demo Target - the target contract API Endpoint - your infura (or equivalent) api key Retrieves smart contrac

Nov 27, 2022

This is an IFC wrapped on Three js based viewer, I think..

ifc-three-js-viewer Project description: This is an IFC wrapped on Three js based viewer, I think.. Features & Screenshots: A simple viewer for render

Dec 14, 2022

A Simple Text/Document Viewer written in JS

Doku Doku.js is a terminal ui text/document viewer that supports a custom documentation syntax called doky. Features Border colors. (all common termin

Sep 9, 2022

A viewer for Arc System Works scripts and hitboxes written in Godot.

ASWViewer A viewer for Arc System Works scripts and hitboxes written in Godot. Currently only supports Guilty Gear -Strive-. It also displays the mode

Sep 20, 2022

Comments

Viewer ignores "repeat: false"
Even with following configuration:

var defaults = { repeat: false, direction: "horizontal", animationTime: 700, easing: "ease-out", overlay: true };

Panorama is always 360. Apparently viewer is ignoring "repeat:" value and always makes image 360, regardless the value.
opened by bartekhejnowicz 1
Is there a way to center the image?

Is there a way to center the image in the container, currently it's left aligned and the client would like it to be centered. Is there a way to do this?

opened by gerharddt 0

I have problem with "Uncaught TypeError: Cannot read property 'fn' of undefined"

**$.fn.**panorama_viewer = function(options){

document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);

....... Drupal 8, using clear node with init script, div, img. Downloaded from github

opened by ghost 0

Add settings option to start image at center

Added centerX to default settings, to start pano image at the center, when repeat is false. Number should be negative one-quarter of the image's width.

opened by heathernfran 0

Owner

Pete R.

GitHub http://peachananr.github.io/panorama_viewer/demo/demo.html

A self-hosted solution for backing up and viewing backed up mobile photos

Photostore Photostore is a self-hosted, client-server solution for backing up, viewing and downloading photos. How it works The Photostore API (writte

38 Oct 25, 2022

Trusted timestamps that you can physically include in photos, videos and live streams using QR codes and audible data signals.

QR Date This is the reference implementation for the first version of QR Date, a signed timestamp inside a QR code that you can use to verify the date