PhotoSwipe 图像位置受移动设备上 html 中其他 img 元素的影响

问题描述 投票：0回答：1

我正在尝试在 Bootstrap HTML 页面上使用 PhotoSwipe，我注意到在移动设备上，如果页面中有其他 

<img>
元素，PhotoSwipe 库的图像不会显示在页面的中心，并且某些图标不会显示显示。 在我更复杂的情况下，图像完全位于屏幕之外。在桌面视图上，定位是正确的。

这是一个示例，如果删除第一张图像，它可以在移动设备上正常工作。

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,900|Poppins:100,200,300,300i,400,500,600,700,800,900" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe.min.css" rel="stylesheet">
  </head>

  <body>
    <!-- This image causes the problem that the PhotoSwipe gallery shows below the photo out of screen (in my more complex page totally out of screen) instead of centered on the page -->
    <!-- Viewer buttons are also not visible -->
    <img src="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" alt="Free logo">

    <!-- Gallery -->
    <section id="screenshots" class="py-5">
      <div class="container">   
        <div class="row">            
          <div class="col text-center pswp-gallery">
            <h2>Screenshots</h2>
            <p>Click on the image to enlarge it</p>
            <div id="screenshots-gallery-ps">
              <a href="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" data-pswp-width="626" data-pswp-height="626">
                <img src="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" class="img-thumbnail img-fluid shadow w-25 mb-2 mr-2 mb-2 d-inline-block" alt="test">
              </a>
              <a href="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" data-pswp-width="626" data-pswp-height="626">
                <img src="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" class="img-thumbnail img-fluid shadow w-25 mb-2 mr-2 mb-2 d-inline-block" alt="test">
              </a>
              <a href="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" data-pswp-width="626" data-pswp-height="626">
                <img src="https://img.freepik.com/free-vector/bird-colorful-logo-gradient-vector_343694-1365.jpg?t=st=1711400363~exp=1711400963~hmac=d6657572489d68ea4a277e2f6936bab8f2e110c76ebd661911cb8755d8eeba50" class="img-thumbnail img-fluid shadow w-25 mb-2 mr-2 mb-2 d-inline-block" alt="test">
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- //Gallery -->

      <!-- 3rd party JS files and scripts-->
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
      <script type="module">
      import PhotoSwipeLightbox from 'https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe-lightbox.esm.min.js';
      const options = {
        gallery:'#screenshots-gallery-ps',
        children:'a',
        pswpModule: () => import('https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.2/photoswipe.esm.js')
      };
      const lightbox = new PhotoSwipeLightbox(options);
      lightbox.init();
    </script>
  </body>
</html>

有人知道当页面上有其他 

<img>
元素时如何让 PhotoSwipe 在移动设备上正确定位图像吗？

javascript html css bootstrap-4 photoswipe
1个回答
0
投票

定位问题是滚动的不利影响，一旦 

body
被宽图像覆盖，就会出现这种情况。有必要确保没有元素占用超过主体宽度的 
overflow
。
限制所有图像的
100%
很可能是安全且有益的
max-width


但出于演示目的，仅选择 
img {
  max-width: 100%;
}

 就足够了。
滑动箭头图标隐藏在移动设备上
通过设计
。如果确实有必要可以更改：
body > img


片段：






body .pswp--touch .pswp__button--arrow {
  visibility: visible;
}



body>img {
  max-width: 100%;
}

body .pswp--touch .pswp__button--arrow {
  visibility: visible;
}





    



      

      
    

  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.