0

我已经启动并运行了一个漂亮的响应式画廊，使用 prettyPhoto 插件可以更轻松地查看图像。这当然在台式机/笔记本电脑上效果很好，但在移动设备上绝对可怕。（较长的加载时间，由于预先确定的 CSS 等原因导致图像不适合屏幕）

我可以告诉浏览器不要在移动设备上加载 prettyPhoto.js，但是缩略图锚仍然会链接到完整尺寸的图像。（我不想要！缩略图足够大，可以移动，不需要全尺寸图像。）

为此必须有某种 jQuery 或 JavaScript 解决方案。我不确定最好的方法是什么，并希望有人可以为解决这个问题提供一些见解。

HTML：

<ul id="portfolio">
  <section id="photos">
    <li class="all"> <a href="fullsize.jpg" rel="prettyPhoto[all]"> <img src="thumb.jpg"> </a> </li>
    <li class="all"> <a href="fullsize.jpg" rel="prettyPhoto[all]"> <img src="thumb.jpg"> </a> </li>
    <li class="all"> <a href="fullsize.jpg" rel="prettyPhoto[all]"> <img src="thumb.jpg"> </a> </li>
    <li class="all"> <a href="fullsize.jpg" rel="prettyPhoto[all]"> <img src="thumb.jpg"> </a> </li>
  </section>
</ul>

编辑：

到目前为止，我得到的是：

<script>
if ( $(window).width() < 767) {
   $('#portfolio img').unwrap();
)};
</script>

这似乎不起作用。有任何想法吗？

4

1 回答 1

2

你可以只使用.unwrap()jquery 方法：

http://jsfiddle.net/fm9Un/1/

$(function(){ //DOM ready
    if($(window).width() < 767)
         $('#portfolio img').unwrap();
});
于 2013-06-04T14:43:05.833 回答