diff --git a/doc/json-config-parameters.md b/doc/json-config-parameters.md index eaa12ac..8e71bc0 100644 --- a/doc/json-config-parameters.md +++ b/doc/json-config-parameters.md @@ -150,6 +150,21 @@ affects the compass, it only has an effect if `compass` is set to `true`. Specifies a URL for a preview image to display before the panorama is loaded. +### `previewTitle` (string) + +Specifies the title to be displayed while the load button is displayed. + + +### `previewAuthor` (string) + +Specifies the author to be displayed while the load button is displayed. + + +### `loadButtonLabel` (string) + +Label to display on load button. Defaults to `Click to Load Panorama`. + + ### `horizonPitch` and `horizonRoll` (number) Specifies pitch / roll of image horizon, in degrees (for correcting diff --git a/src/js/pannellum.js b/src/js/pannellum.js index ba387be..acac959 100644 --- a/src/js/pannellum.js +++ b/src/js/pannellum.js @@ -99,6 +99,7 @@ var defaultConfig = { hotSpotDebug: false, backgroundColor: [0, 0, 0], animationTimingFunction: timingFunction, + loadButtonLabel: 'Click to\nLoad\nPanorama', }; // Initialize container @@ -174,8 +175,10 @@ container.appendChild(controls.container); // Load button controls.load = document.createElement('div'); controls.load.className = 'pnlm-load-button'; -controls.load.innerHTML = '

Click to
Load
Panorama

'; -controls.load.addEventListener('click', load); +controls.load.addEventListener('click', function() { + processOptions(); + load(); +}); container.appendChild(controls.load); // Zoom controls @@ -233,7 +236,7 @@ if (initialConfig.firstScene) { } else { mergeConfig(null); } -processOptions(); +processOptions(true); /** * Initializes viewer. @@ -1789,13 +1792,16 @@ function mergeConfig(sceneId) { /** * Processes configuration options. + * @param {boolean} [isPreview] - Whether or not the preview is being displayed * @private */ -function processOptions() { +function processOptions(isPreview) { + isPreview = isPreview ? isPreview : false; + // Process preview first so it always loads before the browser hits its // maximum number of connections to a server as can happen with cubic // panoramas - if ('preview' in config) { + if (isPreview && 'preview' in config) { var p = config.preview; if (config.basePath && !absoluteURL(p)) p = config.basePath + p; @@ -1805,6 +1811,16 @@ function processOptions() { renderContainer.appendChild(preview); } + // Handle different preview values + var title = config.title, + author = config.author; + if (isPreview) { + if ('previewTitle' in config) + config.title = config.previewTitle; + if ('previewAuthor' in config) + config.author = config.previewAuthor; + } + // Reset title / author display if (!config.hasOwnProperty('title')) infoDisplay.title.innerHTML = ''; @@ -1887,9 +1903,25 @@ function processOptions() { if (config[key]) startOrientation(); break; + + case 'loadButtonLabel': + controls.load.innerHTML = '

' + escapeHTML(config[key]) + '

'; + break; } } } + + if (isPreview) { + // Restore original values if changed for preview + if (title) + config.title = title; + else + delete config.title; + if (author) + config.author = author; + else + delete config.author; + } } /**