1

ここで表示できるレスポンシブ サイト デザイン内で、galleriffic jQuery 画像ギャラリー プラグインを使用しています。ブラウザー ウィンドウのサイズを変更するとわかるように、iPad、縦向き、横向きのさまざまな状態を作成しました。これらの状態では、完全な画像ギャラリー、つまりサムネイルと隣接するフルサイズの画像が引き続き表示されます。最後に、iPhone 用です。サムネイルのみ表示します。

私の問題は、iPhone のレイアウトでは、サムネイルがまだメインのギャラリー コンテナーにリンクしていることです。完全に無効にします。スクリプトは、「ul.thumbs」にアタッチされた「noscript」クラスを動的に削除します-ギャラリーはjavascriptなしで正常に機能しなくなります-jQuery addclassを介してクラスを再追加しようとすることで、gallerifficの初期化を効果的に無効にできると思いました、しかし、それはうまくいきませんでした。

最終的に、ビューポートが 480 px 以下の場合にのみ、galleriffic スクリプトによるサムネイル リンクの変更を変更/無効にする最もエレガントなソリューションを見つけたいと思っています。これは可能ですか?

ここでご指導いただきありがとうございます。

4

3 に答える 3

4

あなたのdocument.ready()（または代替）内で、条件付きチェックを行います。

if($(window).width() > 480){
//create gallery
}

これは、ブラウザーのサイズをその場で変更する人には機能しないことに注意してください。これは、Web 開発者を除いてほとんどの人ではありません。

于 2012-08-25T07:15:40.027 に答える
1

CSSメディアクエリベースの検出を使用してjs関数をトリガーすることをお勧めします。一部のブラウザーでは、メディアクエリの幅がjsで報告される幅と異なります。

そして、はい、人々は今やかなり頻繁にウィンドウのサイズを変更しています...誰かがiphone / androidを回転させると、それはウィンドウのサイズ変更イベントです。

いくつかの基本的なコードを含むこの関連する質問を参照してください： CSSメディアクエリをjQuery $（window）.innerWidth（）で動作させるにはどうすればよいですか？

于 2012-10-12T20:11:42.157 に答える