最近はレスポンシブデザインを主流に制作すること多いです。やっぱり１人でクリエイターとして食べていくにはメンテナンスを軽量化することも重要なので。。。
そんでレスポンシブデザインの場合の弱点！画像も縮小されてしまう場合がある。切り替える事ができますが面倒です。画像を２枚用意しないといけないし修正するにも倍以上の時間がかかってしまう。
そんでjavascriptで切り替えることができるのでそれを利用したjqueryを作りました。スマートフォン（一応iPhoneとAndroid）の時だけ画像をクリックして拡大させて見てもらうものです。
画像のリンクでいいんじゃない？って思うけどパソコンで見た時に「なんで画像がクリックされるの？」って思われるのも嫌なので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>
ソースコードを色付けして記述する（シンタックス・ハイライト） – はてなダイアリーのヘルプ
この通りやっても表示されず。。。なぜか超むずかしい。
