是否有垂直響應式圖庫插件？ 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？

回答

相關問題