在响应式设计中禁用Lightbox
我搜索过以前关于jQuery和响应式设计的SOpost,但没有找到类似的运气。 我的问题是,我有一个网站,当它达到> 960px时,它会掉落所有的眼睛糖果并变得流畅。 在某些页面上,我使用灯箱从缩略图中预览较大的图像。 当960px被击中时,我想放弃灯箱效果。 以下是我设置灯箱的方法:
灯箱:
some text »
有没有办法说使用jQuery> 960px禁用rel =“lightbox”? 提前致谢!
你必须为此使用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);
这样的东西可能会起作用:此代码未经测试,只会删除rel="lightbox"
,而不是在resize时将其重新添加。 应该很容易添加,如果它对你很重要。
var responsiveLightbox = function () { var viewportWidth = $(window).width(); if (viewportWidth > 960){ $('[rel=lightbox]').attr('rel', ''); } } $(document).ready(function() { responsiveLightbox(); }); $(window).resize(function() { responsiveLightbox(); });
这是编码方法。
当你把lighbox连接到div时,你需要设置一个条件。
条件就像是
if(screenPixel> 960){将我的灯箱添加到div}
以前的答案都不适合我从特定元素中删除Lightbox,所以我发布了另一个解决方案,可以帮助当前遇到类似问题的人。
我的Lightbox2版本调用了一个initList
函数,该函数绑定了click
函数,并根据在DOM中“标记”了哪些元素供Lightbox调用然后使用start
函数。 如果要为特定屏幕大小的特定元素禁用Lightbox而不是解除绑定,则可以使用click事件。
但要注意解除绑定,因为可能有其他脚本具有附加到元素的点击行为! 如果将处理程序存储在变量中,您可以稍后引用行为,例如unbind('click', handler)
。 不幸的是,我的Lightbox2版本没有以这种方式设置,据我所知, Github上的2.8.2版没有unbind函数,也没有全局引用处理程序变量。 因此,在此上下文中,当您需要保留其他附加的单击事件时,您必须调整代码库。
在任何情况下,代码都是这样的:
$(document).ready(function() { if (screen.width < 1024) { $('#some-id').unbind('click'); } });
您甚至不必删除a
元素中的rel
属性:
click here!
根据您要链接的内容(例如PDF),添加target="_blank"
也是一个好主意,但重要的是首先在目标设备集上测试体验,不同设备可能会显示不同的行为。