Блог

Я использую PhotoSwipe для отображения изображений на моей веб-странице, разработанной с использованием wordpress, используя код из библиотеки для отображения изображения следующим образом

 lt;button id="btn"gt;openlt;/buttongt;   lt;div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"gt;  lt;div class="pswp__bg"gt;lt;/divgt;  lt;div class="pswp__scroll-wrap"gt;  lt;div class="pswp__container"gt;  lt;div class="pswp__item"gt;lt;/divgt;  lt;div class="pswp__item"gt;lt;/divgt;  lt;div class="pswp__item"gt;lt;/divgt;  lt;/divgt;  lt;div class="pswp__ui pswp__ui--hidden"gt;  lt;div class="pswp__top-bar"gt;  lt;div class="pswp__counter"gt;lt;/divgt;  lt;button class="pswp__button pswp__button--close"gt;lt;/buttongt;  lt;button class="pswp__button pswp__button--share"gt;lt;/buttongt;  lt;button class="pswp__button pswp__button--fs"gt;lt;/buttongt;  lt;button class="pswp__button pswp__button--zoom"gt;lt;/buttongt;  lt;div class="pswp__preloader"gt;  lt;div class="pswp__preloader__icn"gt;  lt;div class="pswp__preloader__cut"gt;  lt;div class="pswp__preloader__donut"gt;lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"gt;  lt;div class="pswp__share-tooltip"gt;lt;/divgt;  lt;/divgt;  lt;button class="pswp__button pswp__button--arrow--left"gt;lt;/buttongt;  lt;button class="pswp__button pswp__button--arrow--right"gt;lt;/buttongt;  lt;div class="pswp__caption"gt;  lt;div class="pswp__caption__center"gt;lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/divgt; lt;/divgt;  

Затем я реализую функцию javascript, чтобы показать два изображения

 lt;scriptgt;  var openPhotoSwipe = function(){  var pswpElement = document.querySelectorAll('.pswp')[0];  var items = [{  src: 'https://empresas.blogthinkbig.com/wp-content/uploads/2019/11/Imagen3-245003649.jpg',  w: 1440,  h:1024  },  {  src: 'https://empresas.blogthinkbig.com/wp-content/uploads/2019/11/Imagen3-245003649.jpg',  w: 1440,  h:1024  }];    var options = {  history: false,  focus: false,  showAnimationDuration: 0,  hideAnimationDuration: 0    };     var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);  gallery.init();    }    openPhotoSwipe();  document.getElementById('btn').onclick = openPhotoSwipe;  lt;/scriptgt;  

Все работает нормально, но когда я захожу на свою страницу, чтобы увидеть результат, я обнаруживаю, что меню находится над моей фотопроводкой

Я попытался добавить z-индекс, но это не сработало, и изображение по-прежнему скрыто выделенными элементами на изображении

 .pswp { z-index: 9999999999999999999; }