4

タッチまたはクリックすると、対応するフルサイズの大きな画像がスライドショーで開きます。

でも：

モバイルでのみスライドショーへのリンクを無効にする必要があります (<=480)。

仕組みは次のとおりです。

<div class="box">
  <div class="boxInner">
    <a href="slideshow_illustration.html?er_col=0"/><img src="_assets/grid_illustration/geisha.jpg">
    <div class="titleBox">Geisha</div>
  </div>
</div>

知っておいてください: 私はレスポンシブな個人サイトの構築に苦労している写真家/アーティストなので、10 歳のように話さなければなりません。

どうぞよろしくお願いいたします。

4

2 に答える 2

4

達成しようとしていることに応じて、javascript を使用せずにそれを行う 1 つの方法は、pointer-events. これにより、基本的に要素のクリックが無効になります。

@media only screen and (max-device-width: 480px) {
     .boxInner a {
        pointer-events: none;
    }
}
于 2013-07-09T03:52:15.483 に答える
1

これをページに含めて、サイトにjqueryを含めます

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

次に、次のような小さなスクリプトを記述します。

<script type="text/javascript">

$(document).ready( function() {
    if (screen.width <= 480) {
        $('.boxInner a').on('click', function (event) {
            event.preventDefault();
        });
    }
});

</script>

これにより、画面が <= 480 であるかどうかがテストされ、そうである場合はリンクが無効になります。

于 2013-07-09T03:32:12.217 に答える