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 に答える