在自适应设计中禁用灯箱 [英] Disable Lightbox in responsive design

问题描述

我以前搜索过有关jQuery和响应式设计的SO帖子，但没有运气找到类似的东西.我的问题是，我有一个网站，当它点击> 960px时，它会掉下所有的视觉障碍，并变得流畅.在某些页面上，我使用灯箱从缩略图中预览更大的图像.当点击960px时，我想删除灯箱效果.这是我设置灯箱的方法:

I've searched previous SO posts regarding jQuery and responsive design but had no luck finding anything similar. My issue is, I have a website that when it hits > 960px it drops all the eye candy and becomes fluid. On some pages I use lightbox to preview a larger image off of a thumbnail. When the 960px is hit I would like to drop the lightbox effect. Here is how I lightbox set up:

灯箱:

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

有没有办法在960px以上的jQuery中禁用rel ="lightbox"?预先感谢！

Is there way to say disable rel="lightbox" with jQuery at > 960px? Thanks in advance!

推荐答案

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

You'll have to use js for this. Depending on what lightbox library you are using you may need to reinitialize it after the lightbox rel property is added back.

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

这篇关于在自适应设计中禁用灯箱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！