jquery - 在响应式设计中禁用 Lightbox

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