我已经建立了一个漂亮的响应式图库,并运行了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>


威奇似乎不起作用。有任何想法吗?

最佳答案

您可以只使用.unwrap() jquery方法:

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

$(function(){ //DOM ready
    if($(window).width() < 767)
         $('#portfolio img').unwrap();
});

10-05 21:02
查看更多