Question

我正在使用Bootstrap image gallery by Blueimp。我已将其容器放在Index.cshtml页面的底部：

.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

单击以打开图库时，它将在页面顶部打开。我认为这些CSS规则控制其位置：

top:0

right:0和bottom:0，left:0，Dim strWhere As String Dim lngLen As Long Const conJetDate = "\#dd\/mm\/yyyy\#" If Not IsNull(Me.PerPNum) Then strWhere = "([PNum] = " & Me.PerPNum & ") AND " End If If Not IsNull(Me.PerPPro) Then strWhere = strWhere & "([PPro] = " & Me.PerPPro & ") AND " End If If Not IsNull(Me.PerPRev) Then strWhere = strWhere & "([PRev] = " & Me.PerPRev & ") AND " End If If Not IsNull(Me.DateStart) Then strWhere = strWhere & "([TaskStart] >= " & Format(Me.DateStart, conJetDate) & ") AND " End If If Not IsNull(Me.DateEnd) Then strWhere = strWhere & "([TaskEnd] < " & Format(Me.DateEnd + 1, conJetDate) & ") AND " End If If Not IsNull(Me.PerDesi) Then strWhere = strWhere & "([UInit] = " & Me.PerDesi & ") AND " End If lngLen = Len(strWhere) - 5 If lngLen <= 0 Then MsgBox "No criteria", vbInformation, "Nothing to do." Else Debug.Print strWhere Me.Sub_Desi_Schedule.Form.Filter = strWhere Me.Sub_Desi_Schedule.Form.FilterOn = True End If，{{1}}与图片总是在页面顶部打开有关。

有没有办法让图库在用户在页面上的位置打开，所以当他们关闭图库时，它会将它们返回到原始位置？或者有没有办法知道用户在页面上的位置，并在画廊关闭后将他/她返回到该位置？

Answer 1

所有这些解决方案都像解决方法一样，我遇到了与blueimp-gallery相同的问题，最后我意识到它发生了，因为默认情况下库隐藏了页面滚动条，当你打开它时直接进入顶部。 / p>

所以在选项集hidePageScrollbars:false

中

初始化库时：

blueimp.Gallery(links,{hidePageScrollbars:false});

Answer 2

很难复制您的具体问题，但您可以尝试这种性质：

{{1}}

让我知道这是否有效。

Answer 3

我尝试了一个不同的Bootstrap画廊并遇到了同样的问题：http://ashleydw.github.io/lightbox/。它必须与页面上的其他逻辑有关。切换回Blueimp Gallery，并使用这个用户认为他们停留在页面上相同位置的kludge。

向页面添加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 API显示/隐藏此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
    });

希望这有助于其他人。

Bootstrap图库总是在页面顶部打开

3 个答案: