的fancybox擴展問題在移動設備使用低高度橫向放置

問題描述：的fancybox擴展問題在移動設備使用低高度橫向放置

我使用的fancybox v2.1.5以快速響應的頁面設計。我遇到的問題是更小的移動設備，比矩形更矩形。

當設備處於縱向方向並且我稱Fancybox時，它顯示爲屏幕寬度，標題文本環繞圖像。這不是一個問題，因爲在縱向模式下通常會有很多額外的屏幕空間。

但是，當我將設備更改爲橫向時，Fancybox縮小其高度以響應較短的屏幕高度。

寬度也明顯縮小。由於標題框的寬度也由Fancybox容器的寬度來控制，該容器根據圖像寬度進行調整，這意味着文本會更多地包裝並且通常會導致圖像縮小得更多，因爲它的大小會變小以適應所需的空間標題文字環繞。

我沒有成功嘗試過使用Fancybox CSS和媒體查詢，但是在這裏閱讀其他帖子表明你需要javascript功能來有效地做到這一點，雖然我很堅實的HTML和CSS，但我仍然相當不穩定的JavaScript。

所需的功能：

我希望能夠能測試「短」屏幕的高度和格式化的fancybox標題給儘可能多的房地產商的形象，儘可能。

理想情況下，這將通過控制Fancybox標題字體大小並允許標題框超出容器邊界進行擴展。

任何編碼建議形式的幫助，或指向我，我amy錯過的其他職位將不勝感激。

來源

2014-11-03 MarkN

是的，這是冠軍的問題。這就是爲什麼你可以使用按鈕助手，然後用戶可以切換更大的圖像。您還可以使用媒體查詢在最小高度隱藏標題。使用Fancybox很多年後，我切換到Magnific Popup。 http://brutaldesign.github.io/swipebox/也很棒。 – Christina 2014-11-03 06:19:47

您可以使fancybox 橫向響應，所以它會根據需要擴展其height無論屏幕大小。這樣的圖像不會萎縮（包括其title）以適應視口的height（儘管你可能需要向下滾動才能看到一個較大的圖像的其餘部分，其title）

如果這種替代適合你的需要，你需要一組的fancybox的API選項自定義初始化腳本像結合：

jQuery(document).ready(function ($) { 
    $('.fancybox').fancybox({ 
     fitToView: false, // won't shrink to fit in the viewport 
     maxWidth: "90%", // need to explain? 
     helpers: { 
      title: { 
       type: "inside" // can fit larger title/captions 
      } 
     }, 
     beforeLoad: function() { 
      // optional: 
      // get a large title from a data attribute 
      this.title = $(this.element).data("caption"); 
     } 
    }); 
}); // ready

關於造型的title，你可以隨時添加額外的CSS規則來設置您的首選風格像（裝載的fancybox CSS文件後）：

.fancybox-title { 
    font-family: verdana, sans-serif; 
    font-size: 11px; 
    font-style: italic; 
    color: #008000; 
}

見JSFIDDLE

來源

2014-11-03 08:26:23 JFK

的fancybox擴展問題在移動設備使用低高度橫向放置

回答

相關問題