<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功能。重新加载页面时,该功能有效。当用户调整页面大小时,我无法弄清楚如何让函数工作。
答案 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();