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