2

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

灯箱:

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

有没有办法说在 > 960px 处使用 jQuery 禁用 rel="lightbox"?提前致谢!

4

4 回答 4

6

为此,您必须使用 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);
于 2012-12-27T13:29:41.747 回答
1

像这样的东西可能会起作用:此代码未经测试,只会删除rel="lightbox",而不会在调整大小时将其重新添加。如果它对您很重要,应该很容易添加它。

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

$(document).ready(function() {
    responsiveLightbox();
});
$(window).resize(function() {
    responsiveLightbox();
});
于 2012-12-27T13:22:55.117 回答
0

这是编码方法。

在将 lightbox 连接到 div 时,您需要设置一个条件。

条件类似于

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

于 2012-12-27T13:21:11.750 回答
0

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

我的 Lightbox2 版本调用一个initList函数,该函数绑定click函数并基于 DOM 中已“标记”哪些元素以供 Lightbox 调用,然后调用该start函数。如果您想为特定屏幕尺寸的特定元素禁用 Lightbox,那么取消绑定 click 事件可能会起作用。

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

无论如何,代码将类似于:

$(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",但重要的是首先在目标设备集上测试体验,不同的设备可能会显示不同的行为。

于 2016-04-07T08:53:38.080 回答