No scrolling after closing lightbox (blueimp)
Asked Answered
B

2

6

I built my own website and wanted to add different galleries, so I tried blueimp. It works perfectly, but when I'm closing the lightbox, I'm not able to scroll on my page anymore. Can somebody please help me?

Here's a little code snippet:

<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>
Bilateral answered 25/4, 2015 at 15:26 Comment(2)
can you show a working demo (on jsfiddle or something)? Hard to tell with just that bit of code. Probably an overflow:hidden that doesn't get removed by the plugin or something, but that's just a guess without seeing the code in action.Memoried
Hey, thanks for your answer. I tried to build a working demo, but its to complex. I think, its easier, if you visit my website instead;) www.zoesch.netBilateral
C
6

In the variable options declared hidePageScrollbars: false (default is true), this works for me. See the folowing 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>
Cupola answered 24/6, 2015 at 14:59 Comment(0)
I
2

In my case I have accidentally added multiple bluimp scripts. I removed the other and keep just one js file for the plugin then it fixed.

Ineslta answered 5/6, 2015 at 3:47 Comment(1)
Thanks, In my case I had jQuery-File-Upload script call for 2 times.Lucubrate

© 2022 - 2024 — McMap. All rights reserved.