web-dev-qa-db-ja.com

ビューをスライドレスポンシブにする-インラインスタイルを削除する

ビューのスライドショーから高さと幅のインラインハードコードスタイルをどのように削除しますか？ビューのスライドショーをレスポンシブにしようとしています。

スライドショーをレスポンシブにしようとしています（現時点ではflexsliderや他のスライドショーモジュールに興味はありません）。

themingviews
6
chrisjlee

上記のflexsliderモジュールはモバイルスワイプをサポートしているので素晴らしいようですが、サポートされているのは画像のみで、オーバーレイのサポート付きのビデオスライドショーが必要でした。だから私は私のテーマのCSSファイルに次の行を追加しました、そしてそれはうまくいきました：

.views_slideshow_cycle_main { width: 100%; }
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame { width: 100% !important; height: auto; }
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row { width: 100% !important; height: auto; }
.views_slideshow_cycle_main .field-content { max-width: 100%; width: 100%; }
.views_slideshow_cycle_main .field-content img { max-width: 100%; width: 100%; height: auto; margin: 0; padding: 0; }

SCSSを使用すると、次のように簡単に記述できます。

.views_slideshow_cycle_main {                                                      
  width: 100%;                                                                     
 .views-slideshow-cycle-main-frame {width: 100% !important; height: auto;}         
 .views-slideshow-cycle-main-frame-row {width: 100% !important; height: auto;}     
 .field-content { max-width: 100%; width: 100%;}                                   
 .field-content img { max-width: 100%; width: 100%; height: auto; margin: 0; padding:0;} 
}

オーバーレイは、views_slideshow_xtra_overlayによって追加されました。

からの転載このディスカッション

9
Druvision

より良いオプションは、ビューのスライドショーモジュール自体の「詳細オプション」を使用することです。

次のことを行う必要があります

  1. Sites/all/librariesにjson2というディレクトリを作成し、ダウンロード https://raw.github.com/douglascrockford/JSON-js/master/json2.js にして、フォルダーの名前をjson2に変更します。

  2. ビューのFORMATスライドショー設定の下で、「jQuery Cycle Custom Options」をスクロールし、詳細オプションセットの下で、

    height: auto
width: auto
containerResize: 0
slideResize: 0
fit: 1

  3. スライドウィンドウの高さを最大のスライドに合わせる：オフのままにします

  4. ビューと出来上がりを更新してください！ブラウザウィンドウをドラッグしているときでも、スライドショーは反応します。

参照： ここ および ここ

7
Kevin Siji

このスレッドには非常に良い解決策があります： https://drupal.org/node/1510526

推奨されるcssを使用すると、非常に素晴らしいスライドショーが得られます。JavaScriptも少し進んでいます。私が抱えている唯一の問題は、ブラウザーを狭めたり広げたりすると、スライドショーの高さがブラウザーの縦方向の問題を引き起こすことです。さまざまなメディアクエリのcssファイルのさまざまなmax-height css値を使用して、これを軽減できます。

3
jackrabbithanna

このサンドボックスプロジェクトには、jcycle2ビューのスライドショープラグインがあります...

https://drupal.org/sandbox/BenYoung/1832338

これは、新しく改善されたjcycle2ライブラリを使用しています-完全に応答します!! http://jquery.malsup.com/cycle2/

1
jackrabbithanna