javascript - Bootstrap image gallery always opens at top of page -
i'm using bootstrap image gallery blueimp. i've placed container @ bottom of index.cshtml page:
<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> here's example anchor tag links gallery:
<a href="~/images/press/french/babybook-couv-p-ete-2014.png" target="_blank" data-gallery="#blueimp-gallery"> <img src="~/images/press/french/thumbs/babybook-couv-p-ete-2014.jpg" class="img-responsive magazine" /> </a> when click open gallery, opens @ top of page. think these css rules control position:
.blueimp-gallery { position: fixed; z-index: 999999; overflow: hidden; background: #000; background: rgba(0,0,0,.9); opacity: 0; display: none; direction: ltr; -ms-touch-action: none; touch-action: none; } .blueimp-gallery, .blueimp-gallery>.slides>.slide>.slide-content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; -moz-backface-visibility: hidden; } the position:fixed , top:0, right:0, bottom:0, left:0 have gallery opening @ top of page.
is there way have gallery open right user on page, when close gallery, returns them original location? or there way know user on page , return him/her spot after gallery closed?
all these solutions workarounds, had same issue blueimp-gallery , realized happening because library hides page scroll bar default, , when open goes straight top.
so in options set hidepagescrollbars:false
when initilialize library:
blueimp.gallery(links,{hidepagescrollbars:false});
Comments
Post a Comment