このブログは jQuery と Lightbox を導入して記事中の画像をクリックするとヌルッとレイヤーで表示するようにしています。レスポンシブを考えるとLightboxは良し悪しですね。
パソコンからのアクセスなら問題なし。問題なのは iPhone など表示幅が狭いデバイスアクセスでの表示。
トップページの記事一覧でアイキャッチ画像をクリックします。LightBox 導入なので、アイキャッチ画像をクリックすると単に画像が拡大されるだけです。ちょっとマズいのであります。
これを修正するとなると全記事を再編集ということになる。なんとか良い方法はないものでしょうか。
jQuery で a href のリンクを無効にする
「記事を開いたときには LightBox は活かして、トップページの記事一覧では LightBox は無効にする」というカスタマイズが必要になります。何らかの方法で LightBox のリンクを無効、更にトップページ（page name index）のときだけ動作させるという２段構えになります。
とりあえず、JavaScript で a href のリンクを無効にする方法をググったところ、ありました。
※jQuery がこのコード以前に読み込まれている必要があります。<script>
$(function(){
$('a.disabled').click(function(){
return false;
})
});
</script>
» [JS]Javascript で a 要素のリンクを無効にする方法のまとめ
赤文字の disable は a href リンクに追加された class のことで、実際には <a href="リンク先" class="disable"> と書いておかないといけない。結局、全記事を編集してクラスを追記することになるのでこのままではダメ。
アイキャッチ画像の LightBox リンクを識別できるのは rel="lightbox" だけです。
» jQueryでリンク＜a＞タグのhrefの値を無効にする方法<script>
$(function(){
$('a[href=#]').click(function(){
return false;
})
});
</script>
ブログにメニューを実装したとき、ルートになるメニューのリンクにダミーで # を入れることがあります。同じページが再読み込みされるだけなので、そのリンクを無効にしましょうというコードです。
これを参考に LightBox リンク唯一の識別子 rel="lightbox" を無効にしてみます。
<script>
$(function(){
$('a[rel=lightbox]').click(function(){
return false;
})
});
</script>
これで２段構えの１段階目は完了。
LightBox リンクはトップページだけで無効にする
このまま実装するとすべての場面で LightBox が効かなくなりますから、トップページ (page name index)だけで動作するように if 条件を追加します。
<% if:page_name eq "index" -%><script>
$(function(){
$('a[rel=lightbox]').click(function(){
return false;
})
});
</script><% /if -%>
このコードを HTML の<head> 〜 </head>追記します。</head> の直前で良いと思います。jQuery が読まれてないと動作しないので jquery をコードの前に入れておくことを忘れずに。
HTML のどこかで jQuery を追記しているときには、それを移動すれば良いと思います。ボクの jQuery は 1.8.3 ですがもっと新しバージョンもあります。slimmenu だったか忘れましたが何かのコードが 1.10.x にしたら動かなかったので、1.8.3 以上にアップデートしないだけですので。
トップページではなくて表示幅で無効にする
トップページやカテゴリページでサムネイル画像があったらクリックして記事が開きますよね、普通。アイキャッチ画像をクリックで拡大させるのは根本的な間違いでした。アイキャッチへのリンクは画像拡大ではなく記事URLに張り替えてます。でも、記事中の画像に貼った Lightbox のリンクはどうするかという問題が残る。前述のやり方はトップページのLightboxは無効。iPhone でアクセスしたとき記事ページの画像はクリックできるし、原寸よりも小さい画像が開くことになる。
トップページで無効にするのではなく、表示幅で無効にする方法もありかもしれない。
<script>
$(function(){
var e=$(window).width();
if(320>=e)
$(function(){
$('a[rel=lightbox]').click(function(){
return false;
})
]);
});
</script>
iPhone 5 までを想定して表示幅 320px 以下のデバイスからのアクセスでは lightbox のリンクを無効にするとこうなりますか。
ピッチで拡大する場合もあるだろうから何も気にしなくても良いのかもしれないし。悩みます。