0

イメージ スライダーをリキッド レイアウト (親) で表示しようとしていますが、イメージの高さと幅を制限するのは好きではありませんが、大画面モニター (27 インチ) から 11 インチなどの小さいモニターまで要求できます。以下。この問題を解決するのに役立つプラグインがあるかどうか教えてください。現在、固定レイアウトのスライダー (プラグイン - Nivo) を使用していますが、それを液体に変更することはできません。私が持っているコードは次のとおりです: HTML

 <!DOCTYPE HTML>
 <html>
 <head>
 <title>GALLERY</title>
 </head>
 <body>
 <div id="row_1">
 <div class="container"></div>
 </div>
 <div id="row_2">
 <div class="container">
 <div id="slideshow"> 
 <div id="slider"> 
 <img  src="img/1.jpg" title="" style="" /></div>      
 <img  src="img/2.jpg" title="" style="" /></div> 
 <img  src="img/3.jpg" title="" style="" /></div> 
 <img  src="img/4.jpg" title="" style="" /></div>      
 </div> 
 </div>  
 </div>
 </div>
 <div id="row_3">
 <div class="container"></div>
 </div>
 </body>
 </html>

CSS

 * {
    margin: 0;
    padding: 0;
    }
 html{
    height:100%;
    width: 100%;
   }
 body {
  background-color: #272321;
  height:100%;
  width: 100%; 
  }
 #row_1 {
  position:relative;
  height:15%;
  width: 100%;
 }
 #row_2{
   position:relative;
   height:77%;
   width: 100%;
  }
  #row_3{
   position:relative;
   height:8%;
   width: 100%;
   background-color: #151110; 
   }
  .container{
   position:relative;
   margin: 0 auto;
   height:100%;
   width: 80%;
  }

画面サイズごとにいくつかのレイアウトを使用するのは良い考えだと思いますか? Jqueryでこれを修正する方法はありますか?

4

1 に答える 1

0

事前に用意されたプラグインについては知りませんが、これを処理するための独自のコードはそれほど多くありません。

ウィンドウのサイズ変更にイベント ハンドラーをアタッチし、コンテナー div のサイズを確認し、独自の JavaScript を使用して、新しいコンテナー サイズに基づいてスライドショーの新しい画像サイズを選択できます。

サイズ変更中にコードが何百回も実行されるのを防ぐためにわずかな遅延を使用すると、次のようになります。

(function() {
    var pauseTimer;

    $(window).resize(function() {
        // clear any previous timer running
        if (pauseTimer) {
            clearTimeout(pauseTimer);
        }
        // set new timer
        pauseTimer = setTimeout(function() {
            // user finished or paused resizing, 
            // so now we can recalculate slideshow size
            pauseTimer = null;
            // examine the size of your container div
            // select a new size image for your slideshow and load those images here
        }, 500);
    })
})();

ここにデモがあります：http://jsfiddle.net/jfriend00/Tucf2/

于 2012-07-15T19:39:04.903 に答える