[英]javascript - enable a plugin if width is greater than 767px?
I am trying to write some javascript/jquery that will allow me to enable a slideshow plugin if the viewport width is greater than 767px. 我正在尝试编写一些javascript / jquery,如果视口宽度大于767px,将允许我启用幻灯片插件。
If it is less than said value, it should simply display a background image in the body and disable the plugin 如果小于所述值,则应仅在主体中显示背景图像并禁用插件
Currently i cannot get the plugin to display when the width is > 767px but the background image does show when less 目前,当宽度> 767px时,我无法显示该插件,但是当宽度小于767px时,背景图像确实会显示
any help would be appreciated 任何帮助,将不胜感激
CODE: 码:
$(window).on('resize', function() {
if($(this).width() < 767) {
$("body").addClass("backgroundImage");
$("#example, body").vegas();
window.location.reload();
} else {
$("body").removeClass("backgroundImage");
$("#example, body").vegas({
delay:10000,
transition: 'fade',
cover: true,
align: 'center',
valign: 'center',
preload: true,
preloadImage: true,
slides: [
{src: "img/slideshow/img1wB-E.jpg"},
{src: "img/slideshow/img2-2.jpg"}
]
});
window.location.reload();
return;
}
}).trigger('resize');
Why not just create a CSS entry with the min-width 767, so if its below that, it wouldn't show up. 为什么不创建一个最小宽度为767的CSS条目,所以如果它低于该宽度,则不会显示。
@media (min-width: 767px) {
.specialSlideshow {
width: 750px; }
}
@media (min-width: 0px) {
.specialSlideshow {
display:none; }
}
So, you could potentially wrap a div with class specialSlideshow around your slideshow code, if its below 767px, it wont show. 因此,您可能会在幻灯片显示代码周围包装一个带有specialSlideshow类的div,如果它低于767px,则不会显示。
Did you include 你包括了吗
<link rel="stylesheet" href="/js/vegas/vegas.min.css"> <script src="/js/vegas/vegas.min.js"></script>
in the .html? 在.html中?
And did you mean to delay it by 10 secs? 您是要延迟10秒吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.