CMS, Program, WordPress

スマートフォンで閲覧する時にjQuery Colorboxを無効化する (WordPress)

スマートフォン対応って意外と手間かかりますよねコンバンハ。

つい先日、このブログにWordPressプラグイン「jQuery Colorbox」を導入しました。このプラグインを導入すると、エントリー内の画像をクリックした時に綺麗なエフェクトで画像を拡大してくれます。こんな感じですね。
lightbox

ところがこのプラグイン、スマートフォンで画像をクリックするといただけないことになります。今回はその回避策を書きます。

スマートフォンで見た時の問題点

見れば一目瞭然。スマートフォンで画像をクリックすると…
スマートフォンでプラグイン有効

画像どこや(=ω=)

このような状態になります。しかもこの状態を解除するバツボタン(X)がどこかにいってしまいます。なので解除できません!

回避策

とりあえず、スマートフォンで見た時はjQuery Colorboxを動かさないようにします。プラグインの中に、下記のjavascriptを書き込むだけ。

内容は「ユーザーエージェントにiphone/androidという文字があったら、この後ろの処理(colorboxの処理)は実行しない」というシンプルなものです。これをプラグインのファイルに書き込みます。

プラグイン編集画面へGO

プラグイン一覧から「jQuery Colorbox」を探し、「編集」を押します。
プラグイン一覧画面

画面右側にプラグインファイル名がずらっと並んでいます。その中から「jquery-colorbox/js/jquery-colorbox-wrapper-min.js」を選択します。
ファイル名

画面にびっしりとコードが書かれていると思います。この内容を一旦、全てコピーして、メモ帳かどこかに貼り付けて保存しておきましょう。プラグイン編集に失敗した時は、そのメモ帳の中身から復元します。

jQuery(document).ready(function(){」という文字を探します。上のほうにあるはず…。※画像クリックで拡大
documentReady

この「{」の直後に、↑に書いた一行のjavascriptをペーストします。※画像クリックで拡大
書き込み

ファイルを更新」ボタンを押して保存します。

作業は以上!

これでiPhoneやAndroid端末からアクセスした時はColorboxは動作しないはず!

何かおかしい場合は、メモ帳にコピーしておいたコードをjquery-colorbox/js/jquery-colorbox-wrapper-min.jsに戻してあげればOKです。

スマートフォンでも綺麗に動作するlightbox系プラグインって無いのかなぁ。時間あるときに探してみようかな…。

Facebook / 広告
2012年08月01日 | Posted in CMS, Program, WordPress5 Comments » 

関連記事

コメント5件

  • […] >>スマートフォンで閲覧する時にjQuery Colorboxを無効化する (WordPress) […]

  • へきる より:

    参考になりました! ありがとうございます

  • wg_koro より:

    お役に立てて何よりです!
    スマートフォン用のLightboxでいいものないかなぁ。いっそ作ってしまうか・・・。

  • […] スマートフォンで閲覧する時にjQuery Colorboxを無効化する […]

  • ぼっちん より:

    初めまして

    やはりjQueryのプラグインですが Lity.js ならレスポンシブ対応でとっても快適に表示しますよ。
    キチっとスマホ画面内で拡大表示してくれてます。

    もう、ご存知かもしれないですが、、、。
    とりあえず参考まで ^^

  • コメントを残す

    メールアドレスが公開されることはありません。

    スパム対策のため、コメントする際は下記の計算式を埋めてください。 計算式の有効期限が切れました。計算式の隣にある再読み込みボタンを押してください。