画面サイズのjquery機能を無効にします。リロード時には動作しますが、サイズ変更時には動作しません

Question

<script> 
var smallScreen = false; 

$(document).ready(function() { 
    if($(window).width() > 770) { 
     smallScreen = true; 
    } 
}); 

$(window).resize(function() { 
    if($(window).width() > 770) { 
     smallScreen = true; 
    } else { 
     smallScreen = false; 
    } 
}); 
alert("Hello! I am an alert box!!"); 
</script> 
<script> 
    $(document).ready(function() { 
     if(smallScreen) { 
      $('#image-gallery').lightSlider({ 
       gallery:true, 
       mode:'fade', 
       item:1, 
       thumbItem:5, 
       slideMargin: 0, 
       speed:500, 
       auto:false, 
       loop:true, 
       thumbMargin:20, 
       enableDrag:false, 
       onSliderLoad: function() { 
        $('#image-gallery').removeClass('cS-hidden'); 
       } 
      }); 
     } 
    }); 
</script> 

最初のスクリプトは、画面サイズが770pxよりも大きいか小さいかを判断します。次に、ライトライダーのギャラリー機能を適切に実行することを選択します。ページをリロードすると、この機能が働きます。ユーザーがページのサイズを変更したときに関数を動作させる方法を理解できません。

Answer 1

ライトスライダの初期化を機能として使用し、ライトスライダはドキュメントの準備ができた後に実行するだけなのでリロード後に動作します。ウィンドウのサイズ変更後も実行する必要があります。

<script> 

    $(window).resize(function() { 
     if($(window).width() > 770) { 
     initLightSlider(); 
     }else{ 
     //destroy light slider here if you want destroy when windows <= 770 
     } 
    }); 

    $(document).ready(function() { 
     if($(window).width() > 770) { 
      initLightSlider(); 
     } 
    }); 

    function initLightSlider(){ 
     //you must destroy plugin first here, if plugin already initialization 
     $('#image-gallery').lightSlider({ 
      gallery:true, 
      mode:'fade', 
      item:1, 
      thumbItem:5, 
      slideMargin: 0, 
      speed:500, 
      auto:false, 
      loop:true, 
      thumbMargin:20, 
      enableDrag:false, 
      onSliderLoad: function() { 
       $('#image-gallery').removeClass('cS-hidden'); 
      } 
     });  
    } 
</script> 

コールこの機能

initLightSlider（）。ウィンドウの後

いくつかの条件