是否有垂直响应式图库插件？ jquery或Javascript？

任何人都可以点我的方向水平和垂直响应画廊滑块插件或Jscript？是否有垂直响应式图库插件？ jquery或Javascript？

我试过Flexslider1/2，Galleria，各种其他插件，但它们都是设置宽度，似乎没有响应垂直调整浏览器大小？我试图改变所有的CSS，但没有运气。

任何帮助将不胜感激。

示例（使用Flexslider）：如果水平调整浏览器大小，图像将自动调整大小以适应浏览器窗口。如果您垂直调整大小，则会垂直切割图像。

目标：当您垂直调整浏览器窗口大小时，图像将改变宽度和高度以保持配给量并适合浏览器窗口。与水平线相同。

希望我已经解释清楚。如果您需要澄清，请提问而不是投下。

来源

2012-10-07 Rhys

你的意思是，当你拖动一个窗口变得更高，更多的图像被加载到屏幕上，当它们从显示屏上消失的时间越短？所以你没有得到一个窗口滚动条。 – Matt

@mindthemonkey我刚刚更新，使其更清晰一点。希望这有助于。 – Rhys

我想我现在得到你，所以一组（x，y）图像填充屏幕。我没有适合你的解决方案。如果Flexslider已经为X做了这些工作，尽管他们已经完成了大部分的工作，并且它应该是一个可扩展的功能，可以在不增加麻烦的情况下将Y添加到该功能中。您必须为基于X的Y和Y添加一个额外的尺寸限制，这样您不会脱离方面图像。 – Matt

围绕Flexslider中的代码捅了一圈，我找不到任何具体的东西，除了在垂直窗口更改上调整图像大小的可能性。图像调整大小似乎纯粹是基于CSS的，然后将宽度/高度信息输入到javascript中。看起来您遇到了浏览器的DOM/CSS问题，而不是在垂直窗口更改时调整图像大小，然后有一点这不是经过测试的FlexSlider设置。

让所有浏览器都理解100％垂直布局而没有垂直滚动，因为它不是普通的布局范例，它总是有点挑剔。随后的CSS版本已经有所帮助，但浏览器的反应和100％的解释仍然存在很大差异。

我参加了slider demo并借用了大部分stack answer来管理100％垂直布局，并且使用下面的详细信息来管理ended up with this。

首先，改变你的形象CSS属性来缩放布局的高度和设置宽度自动保持正确的方面：

width: auto; 
height: 90%;

这本身而是FlexSlider作品的图像上的JavaScript增加了一些额外的元素添加到页面中，并在演示中为水平布局默认一些CSS宽度值。

.flexslider .slides img {width: 100%; display: block;}

成为

.flexslider .slides { width: 100%; display: block;} 
.img {display: block; }

现在你有一个幻灯片使用Chrome。

Firefox将不是100％的高度应用映像包含类似镀铬的元素，所以我不得不通过所有的元素后退一步并应用100％的高度规则在CSS

.flexslider .slides {height: 100%; width: 100%; display: block;} 
.img {display: block; } 

.flex-viewport img{ height: 100%;} 
.flex-viewport li { height: 100%;} 
.flex-viewport ul { height: 100%;} 
.flex-viewport { height: 100%;}

你看到我也在那里做了img。最后你会得到the page。

这个解决方案的一个缺点是你现在有一个图像，它将调整屏幕的水平尺寸。你可能需要建立一些东西来迎合这一点，因为如果你使用宽度上的依赖关系来工作的基本传送带，你会遇到问题。当你添加一个水平滚动条的屏幕的mouseOut时，也会发生一些有趣的事情，但我会为你留下一个。也尝试IE浏览器需要您自担风险。

...这就是为什么我回避前端开发走=）

遗憾的是后结束了一点我的解说词的戳一下。

来源

2012-10-07 14:50:16 Matt

感谢您的帮助。这一定会让我朝着正确的方向前进。我很感激你抽出时间帮助我。 – Rhys

我也想要一个垂直响应（和水平）的图像滑块。在没有找到任何开箱即用的方式之后，我希望我开始做fiddlin。

这是the result。

以下是关键要素（请参阅jsFiddle获取完整演示）。这不完美，但应该足以让你开始。

HTML

<div id="fader"> 
    <a href="http://url1.com"><img src="http://placehold.it/600x600&text=Slide1" ></a> 
    <a href="http://url2.com"><img src="http://placehold.it/600x600&text=Slide2" ></a> 
    <a href="http://url3.com"><img src="http://placehold.it/600x600&text=Slide3" ></a> 
    <a href="http://url4.com"><img src="http://placehold.it/600x600&text=Slide4" ></a> 
</div>

CSS

#fader { 
    position: relative; 
    width: auto; 
    height: 100%; 
} 

#fader a { 
    display:block; 
    width:auto; 
    height:100%;  
} 

@media screen and (orientation: portrait) { 
    img { 
     width: 100%; 
     height:auto !important; 
    } 
} 
@media screen and (orientation: landscape) { 
    img { 
     height: 100%; 
     min-width:10%; 
     max-width:100%; 
    } 
}

特别感谢这个jsFiddle为轻量级的jQuery旋转器。

来源

2013-08-09 21:19:08

是否有垂直响应式图库插件？ jquery或Javascript？

回答

相关问题