PHP-Code:
<?php
return array(
'label' => [
'de' => ['Panoramabild','Panoramabild'],
],
'types' => ['content','module'],
'contentCategory' => 'beRecont',
'moduleCategory' => 'beRecont',
'standardFields' => ['cssID'],
'fields' => [
'description' => [
'label' => ['Panoramabild','https://photo-sphere-viewer.js.org/'],
'inputType' => 'group',
],
'panoramaImage' => [
'label' => ['Panoramabild','Wählen Sie das Panoramabild aus'],
'inputType' => 'fileTree',
'eval' => [
'fieldType' => 'radio',
'filesOnly' => true,
'extensions' => 'jpg',
'mandatory' => true,
],
],
'viewerID' => [
'label' => ['Panoramabild ID','Vergeben Sie ein ID (default: viewer)'],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50 clr',
'mandatory' => true,
],
'default' => 'viewer',
],
'caption' => [
'label' => ['Beschreibung','Optional: Geben Sie eine Beschreibung ein'],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
'allowHtml' => true,
],
'default' => 'GWerkhaus Horn',
],
'navbar' => [
'label' => ['Navbar','Geben Sie die Liste der Icons in der Navbar ein (default: autorotate zoom download caption fullscreen)'],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50 clr',
],
'default' => 'autorotate zoom download caption fullscreen',
],
'zoom' => [
'label' => ['Zoom','Zoom für den Bildausschnitt wählen (Wert zwischen 0 (max) und 100 (min) default: 50)'],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
'mandatory' => true,
],
'default' => '50',
],
'autorotate' => [
'label' => ['Autorotate',''],
'inputType' => 'checkbox',
'eval' => [
'tl_class' => 'w50 clr m12',
],
'default' => true,
],
'autorotateDelay' => [
'label' => ['Autorotate Verzögerung','Wert in ms bis die Rotation beginnt'],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50 clr',
'allowHtml' => true,
],
'default' => '2000',
],
'autorotateSpeed' => [
'label' => ['Rotationsgeschwindigkeit','Wert in rpm (default: 1rpm)'],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50 clr',
'allowHtml' => true,
],
'default' => '1rpm',
],
'longitude' => [
'label' => ['Initial Longitude','Anfangswert Blickwinkel vertikal (Wert zwischen 0 und 2?)'],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50 clr',
'allowHtml' => true,
],
'default' => '1.5',
],
'latitude' => [
'label' => ['Initial Latitude','Anfangswert Blickwinkel horizontal (Wert zwischen -?/2 und ?/2)'],
'inputType' => 'text',
'eval' => [
'tl_class' => 'w50',
'allowHtml' => true,
],
'default' => '-0.5',
],
],
);
PHP-Code:
<?php
# $GLOBALS['TL_HEAD'][] = '<style>#viewer{width:auto;height:50vh;}</style>';
$GLOBALS['TL_HEAD'][] = '<link rel="stylesheet" href="files/layout/assets/css/photo-sphere-viewer.css"/>';
# $GLOBALS['TL_HEAD'][] = '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>';
$GLOBALS['TL_HEAD'][] = '<script src="files/layout/assets/js/three.js"></script>';
# $GLOBALS['TL_HEAD'][] = '<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>';
$GLOBALS['TL_HEAD'][] = '<script src="files/layout/assets/js/browser.js"></script>';
# $GLOBALS['TL_HEAD'][] = '<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>';
$GLOBALS['TL_HEAD'][] = '<script src="files/layout/assets/js/photo-sphere-viewer.js"></script>';
# $GLOBALS['TL_HEAD'][] = '<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>';
?>
<div id="<?php echo $this->viewerID ?>" style="width:auto;height:50vh"></div>
<script>
// https://photo-sphere-viewer.js.org/guide/config.html#standard-options
new PhotoSphereViewer.Viewer({
panorama: '<?php if (null !== ($objFile = Contao\FilesModel::findByUuid($this->panoramaImage))): $imagePath = $objFile->path; echo $imagePath; endif; ?>',
container: '<?php echo $this->viewerID ?>',
caption: '<?php echo $this->caption ?>',
navbar: '<?php echo $this->navbar ?>',
defaultLat: <?php echo $this->latitude ?>,
defaultLong: <?php echo $this->longitude ?>,
mousewheel: false,
touchmoveTwoFingers: false,
<?php if ($this->autorotate == true): echo 'autorotateDelay: ' . $this->autorotateDelay . ','; endif; ?>
autorotateSpeed: '<?php echo $this->autorotateSpeed ?>',
defaultZoomLvl: <?php echo $this->zoom ?>,
});
</script>
Lesezeichen