在响应式设计中禁用Lightbox

Question

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

灯箱:

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

有没有办法说使用jQuery> 960px禁用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);