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>
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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With