###前提・実現したいこと
レスポンシブサイトを製作中です。
ウインドウサイズに合わせて読み込むjavascriptが上手く動作しません。
具体的なコードを教えていただけますと助かります。
どなたかご教授お願いいたします。
window.matchMediaで分岐を試みましたが切り替えることが出来ませんでした。
現在は分岐せず以下で通常に作動しています。
<script type="text/javascript"> var slider = new MasterSlider(); slider.control('arrows'); slider.control('scrollbar' , {dir:'h'}); slider.control('thumblist' , {autohide:false, dir:'v', arrows:true, align:'right', width:127, height:137, margin:5, space:5, hideUnder:300}); slider.setup('masterslider' , { width:600, height:600, space:5 }); </script>
###該当のソースコード
上記より480pxにて分岐し以下を読み込みたいです。
<script type="text/javascript"> var slider = new MasterSlider(); slider.control('arrows'); slider.control('thumblist' , {autohide:false ,dir:'h',arrows:false, align:'bottom', width:127, height:137, margin:5, space:5}); slider.setup('masterslider' , { width:600, height:600, space:5, view:'scale' }); </script>
###試したこと
検索して置き換えてみました。
<script type="text/javascript"> jQuery(document).ready(function($) { //PC環境の場合 if (window.matchMedia( '(min-width: 769px)' ).matches) { //切り替える画面サイズ $.ajax({ var slider = new MasterSlider(); slider.control('arrows'); slider.control('scrollbar' , {dir:'h'}); slider.control('thumblist' , {autohide:false, dir:'v', arrows:true, align:'right', width:127, height:137, margin:5, space:5, hideUnder:300}); slider.setup('masterslider' , { width:600, height:600, space:5 }); }); //モバイル環境の場合 } else { $.ajax({ var slider = new MasterSlider(); slider.control('arrows'); slider.control('thumblist' , {autohide:false ,dir:'h',arrows:false, align:'bottom', width:127, height:137, margin:5, space:5}); slider.setup('masterslider' , { width:540, height:586, space:5, view:'scale' }); }); }; }); </script>
###補足情報(言語/FW/ツール等のバージョンなど)
サムネイル付きの画像スライダーで通販サイトで使用を試みています。
上コードがdir:'v'でvertical
下コードがdir:'h'でhorizontal
サムネイルの位置を変えたいだけなのですが。。。
よろしくお願いします。
回答3件
あなたの回答
tips
プレビュー