スマホの時はlightbox2のリンクを無効にする

デザイン

jQueryプラグインのライトボックスを利用すれば、簡単に画像拡大のアニメーションを設定することができます。

PCでは画像を拡大は情報の見やすさをアップしてくれますが、スマホ時は画像をデバイス幅に合わせて表示させることも多いので、あえて画像拡大しない方がよい場合もあるかと思います。

その際は、スマホのサイズの時のみCSSでリンクを無効にする対応がとても簡単です。

リンク無効の指定を、スマホ時のみ適用するようにします。

@media screen and (max-width: 767px) {
  .example-image-link {
    pointer-events: none;
  }
}
タイトルとURLをコピーしました