Question

我搜索了之前关于jQuery和响应式设计的SO帖子，但没有找到类似的运气。我的问题是，我有一个网站，当它击中＆gt; 960px它会掉落所有的眼睛糖果并变得流动。在某些页面上，我使用灯箱从缩略图中预览较大的图像。当960px被击中时，我想放弃灯箱效果。以下是我设置灯箱的方法：

收藏夹：

<a href="images/some-img.jpg" rel="lightbox" title="some title">some text &raquo;</a>

有没有办法说使用jQuery在＆gt;中禁用rel =“lightbox” 960像素？提前谢谢！

Answer 1

你必须为此使用js。根据您使用的灯箱库，您可能需要在添加灯箱rel属性后重新初始化它。

var lightboxOnResize = function lightboxOnResize() {
    if ($(window).width() < 960) {
        $('a[rel="lightbox"]')
            .removeProp('rel')
            .addClass('lightboxRemoved');
    } else {
        $('a.lightboxRemoved').prop('rel', 'lightbox');
    }
}

$(document).ready(lightboxOnResize);
$(window).resize(lightboxOnResize);

Answer 2

此类内容可能有效：此代码未经测试，只会删除rel="lightbox"，而不会在调整大小时将其重新添加。应该很容易添加，如果它对你很重要。

var responsiveLightbox = function () {
   var viewportWidth = $(window).width();
   if (viewportWidth > 960){
       $('[rel=lightbox]').attr('rel', '');
   }
}

$(document).ready(function() {
    responsiveLightbox();
});
$(window).resize(function() {
    responsiveLightbox();
});

Answer 3

这是编码方法。

当你把lighbox连接到div时，你需要设置一个条件。

条件类似于

如果

（screenPixel＆GT; 960） { 将我的灯箱添加到div }

Answer 4

以前的答案都不适合我从特定元素中移除Lightbox，所以我发布了另一个解决方案，可以帮助当前遇到类似问题的人。

我的Lightbox2版本调用initList函数，该函数绑定click个函数，并根据已标记的元素＆＃34;在DOM中供Lightbox调用，然后使用start函数。如果要为特定屏幕大小的特定元素禁用Lightbox而不是解除绑定，则可以使用click事件。

请注意解除绑定，因为可能有其他脚本具有附加到元素的点击行为！如果将处理程序存储在变量中，稍后可以像unbind('click', handler)那样引用行为。不幸的是，我的Lightbox2版本没有以这种方式设置，据我所知，版本2.8.2 on Github没有unbind函数，也没有全局引用处理程序变量。因此，在此上下文中，当您需要保留其他附加的点击事件时，您必须调整代码库。

在任何情况下，代码都是这样的：

$(document).ready(function() {
  if (screen.width < 1024) {
    $('#some-id').unbind('click');
  }
});

您甚至不必删除rel元素中的a属性：

<a href="./linkedcontenturl.ext" id="some-id" rel="lightframe" target="_blank">click here!</a>

根据您要链接的内容（例如PDF），最好添加target="_blank"，但重要的是首先在目标设备上测试体验，不同的设备可以表现出不同的行为。

在响应式设计中禁用Lightbox

4 个答案: