Skip to content
Displays a cylindrical projection of a panoramic image.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

photocylinder.js: Projected Cylindrical Image

Displays a cylindrical projection of a panoramic image.

Try the demo.

How to include the script

The stylesheet is best included in the header of the document.

<link rel="stylesheet" href="./css/photocylinder.css"/>

This include can be added to the header or placed inline before the script is invoked.

<script src="./js/photocylinder.js"></script>

How to start the script

var photoCylinder = new Photocylinder({
	'url': './img/p4080071_fov90.jpg',
	'elements' : document.querySelectorAll('#photocylinder a'),
	'container' : document.body,
	'standalone': true,
	'spherical' : /fov360/,
	'cylindrical' : /fov180/,
	'slicer' : 'php/imageslice.php?src=../{src}&{size}',
	'idle': 0.002,
	'success': function(e) { console.log('success', e); },
	'failure': function(e) { console.log('failure', e); }

'url' : {string} - Optionally load this url immediately.

'element' : {dom element} - Optionally a single target element.

'elements' : {array} - Optionally a collection of target elements.

'container' : {dom element} - Optionally restrict the popup to this container.

'standalone': {boolean} - Optionally forsake the built in modal popup interface.

'spherical' : {regexp} - File name check for spherical projections.

'cylindrical' : {regexp} - File name check for cylindrical projections.

'slicer' : {string} - Optional web-service for resizing images. An example is provided as ./php/imageslice.php.

idle : {float} - The steps in degrees to rotate when idle.

success : {function} - A function that gets called when the image is loaded and displayed successfully.

failure : {function} - A function that gets called when the image fails to load or display.

How to build the script

This project uses node.js from

This project uses gulp.js from

The following commands are available for development:

  • npm install - Installs the prerequisites.
  • gulp import - Re-imports libraries from supporting projects to ./src/libs/ if available under the same folder tree.
  • gulp dev - Builds the project for development purposes.
  • gulp dist - Builds the project for deployment purposes.
  • gulp watch - Continuously recompiles updated files during development sessions.
  • gulp serve - Serves the project on a temporary web server at http://localhost:8500/.
  • gulp php - Serves the project on a temporary php server at http://localhost:8500/.


This work is licensed under a Creative Commons Attribution 3.0 Unported License. The latest version of this and other scripts by the same author can be found at

You can’t perform that action at this time.