The .html is so short. I will just post it here below.
And you also need two .js files to be in the same folder. Download panolens.min.js here - click on Documentation then the 2nd link under 'getting started'. Download three.min.js here - you need to pick version "105" and download that one.
Put your pictures in the same folder. Take a look at the code, and change the lines to reflect the picture filenames, and also the initial picture to load. (or improve the code to look for appropriate files in a specific folder then create the dropdown list accordingly...)
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Pictures Viewer</title>
<script src="three.min.js"></script>
<script src="panolens.min.js"></script>
<style>
#container {
width: 90%;
margin: 0 auto; /* Center the container div horizontally */
}
#panorama {
width: 100%;
height: calc(100vw * 9 / 16); /* Set the height based on a 16:9 aspect ratio */
margin-bottom: 1em; /* Add a margin of one line between the picture frame and the dropdown */
}
#loading-message {
display: none;
margin-top: 1em; /* Add a margin between the loading message and the title */
margin-bottom: 1em; /* Add a margin at the bottom */
font-size: 2em; /* Set the font size to 2em */
color: green; /* Set the font color to green */
animation: blink 0.5s infinite; /* Add the blinking animation with a duration of 0.5 seconds */
}
@keyframes blink {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
</style>
</head>
<body>
<h1>Pictures Viewer</h1>
<div id="container">
<div id="loading-message">Image being rendered, please wait...</div>
<div id="panorama"></div>
<label for="picture-select">Select Picture:</label>
<select id="picture-select">
<option value="picture1.jpg">Picture 1</option>
<option value="picture2.jpg">Picture 2</option>
<option value="picture3.jpg">Picture 3</option>
<option value="picture4.jpg">Picture 4</option>
<option value="picture5.jpg">Picture 5</option>
<option value="picture6.jpg">Picture 6</option>
</select>
</div>
<script>
const panoramaElement = document.getElementById('panorama');
const viewer = new PANOLENS.Viewer({ container: panoramaElement });
let panorama = new PANOLENS.ImagePanorama("picture1.jpg");
viewer.add(panorama);
const pictureSelect = document.getElementById('picture-select');
const loadingMessage = document.getElementById('loading-message');
const showLoadingMessage = function() {
loadingMessage.style.display = 'block'; // Show the loading message
};
const hideLoadingMessage = function() {
loadingMessage.style.display = 'none'; // Hide the loading message
};
panorama.addEventListener('progress', showLoadingMessage);
panorama.addEventListener('enter-fade-start', hideLoadingMessage);
pictureSelect.addEventListener('change', function() {
const selectedPicture = pictureSelect.value;
loadingMessage.style.display = 'block'; // Show the loading message
viewer.remove(panorama); // Remove the existing panorama from the viewer
panorama = new PANOLENS.ImagePanorama(selectedPicture);
viewer.add(panorama); // Add the new panorama to the viewer
viewer.setPanorama(panorama);
panorama.addEventListener('enter-fade-start', function() {
loadingMessage.style.display = 'none'; // Hide the loading message when the new panorama finishes rendering
});
});
</script>
</body>
</html>