FancyBox在瀏覽器/屏幕外部打開

我正在打開一個頁面，其中有幾個不同的圖像組，我想在點擊縮略圖時爲用戶打開，並在的fancybox。FancyBox在瀏覽器/屏幕外部打開

我或多或少有它的工作原理，但有一個主要問題 - 所有圖像（1680x1050，PNG）在離屏位置打開，就好像它們的頂部和左側值相對於屏幕本身設置爲 - 80％和75％。

譯文：當它打開時，我只能看到圖像的左下角（最多）。

我已經用Google，SO，GitHub（FB項目的源代碼）等搜索了很多東西，還沒有找到解決方案，甚至沒有人遇到同樣的問題。

我可能失去了一些東西明顯，或者至少明顯經驗豐富的老兵，但我有點新的，有點累。有人有主意嗎？

在肯尼迪的建議，我已經把我所相信的是所有相關的代碼轉換成的jsfiddle（這是我聽說過，但從來沒有見過的，更別說使用）。它可以在這裏找到：也

http://jsfiddle.net/ericb222/ttvpg8vp/4/

，我使用的jQuery是：

jquery 2.1.1 
jQueryui 1.11.2

請隨時讓我知道如果你需要更多的代碼。我是編程新手;我剛剛完成了一門專注於Java和SQL的兩年制學位課程。

/* HTML */ 

<div id="content"> 
    <div id="content_body"> 
     <div id="content_left"> 
     </div><!--Close of content_left--> 
     <div id="content_right"> 
      <div id="oms" class="content_block_standard"> 
       <div class="screenshots"> 

        <a href="http://www.ejbdev.com/academia/oms/1_Portal.png" class="fancybox fancybox.image" rel="oms_gallery" title="Text"><img class="thumbnail" src="http://www.ejbdev.com/academia/oms/1_Portal.png" /></a> 

        <a href="http://www.ejbdev.com/academia/oms/2_Roster.png" class="fancybox fancybox.image" rel="oms_gallery" title="Text"><img class="thumbnail" src="http://www.ejbdev.com/academia/oms/2_Roster.png" /></a> 

        <a href="http://www.ejbdev.com/academia/oms/3_Add.png" class="fancybox fancybox.image" rel="oms_gallery" title="Text"><img class="thumbnail" src="http://www.ejbdev.com/academia/oms/3_Add.png" /></a> 

       </div><!-- /screenshots --> 
      </div><!-- /content_block_standard for OMS project --> 
     </div><!-- /#content_right --> 
    </div><!-- /#content_body --> 
</div><!-- /#content --> 

/* Javascript (from <head>) */ 

$(document).ready(function() { 
    $('.fancybox').fancybox({ 
     openEffect : 'elastic' 
    }); 
}); 

/* CSS */ 

div#content { 
    /* Positioning */ 
    margin-left:  auto; 
    margin-right:  auto; 
    position:   relative; 
    top:    4.0em; 
    margin-bottom:  16px; 
    /* Sizing */ 
    width:    960px; 
    /* Styling */ 
    border-top:   none; 
} 
    div#content_body { 
     margin:   0; 
     padding:  0; 
     display:  table; 
     position:  relative; 
     top:   0px; 
     left:   0px; 
     height:   100%; 
    } 
    div#content_left { 
     width:   192px; 
     height:   100%; 
     margin-top:  0; 
     display:  table-cell; 
     vertical-align: top; 
     position:  relative; 
     top:   0px; 
     left:   0px; 
     padding-left: 0.4em; 
     padding-right: 0.4em; 
    } 
    div#content_right { 
     width:   768px; 
     display:  table-cell; 
     vertical-align: top; 
     border-radius: 8px; 
    } 
    div.content_block_standard { 
     width:    90%; 
     margin-left:  auto; 
     margin-right:  auto; 
     padding:   1.0em; 
    } 

div.screenshots { 
    text-align:   center; 
    margin-left:  auto; 
    margin-right:  auto; 
    background:   linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.0),rgba(22,122,222,0.2)); 
    padding:   4px; 
} 

img.thumbnail { 
    width:    128px; 
    height:    auto; 
}

來源

2015-01-05 Eric Barnes

您可能需要提供您所使用的相關（HTML，CSS，jQuery的）的代碼，這個問題的一個屏幕截圖，最終，那裏的問題可以被複制的的jsfiddle，否則這個問題過於寬泛，面對沒有答案的情況下被降低投票和/或關閉的風險。 – JFK

添加了我認爲相關的代碼，以及jsfiddle鏈接。我最初沒有收入任何東西我很抱歉。獲得的經驗：不要在睡覺前花一個小時沮喪，然後發佈。 ;） –

僅供參考 - 你在jsFiddle中加入了兩次FancyBox。 – Sparky

事實證明，我爲缺少明顯的東西，我是不包括所有的人來幫我（新手的錯誤）相關的代碼，並沒有注意這一點紅色的X在Chrome的Element檢查。

我有路徑的fancybox的樣式表錯了。就是這樣。

來源

2015-01-05 23:59:28

據我所見，當元素相對於屏幕定位75％時，這是預期的行爲。只有在剩餘的25％的屏幕上，該元素纔可見，其餘的將在視口之外。

試試這個：（在這個例子中我使用的800像素元素的寬度和高度）

left: 50%; // position the left side of the box to be in the exact center 
top: 50% // position the top of the box to be in the exact center 
margin-left: -400px; // half of the width 
margin-top:-400px; // half of the height

由於您沒有向我們提供任何代碼我不知道上面的解決方案會爲你工作，但是這與將絕對定位元素居中放置到父元素的情況相同。

乾杯，Jeroen。

來源

2015-01-05 08:55:31

「......儘管...」我沒有定位任何有意讓FancyBox打開並顯示的東西。我說它看起來就像這樣定位（儘管我從來沒有定位過它）。就提供代碼而言，我不確定你想要哪個部分。這不是複製和粘貼單個頁面的問題，因爲頁面是由至少四個不同的文件構建的。除了將其設置爲「彈性」外，我沒有改變FB代碼的觸發。我會仔細檢查一下，看看是否有東西我錯過了（我可以發現），並看着jsfiddle（不知道是什麼）。 –

FancyBox在瀏覽器/屏幕外部打開

回答

相關問題