引導圖片庫總是在頁面頂部打開

我正在使用Bootstrap image gallery by 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有事情做與畫廊始終在頁面的頂部開口。

有沒有辦法將畫廊打開到用戶在頁面上的位置，因此當他們關閉畫廊時，會將畫廊返回到其原始位置？或者有沒有辦法知道用戶在頁面上的位置，並在畫廊關閉後將他/她返回到該位置？

來源

2015-04-28 Alex

所有這些解決方案都像變通方法，我對blueimp-gallery有同樣的問題，最後我意識到發生這種情況是因爲圖書館默認隱藏了頁面滾動條，當您打開它時會直接進入頂部。

所以在設置的選項hidePageScrollbars:false

當你initilialize庫：

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

來源

2015-08-11 17:10:21 dtrejogo

這是很難複製你的具體問題，但你可以嘗試這種性質的東西：

.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 */ 
}

讓我知道這是否正常工作。

來源

2015-04-28 21:20:07 Kinburn101

謝謝，@ Kinburn101，爲您的代碼，但仍畫廊跳轉到頁面頂部。現在它只顯示了畫廊的下半部分;其餘部分位於頁面頂部的視圖之外。 – Alex

我必須錯過在你發佈的代碼中不明顯的東西。沒有看到一個工作模型顯示由各種來源分配給'.blueimp-gallery'的初始屬性，很難確定衝突的位置。 – Kinburn101

謝謝@ Kinburn101快速回復。你可以去這裏找一個工作的例子：http://mj-dev.azurewebsites.net/。點擊「我們的故事」菜單項，然後選擇「新聞」選項卡，然後向下滾動到「嬰兒潮」項目並單擊其任一圖像。 – Alex

我試過了一個不同的Bootstrap庫，並且遇到同樣的問題：http://ashleydw.github.io/lightbox/。它必須與頁面上的其他邏輯有關。切換回Blueimp圖庫，並使用這個讓用戶相信他們呆在頁面上相同位置的kludge。通過jQuery

#overlay { 
    background-color:#000; 
    width:100%; 
    height:100%; 
    position:fixed; 
    top:0; 
    bottom:0; 
    right:0; 
    left:0; 
    z-index: 999999; 
    display:none; 
}

使用Blueimp API來顯示/隱藏這個div：

一個DIV添加到頁面：

<div id="overlay"></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 
    });

希望這會幫助別人。

來源

2015-04-30 12:13:15 Alex

引導圖片庫總是在頁面頂部打開

回答

相關問題