禁用屏幕大小的jquery功能。适用于重新加载,但不适用于调整大小

时间:2016-07-20 02:03:52

标签: jquery media-queries responsive

<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>

第一个脚本确定屏幕大小是高于还是低于770像素。然后我选择相应地运行lightslider gallery功能。重新加载页面时,该功能有效。当用户调整页面大小时,我无法弄清楚如何让函数工作。

1 个答案:

答案 0 :(得分:0)

使灯光滑块初始化为功能,灯光滑块仅在重新加载后工作,因为它只是在文档就绪后执行,您必须在窗口调整大小后执行。

<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();

窗口调整大小或加载某些条件的页面后