如何在使用Fancybox 2時正確調整文本內容的大小？

我正在使用Unsemantic框架創建HTML5中的單頁網站，鏈接到在Fancybox 2中顯示的隱藏div，並且無法正確確定所有不同類型的內容的大小。如何在使用Fancybox 2時正確調整文本內容的大小？

有三個div - 一個包含div內的文本，包含在一個隱藏的div內，因此我可以相應地操縱內容，一個包含圖片庫，另一個包含指向YouTube視頻的鏈接。我創建了一個隱藏的類，我通過CSS調用像這樣：

HTML文本部分：

<a class="fancybox" href="#bio">...blah blah blah... 
...then later on...<article class="hidden" id="bio">

HTML的視頻部分：

<a class="fancybox fancybox.iframe" href="https://www.youtube.com/video">Videos</a>

CSS ：

.hidden { 
    overflow:hidden; 
    display:none; 
}

的fancybox被稱爲<head>標籤內：

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#fancybox-gallery").click(function() { 
    $.fancybox.open([ 
     { 
     href : "image_1.jpg", 
     }, { 
     href : "image_2.jpg", 
     }, { 
     href : "image_3.jpg" 
     } 
    ], { 
     helpers : { 
     thumbs : { 
      width: 75, 
      height: 50 
     } 
     } 
    }); 
    }); 
}); 
</script>

隨着的fancybox 2默認值（autoSize:true，autoWidth:false和autoHeight:false），圖像相應地調整大小，視頻相應調整大小，但文本鏈接默認爲最小高度和最大寬度：

Enter image description here

如果我設置autoSize和autoWidth爲False，然後將autoHeight設置爲True，圖像仍以相同方式調整大小，文本框重新調整爲瀏覽器窗口的大約50％，並且視頻在右側顯示爲一部分白色：

Enter image description here

說實話，我喜歡在這個例子中，文本框的大小，和他們的行爲響應，但視頻框是錯了，所以這是一個有點討厭。

到目前爲止，我已經嘗試沒有成功如下：

卸下class="hidden"並在CSS內聯 "display:none"腳本替換它，然後display:inline-block，在朋友的建議，但我意識到它不會工作;
給隱藏的文本div一個網格設置與HTML的其餘部分一致，但這只是導致div調整大小，而不是Fancybox。
我可以設置一個靜態寬度，但它需要響應，所以不能滿足我的需求;

那麼，我該錯在哪裏？答案可能在於設置autoSize:true，並將em或% width添加到需要它的div上？

我也打算在打開時調用腳本，隻影響我需要的div，但我不確定這是否可能。我每天都不是JavaScript用戶，所以我的知識很差。

來源

2015-07-20 tomdot

我看到一切，但你的fancybox初始化腳本 – JFK

道歉，我現在補充說。 – tomdot

fancybox綁定到'＃fancybox-gallery'選擇器，但在您的html中看不到該選擇器 – JFK

您是否嘗試過使用Flexbox？我對這組CSS屬性的前往參考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

此外，您可以使用javascript設置靜態值，並在窗口調整大小時更改它們以確保響應。可能需要超時和間隔來防止在調整大小時對瀏覽器造成壓力。

來源

2015-07-27 21:18:46

我建議考慮使用視口單位爲您的字體大小（VH，VW，最大值，最小值，REM）：

http://caniuse.com/#feat=viewport-units

http://www.sitepoint.com/new-css3-relative-font-size/

來源

2015-08-16 20:42:44 modded

這是怎麼了，我使用fanybox 。您可以使用「afterShow」回調來操縱顯示的框。我不確定是否將它與視頻一起使用 - 可能會有另一個容器選擇器而不是$（'img.fancybox-image'）？試試...

jQuery(".fancybox").fancybox({ 
     openEffect : 'none', 
     closeEffect : 'none', 
     padding : 0, 
     margin  : 5, 
     fitToView : true, 
     autoScale : true, 
     nextEffect : 'fade', 
     prevEffect : 'none', 
     afterShow : function() { 
      var img = $('img.fancybox-image'); 
      var screen = { 
       w : $(window).width(), 
       h : $(window).height(), 
       r : $(window).width()/$(window).height() 
      }; 
      var imgDims = { 
       w : img.width(), 
       h : img.height(), 
       r : img.width()/img.height() 
      }; 
      if(imgDims.r > screen.r) { 
       img.width(screen.w - 40); 
       img.height(Math.round((screen.w - 40)/imgDims.r)); 
      } else { 
       img.height(screen.h - 40); 
       img.width(Math.round((screen.h - 40) * imgDims.r)); 
      } 
      this.autoHeight = true; 
      this.autoWidth = true; 
     } 
    });

來源

2016-01-28 17:06:42 Gerfried

你不能設置它的max-width？

在你有文本的第一形象，會發生什麼，如果你將其設置爲和應用：

width: 100%; 
max-width: 500px; /* or whatever you like */ 
margin: 0 auto; 
left: 0; 
right: 0;

在你的屏幕截圖白色外（或最外層）的容器。

如果fancybox重寫它，請使用!important。

真的，在這種情況下，你只需要fancybox加載或顯示它，然後垂直放置它。你應該能夠用幾行CSS來水平居中。當然，我們沒有一個工作演示，所以可能會丟失一些東西（比如它是如何調整它的內容或溢出）。但如果您可以發佈演示，我會很樂意修改我的答案。

來源

2016-04-20 18:47:55 evu

如何在使用Fancybox 2時正確調整文本內容的大小？

回答

相關問題