new PhotoSphereViewer 怎么在navbar里面加入gallary

在JavaScript中，如果你想要在Bootstrap的导航栏(Navbar)中添加一个PhotoSphereViewer实例，你可以按照以下步骤操作：

1. 首先，确保已经引入了必要的库，包括Bootstrap、jQuery和PhotoSphereViewer的脚本。例如：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="path/to/photosphere-viewer.min.js"></script>

2. 创建一个HTML结构，包含Navbar和用于显示图片的容器，比如`<div id="gallery-container">...</div>`：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- Navbar content here -->
</nav>

<div id="gallery-container">
  <a href="#" data-toggle="modal" data-target="#photoModal"><img src="placeholder.jpg" alt="Gallery Image"></a>
</div>

3. 使用数据属性传递图片URL到模态框(`#photoModal`)，并在模态框内初始化PhotoSphereViewer：

<!-- Add a modal for the image viewer -->
<div class="modal fade" id="photoModal" tabindex="-1" role="dialog" aria-labelledby="photoModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <img id="sphere-image" style="display:none;">
        <div id="photosphere-viewer"></div>
      </div>
    </div>
  </div>
</div>

4. 在JavaScript中，监听模态触发事件并创建并初始化PhotoSphereViewer：

$(document).ready(function() {
  // Get references to the gallery container and sphere viewer element
  const galleryContainer = $('#gallery-container');
  const sphereImage = $('#sphere-image');
  const photosphereViewer = $('#photosphere-viewer');

  // Function to show a panorama in the modal
  function showPanorama(url) {
    sphereImage.attr('src', url);
    sphereImage.show();
    photosphereViewer.psview({
      panorama: sphereImage[0],
      // Additional options if needed
    });
  }

  // Attach click event to gallery items (assuming they are anchor tags)
  galleryContainer.on('click', 'a', function(e) {
    e.preventDefault(); // Prevent default link behavior
    const imageUrl = $(this).attr('href'); // Get the URL of the image
    showPanorama(imageUrl); // Show the panorama
  });
});

这样，当你点击导航栏中的图片链接时，会打开一个模态框，并展示由PhotoSphereViewer处理的全景图片。