在响应式设计中禁用灯箱

Question

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

灯箱：

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

有没有办法说在> 960px 时使用 jQuery 禁用 rel="lightbox" ？ 提前致谢！

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

这是编码方法。

在将灯箱连接到 div 时，您需要设置一个条件。

条件会是这样的

if(screenPixel>960) { 将我的灯箱添加到 div }

Answer 4

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

我的 Lightbox2 版本调用一个initList函数，该函数绑定click函数，并基于哪些元素在 DOM 中被“标记”以供 Lightbox 调用，然后调用start函数。 如果您想为特定屏幕尺寸的特定元素禁用灯箱，则可以取消绑定单击事件。

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

无论如何，代码将类似于：

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

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

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

根据您链接到的内容（例如 PDF），添加target="_blank"也是一个好主意，但重要的是首先在目标设备集上测试体验，不同的设备可能会显示不同的行为.