虫眼鏡で覗くとレントゲンのように透けて見える効果を画像につけれる「MagnigierRentgen」

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

実用性はさておき、「画像にマウスカーソルを置くと、その部分が透けて見える」という効果をつけれるMagnifierRentgenを使ってみたら、面白いjQueryプラグインだったので紹介です。

スポンサーリンク
レクタングル(大)広告

MagnigierRentgenとは

MagnifierRentgen jQuery Plugin - Demo

MagnifierRentgenは、画像にレントゲンのような透かし効果を付けることができるjQueryプラグインです。

画像の上に、マウスカーソルを置くと、その部分に虫眼鏡が現れて、その虫眼鏡の部分が透けて見える表現を手軽に実装することができます。

言葉で説明するよりも、実際のものを見た方が早いので、実際のMagnifierRentgen効果を使った画像が以下。

このように、画像2枚用意して、通常表示時には「透けていない画像」を表示し、マウスカーソルを乗せたときだけ「透けた画像」を表示するような仕組みになっています。

MagnifierRentgen利用の主な手順

MagnifierRentgenを利用するには、主に以下の手順が必要です。

  1. MagnifierRentgenのダウンロード&設置
  2. ヘッダーでCSSを読み込む
  3. フッターでスクリプトを呼び出す
  4. 画像を表示する要素を書く

多少の設定は必要ですが、手順通りに行えば、そこまで難しい使い方ではないと思います。

MagnifierRentgenのダウンロード&設置

まずは、jQuery MagnigierRentgen Pluginで「Download ZIP」ボタンをクリックします。

GitHub - agragregra-MagnifierRentgen- MagnifierRentgen jQuery Plugin

「MagnifierRentgen-master.zip」というファイルがダウンロードされます。

中にある以下のファイルを、取り出します。

  • dist/jQuery.MagnifierRentgen.min.css
  • dist/jQuery.MagnifierRentgen.min.js

そして、プロジェクトフォルダ直下に、以下のように設置します。

  • css/jQuery.MagnifierRentgen.min.css
  • js/jQuery.MagnifierRentgen.min.js

WordPressテーマ(子テーマ)に設置した場合は、以下のようになります。

Wordpress子テーマにMagnifierRentgenを設置した場合

ヘッダーでCSSを読み込む

次に、<head></head>内でCSSファイルを以下のように読み込みます。

通常サイトの場合

通常サイトでは以下のように<head></head>内で読み込みます。

WordPressテーマの場合

WordPressの、子テーマから利用する場合は以下のように。

WordPress親テーマから利用する場合は以下のように書きます。

WordPressテーマの作法に則って書くなら、wp_enqueue_style()関数を使用してください。

追加のCSS

通常<head></head>内には上記の内容だけで十分ではありますが、今回はわかりやすくするために、以下のCSSを追加しています。

.wrapは、範囲をわかりやすく表示させるためのものです。

.wrap imgにmax-width: none !important;を指定しているのは、max-widthに値が指定してあると、MagnifierRentgenが正常動作しなくなるからです。

これを指定しないと、虫眼鏡で覗いた画像が小さく表示されてしまいます。こういった症状が現れた場合は、上記の方法で、画像要素のMAX幅を無効にしてやる必要があります。

フッターでスクリプトを呼び出す

次にフッターの</body>手前で以下のように呼び出します。

通常サイトの場合

スクリプトファイル呼び出して、jQueryコードを記入します。

コード部分は、たったこれだけ。

WordPressテーマの場合

WordPress子テーマで呼び出す場合は以下を、

WordPress親テーマで呼び出す場合は以下のように記入してください。

WordPressテーマの作法に則って書くなら、wp_localize_script()関数を使用してください。これを使うと、説明がややこしくなるので割愛。

画像を表示する要素を書く

あとは、コンテンツ部分に以下のようにHTML要素を記入します。

HTML要素に必要な属性は以下になります。

  • class:スクリプトに指定したクラス名を記入
  • data-image:デフォルトで表示される画像のパスを記入
  • data-image-zoom:虫眼鏡越しに見える画像のパスを記入
  • data-size:虫眼鏡の大きさをpx単位で記入
div.wrapは、見やすくするために装飾を加えるため追加したラッパー要素です。不要な場合は、削除してもOKです。

動作確認

最後に動作確認です。

色々なものを透かして見る効果をつけたいときに便利かと。

image by ZygoteBody™

まとめ

MagnigierRentgenは、画像を2枚利用することでコンテツ内の画像に、レントゲン効果を加えることができます。

ただ、「透過前」「透過後」の画像を見せたい場合は、ただ2枚の画像を上下に並べれば良いだけではあります。けれど、「ただそのまま見れてもつまらないよね」といった感じで、ちょっとした遊び心を加えたい場合には良いかもしれません。

この記事を書きつつも、今のところMagnigierRentgenの良い使いどころは、あまり思いつきませんが、使い方次第では、面白いページが作れるかもしれません。

参考 MagnifierRentgen