Lack of scrolling after closing the lightbox (blueimp)

I built my own website and wanted to add different galleries, so I tried blueimp. It works great, but when I close the lightbox, I can no longer scroll my page. Can someone please help me?

Here are some code snippets:

<div id="artworks"> <a href="gallery/artworks/test1.jpg" title="test1" data-gallery="#blueimp-gallery-artworks" class="btn btn-primary btn-lg" role="button">TAKE A LOOK</a> <a href="gallery/artworks/test2.jpg" title="test2" data-gallery="#blueimp-gallery-artworks"></a> </div> <!-- blueimp Gallery lightbox --> <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls"> <div class="slides"></div> <h3 class="title"></h3> <a class="prev">β€Ή</a> <a class="next">β€Ί</a> <a class="close">Γ—</a> <a class="play-pause"></a> <ol class="indicator"></ol> </div> <!-- scripts --> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.blueimp-gallery.min.js"></script> <script> document.getElementById('artworks').onclick = function (event) { event = event || window.event; var target = event.target || event.srcElement, link = target.src ? target.parentNode : target, options = {index: link, event: event}, links = this.getElementsByTagName('a'); blueimp.Gallery(links, options); }; </script> 
+6
source share
2 answers

In the declared variables options hidePageScrollbars: false (default is true), this works for me. See the following code:

 <script> document.getElementById('artworks').onclick = function (event) { event = event || window.event; var target = event.target || event.srcElement, link = target.src ? target.parentNode : target, options = {index: link, event: event, hidePageScrollbars: false}, links = this.getElementsByTagName('a'); blueimp.Gallery(links, options); }; </script> 
+6
source

In my case, I accidentally added several bluimp scripts. I deleted another and saved only one js file for the plugin, after which it fixed.

+1
source

Source: https://habr.com/ru/post/985953/


All Articles