レスポンシブWEBデザイン。スマホの時だけ画像へのリンクON!にするjquery

最近はレスポンシブデザインを主流に制作すること多いです。やっぱり1人でクリエイターとして食べていくにはメンテナンスを軽量化することも重要なので。。。

そんでレスポンシブデザインの場合の弱点!画像も縮小されてしまう場合がある。切り替える事ができますが面倒です。画像を2枚用意しないといけないし修正するにも倍以上の時間がかかってしまう。

そんでjavascriptで切り替えることができるのでそれを利用したjqueryを作りました。スマートフォン(一応iPhoneAndroid)の時だけ画像をクリックして拡大させて見てもらうものです。

画像のリンクでいいんじゃない?って思うけどパソコンで見た時に「なんで画像がクリックされるの?」って思われるのも嫌なのでJSで判定させてパソコンの時は擬似的にカーソールをそのままにしてクリック時にはリンクの要素を不可させることでできました。

 

■デモはこちら

 

ソースはこちら。.addClassにしたのは.cssだと反応しなかったので。なぜかな。。。

なのでスタイルシートへまずこちらを追加します、

.m_link_cursor{cursor:default;}

次にリンクには「m_link」としてクラスを追加。
<a class=”m_link” href=”画像のURL”><img src=”画像のURL” alt=”” /></a>
そんでこのソースを貼付ければスマートフォンのときだけ画像のリンク。パソコンの時はリンクなしになります。

<script type=”text/javascript“>// <![CDATA[
$(document).ready(function(){
    var agent = navigator.userAgent;
    //スマートフォンの判定
    if(agent.search(/iPhone/) == -1 && agent.search(/Android/) == -1){
      $(function(){
         //まずスマホ以外ならリンクのカーソルを擬似的にデフォルトにする。
        $(“a.m_link”).addClass(“m_link_cursor”);
         //そしてクリックしても画像のリンクがないようにする。
        $(‘a.m_link’).click(function(){
          return false;
        })
      });
    }
});
// ]]></script>

 

それよりはてなブログってソースコードを表示できないの?

ソースコードを色付けして記述する(シンタックス・ハイライト) – はてなダイアリーのヘルプ

この通りやっても表示されず。。。なぜか超むずかしい。

 

タイトルとURLをコピーしました