Panorama

 
Enabling Panaramic images

To enable panoramic photos, tick Basic settings -> Photos -> I: Photo specifications -> Item 3: Enable Panorama and a selectionbox will appear on the photo admin page at every photo that may be a panorama, i.e. the width is at least 2 times the height.

Types of Panoramic images

The following types of Panoramic images is supported:

  • 360° spherical images
  • Non 360° flat panoramic images
360° spheric images

For this feature the javascript library THREE.js has been embedded into wppa.

Example 1: A computer generated 3D structure rendered into a 360° spherical image. By Alejandro Giraldez Sanchez.

4874

MOD13_000group--v7-44--colonia--360ยบ
Image by Alejandro Giraldez Sanchez

Example 2: A sample from the THREE.js open source software example application by Emanuele Feronato.

4830

THREE-sample-05

Non 360° flat panoramic images

Example 3: A sample provided by M. Marell, Muziekhuis Lyana

4832

IMG_1216

Lightbox

Click on a thumbnail to open the panorama in lightbox.

Docs by subjectโ€ขAdvanced topicsโ€ขPanoramaโ€ขPanorama
4874
MOD13_000group--v7-44--colonia--360ยบ (opajaap)
MOD13_000group--v7-44--colonia--360ยบ
Image by Alejandro Giraldez Sanchez
6242 views
4871
MOD04_105_011--v7-134--group-taper-simetry--day--360ยบ (opajaap)
MOD04_105_011--v7-134--group-taper-simetry--day--360ยบ
Image by Alejandro Giraldez Sanchez
145 views
4830
THREE-sample-05 (opajaap)
THREE-sample-05
7015 views
4832
IMG_1216 (opajaap)
IMG_1216
7024 views
4872
MOD07_12--MOD05_16--V7-099--360ยบ (opajaap)
MOD07_12--MOD05_16--V7-099--360ยบ
Image by Alejandro Giraldez Sanchez
145 views
4834
MOD04_66_01_01--360ยบ (opajaap)
MOD04_66_01_01--360ยบ
Image by Alejandro Giraldez Sanchez
100 views
4875
sonpan_083--v7-189--z50%--entorno--360ยบdef (opajaap)
sonpan_083--v7-189--z50%--entorno--360ยบdef
Image by Alejandro Giraldez Sanchez
160 views
4873
BRIDGE02_01--v7-055--360ยบ (opajaap)
BRIDGE02_01--v7-055--360ยบ
Image by Alejandro Giraldez Sanchez
140 views
4831
ale-atory--0012b-1b-20 (opajaap)
ale-atory--0012b-1b-20
Image by Alejandro Giraldez Sanchez
220 views
4833
layers-04_01--360ยบ (opajaap)
layers-04_01--360ยบ
Image by Alejandro Giraldez Sanchez
84 views
4835
MOD12_02_01_01--360ยบ (opajaap)
MOD12_02_01_01--360ยบ
Image by Alejandro Giraldez Sanchez
96 views
4836
g140b-09a--360ยบ (opajaap)
g140b-09a--360ยบ
Image by Alejandro Giraldez Sanchez
9033 views
4837
TOWN-07_MOD03_128--v5--020-360ยบ (opajaap)
TOWN-07_MOD03_128--v5--020-360ยบ
Image by Alejandro Giraldez Sanchez
815 views

Configuration

Basic settings -> Misc -> II: Panorma related settings contains a few configuration settings. You can switch off the control bar and dragging the image. You can also start the display in a panning mode. These settings apply to all panoramic images on the site, however, if you want a single panorama to be displayed different from all the others, you can set these configuraion settings on the fly with inline settings.
Example:

[wppa_set name="wppa_panorama_control" value="none"]
[wppa_set name="wppa_panorama_manual" value="none"]
[wppa_set name="wppa_panorama_autorun" value="right"]
[wppa_set name="wppa_panorama_autorun_speed" value="3"]
[wppa type="mphoto" photo="4836"]
[wppa_set]

4836

g140b-09a--360ยบ
Image by Alejandro Giraldez Sanchez

Restrictions

The following restrictions apply to the Panoramic images feature:

  • Because this feature uses the HTML tag <canvas> it works only on browsers that support HTML-5. This is a permanent restriction.
  • As you can see by the shape of the curser when viewing a panorama on a desktop or laptop computer, you can drag the image into any direction; on the flat panorama you can also drag the black rectangle on the preview image. There is no way to drag on a mobile device; this would interfere with the default gesture events. It is still under investigation if there is a way around this restriction.
  • This kind of panoramas is implemented for the display of single photo's and lightbox; one can use any of the three 'plain' single photo shortcodes, e.g.:
    [wppa type="photo" photo="{photo_id}"]
    [wppa type="mphoto" photo="{photo_id}"]
    [wppa type="xphoto" photo="{photo_id}"]
    Additionally you can link thumbnails to lightbox for fullscreen displays.
  • Only .jpg files can be used for panoramas that have their width in pixels at least 2 * the height.