响应式环球免税店

我试图在其响应模式下使用此插件Galleria，这基本上意味着当窗口重新调整大小时，它将根据其容器大小重新绘制自己。我提供的链接上的演示显示了一个非常好的例子。您可以看到，当您调整窗口大小时，整个画廊会相应调整。现在我的问题是，插件不会让我初始化画廊，除非已经为用作其容器的DOM元素指定了高度。这意味着，我必须编写大量JavaScript代码才能响应窗口大小调整 - 它会摧毁它具有相应模式的响应模式 - 但在上面的网站中，无处可找到指定的明确高度。有人可以向我解释我哪里出错了吗？响应式环球免税店

来源

2012-06-13 Jibi Abraham

即时通讯具有相同的问题。如果我提供一个高度，它将不会响应。如果我不提供高度，它会崩溃告诉我，它不能从CSS读取高度。示例中的开发人员通过javascript动态添加所有html。如果你查看页面源代码，你会看到图库div实际上是空的，然后调用一个G.init（）函数，它完成所有的工作。谁能提供解决方案？ – Dogoku

@Dogoku - 我已经为你的好处添加了一个答案 - 让我知道如果你觉得它有用 –

试试这个解决方案http://stackoverflow.com/a/8347093/424052 – Dogoku

我自己想通了。发布我的答案 -

初始化图库时 - 按百分比指定高度 - 如下所示。我猜这在这种情况下需要50％的窗口高度。这样，你不需要任何地方明确指定的高度，它像宣传的那样

Galleria.run('#gallery', {responsive:true, height:0.5, debug:false});

来源

2012-06-14 05:57:38

我确实指出了一个，但它的不像我想要的那样表现得那么完美，所以我认为我做错了什么。哦，至少我们中的一个人是快乐的 – Dogoku

高度，正如你所宣称的，相当于你想要的高宽比。比照http://galleria.io/docs/options/height/ – MEM

注意：高度也可以用像素指定。 – Secko

高度选项（如果它是< 2.0）是相对于容器的宽度。所以height:0.5的高度应该是容器宽度的一半（w = 2，h = 1）。

height:1.5会导致（W = 2，H = 3）

为了保持造型反应容器时，你可以使用max-width而非width。

如果高度选项设置为2.0或更高，则将其解释为像素。所以height:2.0只有2px高。

来源

2013-04-25 18:25:20 codewaggle

环球免税店需要一个高度来正确初始化。你可以通过CSS或JS来做到这一点。

如果您希望填充屏幕的宽度和高度，我会建议通过CSS设置100％的宽度和高度。和其父容器需要100％。见下文。

**JS:** 
Galleria.run('#galleria', { 
    responsive:true, 
    showCounter:true, 
    thumbnails:false, 
    trueFullscreen:true, 
}); 

**CSS:** 
#galleria{ 
    width:100%; 
    height: 100%; 
    position: fixed; 
    z-index: 9999; 
    top:0px; 
    bottom: 0px; 
} 
body,html{ 
    height:100%; 
    width:100%; 
}

来源

2013-07-31 10:58:15 MichaelBell

响应式环球免税店

回答

相关问题