1

我在响应式网站设计中使用了 Galleriffic jQuery 图片库插件，可以在此处查看。正如您通过调整浏览器窗口大小看到的那样，我为 iPad、纵向和横向创建了各种状态——它仍然显示完整的图像库，即缩略图和相邻的全尺寸图像——最后是 iPhone，它仅显示缩略图。

我的问题是，对于 iPhone 布局，缩略图仍然链接到主画廊容器 - 我已经隐藏了 - 而我希望它们简单地链接到更大的 JPEG 以单独打开，即好像画廊脚本是完全禁用。该脚本正在动态删除附加到“ul.thumbs”的“noscript”类——因此画廊将在没有javascript的情况下优雅地降级——我认为通过尝试通过jQuery addclass重新添加类我可以有效地禁用galleriffic初始化，但这没有用。

最终，我希望找到最优雅的解决方案，仅在视口为 480 像素或更小时更改/禁用画廊脚本对缩略图链接的修改——这可能吗？

感谢您在这里的任何指导。

4

3 回答 3

4

Inside your document.ready() (or alternative), do a conditional check.

if($(window).width() > 480){
//create gallery
}

Keep in mind this won't work for people who resize their browsers on the fly - which is pretty much nobody except for web developers.

于 2012-08-25T07:15:40.027 回答
1

您最好使用基于 CSS 媒体查询的检测来触发您的 js 函数，在某些浏览器中，媒体查询宽度与 js 中报告的宽度不同。

是的，人们现在确实经常合理地调整他们的窗口大小......当有人旋转他们的 iphone/android 时，这是一个窗口调整大小事件。

请参阅包含一些基本代码的相关问题： How do I get CSS mediaqueries to work with jQuery $(window).innerWidth()?

于 2012-10-12T20:11:42.157 回答
0

我对一些必须在移动设备上创建但在桌面上销毁的轮播也有类似的问题......而且我不喜欢以像素为单位检查窗口宽度的解决方案，所以我创建了一个小函数来“收听”媒体查询状态变化。

您可以在每种状态下定义自己的代码（“在进入移动分辨率时”、“在离开桌面时”）...

希望对其他人有用；）
https://github.com/carloscabo/MQBE

于 2015-02-26T08:01:14.673 回答