引导图片库总是在页面顶部打开。
我正在使用Blueimp引导图片库。我把它的容器放在我的Index.cshtml页面的底部：
<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>下面是链接到库的一个示例锚标记：
<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>当您单击打开图库时，它将在页面顶部打开。我认为这些CSS规则控制着它的位置：
.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;
}position:fixed和top:0，right:0，bottom:0，left:0与总是在页面顶部打开的画廊有关。
是否有一种方法可以让库在页面上的用户所在的位置打开，那么当用户关闭库时，它会将它们返回到原来的位置？或者，是否有一种方法可以知道用户在页面上的位置，并在库关闭后将他/她返回到该位置？
回答 3
Stack Overflow用户
发布于 2015-08-11 17:10:21
所有这些解决方案都像解决方案一样，我在blueimp图片库中也遇到了同样的问题，最后我意识到这是因为默认情况下库隐藏了页面滚动条，当您打开它时，它会直接到达顶部。
因此，在选项集中，hidePageScrollbars:false
初始化库时：
blueimp.Gallery(links,{hidePageScrollbars:false});Stack Overflow用户
发布于 2015-04-28 21:20:07
很难复制您的具体问题，但您可以尝试这种性质的方法：
.blueimp-gallery{
position:fixed;
top:50%;
left:50%;
width:80%; /* adjust as per your needs */
height:80%; /* adjust as per your needs */
margin-left:-40%; /* negative half of width above */
margin-top:-40%; /* negative half of height above */
}如果这有用的话请告诉我。
Stack Overflow用户
发布于 2015-04-30 12:13:15
我尝试了一个不同的引导图库，并经历了同样的问题：http://ashleydw.github.io/lightbox/。它必须与页面上的其他逻辑有关。切换回Blueimp图片库，并使用这一技术，使用户相信他们停留在相同的位置在页面上。
在页面中添加一个DIV：
<div id="overlay"></div>将其样式化，以便在显示时会模糊整个页面：
#overlay {
background-color:#000;
width:100%;
height:100%;
position:fixed;
top:0;
bottom:0;
right:0;
left:0;
z-index: 999999;
display:none;
}通过jQuery使用Blueimp来显示/隐藏这个div。此外，库的onopen (在库将用户发送到页面顶部之前触发)，检测用户的位置(scrollTop)。然后使用库关闭前触发的onclose滚动到页面上的那个位置。我不得不使用animate()函数；常规的scrollTop由于某种原因无法工作。
这一切都进入了$(window).load()函数：
var scrollPosition;
$('#blueimp-gallery')
.on('open', function (event) {
// Gallery open event handler
$('#overlay').show();
scrollPosition = $(window).scrollTop();
})
.on('opened', function (event) {
// Gallery opened event handler
})
.on('slide', function (event, index, slide) {
// Gallery slide event handler
})
.on('slideend', function (event, index, slide) {
// Gallery slideend event handler
})
.on('slidecomplete', function (event, index, slide) {
// Gallery slidecomplete event handler
})
.on('close', function (event) {
// Gallery close event handler
$('html, body').animate({
scrollTop: scrollPosition
}, 600, function () {
$('#overlay').hide();
});
//$('html').scrollTop(scrollPosition);
})
.on('closed', function (event) {
// Gallery closed event handler
});希望这对其他人有帮助。
https://stackoverflow.com/questions/29928780
复制相似问题
腾讯云开发者
